/* POC5 product layouts (legacy sheet; bridge overrides via /ds/hs-*).
 *
 * Load order: surfaces.css → handshake.css → THIS FILE → feature CSS → /ds bridge.
 * See docs/css-load-order.md. Do not reorder casually.
 *
 * Rough ownership map (search these banners):
 *   PORTAL SHELL     — .hs-portal-* workspace chrome
 *   JULIA CHAT       — .julia-chat-* dock/panel
 *   AGENTS           — phone / SMS / email / chatbot previews
 *   TRAINING         — business/personal info panels
 *   CONNECTORS       — connect + workspace integrations
 *   BILLING          — .hs-billing-*
 *   TASKS / ACTIVITY — .hs-tasks-*, .hs-activity-*, .hs-conv-*
 *   LANDER FRAGMENTS — connect page + legacy lander chrome still shared
 *
 * Prefer semantic tokens (--hs-* via bridge, or --ink/--panel aliases).
 * New component look-and-feel belongs in design-system/css/hs-bridge-components.css.
 */

[hidden],
.hs-is-hidden {
  display: none !important;
}

/* Nav links only — do not strip .hs-btn box borders (breaks outlined buttons). */
.hs-nav a {
  border-bottom: none;
}


.hs-page {
  min-height: 100vh;
  padding: var(--hs-space-5) var(--hs-space-4) var(--hs-space-8);
}

.hs-page-narrow {
  max-width: 420px;
  margin: 0 auto;
}

.hs-page-medium {
  max-width: 640px;
  margin: 0 auto;
}

.hs-page-wide {
  max-width: 1280px;
  margin: 0 auto;
}

.hs-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--hs-text-muted);
  margin-bottom: var(--hs-space-5);
}

.hs-nav .hs-logo {
  font-weight: 700;
  color: var(--hs-text);
  border-bottom: none;
}

.hs-logo-with-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-2);
}

.hs-logo-mark {
  display: block;
  border-radius: var(--hs-radius-full);
  flex-shrink: 0;
}

.hs-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.hs-hero-portrait {
  width: 160px;
  height: 160px;
  border-radius: var(--hs-radius-full);
  background: linear-gradient(145deg, var(--hs-aqua) 0%, var(--hs-aqua-hover) 100%);
  margin: var(--hs-space-2) 0 var(--hs-space-4);
  box-shadow: var(--hs-shadow-aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hs-hero-portrait--brand {
  background: transparent;
  overflow: visible;
}

.hs-hero-portrait--brand .hs-hero-mark {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--hs-radius-full);
  object-fit: cover;
  box-shadow: var(--hs-shadow-aqua);
}

.hs-hero-portrait:not(.hs-hero-portrait--brand) .hs-hero-mark {
  width: 88%;
  height: 88%;
  display: block;
  color: var(--hs-ink);
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
}

.hs-hero-bubble {
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-xl);
  padding: var(--hs-space-3) var(--hs-space-4);
  font-size: 0.95rem;
  box-shadow: var(--hs-shadow);
  margin-bottom: var(--hs-space-5);
  align-self: stretch;
  text-align: left;
}

/* Lander — example chat thread */
.hs-lander-chat {
  align-self: stretch;
  width: 100%;
  margin: var(--hs-space-4) 0 var(--hs-space-5);
}

/* Lander — copy scrolls; chat fixed to viewport bottom (mobile composer feel) */
.hs-page-lander.hs-shell-column {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--lander-chat-dock-h, 12rem);
  box-sizing: border-box;
}

.hs-page.hs-page-lander {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

.hs-page-lander .hs-nav {
  flex-shrink: 0;
  margin-bottom: var(--hs-space-2);
}

.hs-page-lander .hs-lander-fine {
  flex-shrink: 0;
  margin: auto 0 0;
  padding: var(--hs-space-3) var(--hs-space-2) var(--hs-space-2);
  text-align: center;
  font-size: 0.6875rem;
}

.hs-page-lander .hs-hero.hs-lander-scene {
  align-items: stretch;
  text-align: left;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Fixed dock — centered column, inset from screen edges */
.hs-lander-chat-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 var(--hs-space-3)
    calc(var(--hs-space-2) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  box-sizing: border-box;
}

.hs-lander-marketing {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--hs-space-2) 0;
}

.hs-lander-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  text-align: center;
  padding: var(--hs-space-4) 0;
  box-sizing: border-box;
}

.hs-lander-intro h1 {
  margin: 0 0 var(--hs-space-3);
  font-size: clamp(1.5rem, 5vw, 1.85rem);
  line-height: 1.15;
}

.hs-lander-intro .sub {
  margin: 0 auto;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Chat panel — full corner radius, floats above home indicator */
.hs-lander-chat-dock .hs-lander-chat-sheet {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  max-height: min(70dvh, 28rem);
  border-radius: 1.25rem;
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: max-height 0.38s var(--hs-ease-out, ease-out);
  overflow: hidden;
}

@media (max-width: 520px) {
  .hs-lander-chat-dock {
    padding-left: var(--hs-space-2);
    padding-right: var(--hs-space-2);
  }

  .hs-lander-chat-dock .hs-lander-chat-sheet {
    border-radius: 1.125rem;
    max-height: min(75dvh, 32rem);
  }
}

.hs-lander-chat-dock .hs-lander-chat-sheet.is-collapsed {
  max-height: 10.5rem;
}

.hs-lander-chat-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  width: 100%;
  margin: 0;
  padding: var(--hs-space-3) var(--hs-space-4);
  border: none;
  border-bottom: 1px solid var(--hs-border);
  background: transparent;
  color: var(--hs-text);
  font-family: var(--hs-font);
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.hs-lander-chat-toggle:hover {
  background: color-mix(in srgb, var(--hs-bg-sunken) 55%, transparent);
}

.hs-lander-chat-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hs-lander-chat-toggle-text strong {
  font-size: 0.9375rem;
  font-weight: 700;
}

.hs-lander-chat-toggle-hint {
  font-size: 0.75rem;
  color: var(--hs-text-muted);
  font-weight: 500;
}

.hs-lander-chat-chevron {
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--hs-text-muted);
  border-bottom: 2px solid var(--hs-text-muted);
  transform: rotate(225deg);
  transition: transform 0.32s var(--hs-ease-out, ease-out);
  margin-top: 0.2rem;
}

.hs-lander-chat-sheet.is-collapsed .hs-lander-chat-chevron {
  transform: rotate(45deg);
  margin-top: -0.15rem;
}

.hs-lander-chat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--hs-space-3);
  padding: 0 var(--hs-space-3) var(--hs-space-3);
  overflow: hidden;
}

.hs-lander-chat-sheet.is-collapsed .hs-lander-chat-prompts {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}

.hs-lander-chat-prompts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--hs-space-2);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-end;
  opacity: 1;
  max-height: 16rem;
  transition: opacity 0.28s ease, max-height 0.38s var(--hs-ease-out, ease-out);
}

.hs-lander-prompt {
  font-family: var(--hs-font);
  text-align: right;
  border: 1px solid var(--hs-border);
  border-radius: 1.125rem;
  border-bottom-right-radius: 0.25rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hs-text);
  cursor: pointer;
  box-shadow: var(--hs-shadow);
  max-width: min(92%, 20rem);
  line-height: 1.35;
  appearance: none;
  -webkit-appearance: none;
  will-change: transform;
}

.hs-lander-prompt:hover {
  box-shadow: var(--hs-shadow-lg);
}

.hs-lander-chat-row {
  display: flex;
  gap: var(--hs-space-2);
  align-items: center;
  flex-shrink: 0;
}

.hs-lander-chat-row .hs-input {
  flex: 1;
  margin: 0;
}

.hs-lander-chat-row .hs-btn {
  flex-shrink: 0;
}

/* Public Google connect page — connector screen */
.hs-connect-page {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vw, 64px) 16px clamp(48px, 8vw, 96px);
  padding-bottom: max(clamp(48px, 8vw, 96px), env(safe-area-inset-bottom, 0));
  color: var(--ink, var(--neutral-800, #242424));
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-tint, #EAFBF1) 0%, transparent 55%),
    var(--canvas, #F1F4F0);
}

.hs-connect-shell {
  width: 100%;
  max-width: 440px;
  padding: 0;
}

.hs-connect-surface {
  width: 100%;
  background: var(--panel, #fff);
  border-radius: var(--r-2xl, 28px);
  overflow: hidden;
  box-shadow: var(--shadow, 0 2px 4px rgba(8, 15, 52, 0.04), 0 24px 60px rgba(8, 40, 24, 0.07));
  border: 1px solid var(--hair, rgba(8, 15, 52, 0.04));
}

.hs-connect-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.hs-connect-panel {
  padding: 24px;
  text-align: left;
}

.hs-connect-step-title {
  margin: 0 0 var(--hs-space-2);
  font-size: 1.125rem;
  font-weight: 800;
  text-align: center;
}

.hs-connect-success .hs-cs-check {
  width: 2.5rem;
  height: 2.5rem;
}

/* Rich wavy header */
.hs-cs-header {
  position: relative;
}

.hs-cs-header--rich {
  height: 224px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--aquamarine, #43E5A4) 0%, var(--everglade-500, #27AE60) 100%);
}

.hs-cs-header--minimal {
  height: 120px;
}

.hs-cs-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hs-cs-dots {
  position: absolute;
  left: 22px;
  top: 30px;
  width: 70px;
  height: 60px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.4px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.5;
}

.hs-cs-floatcard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 20px;
  padding: 18px 24px 18px 18px;
  box-shadow: 0 18px 40px rgba(8, 15, 52, 0.18);
  min-width: 264px;
}

.hs-cs-floatcard__title {
  font-size: 23px;
  font-weight: 800;
  color: var(--neutral-800, #242424);
  line-height: 1.1;
}

.hs-cs-floatcard__sub {
  font-size: 15px;
  color: var(--neutral-500, #757575);
  margin-top: 3px;
  font-weight: 500;
}

.hs-cs-hmark {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

/* Logo tiles */
.hs-cs-logo {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(8, 15, 52, 0.10);
  flex-shrink: 0;
}

.hs-cs-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hs-cs-logo--lg {
  width: 52px;
  height: 52px;
  padding: 9px;
}

.hs-cs-logo--sm {
  width: 40px;
  height: 40px;
  padding: 7px;
  border: 1px solid var(--neutral-200, #EFF0F6);
  box-shadow: none;
}

.hs-cs-logo--meta {
  background: #0a0a0a;
}

.hs-cs-logo--stripe {
  background: #0a0a0a;
}

/* Body */
.hs-cs-body {
  padding: 24px 24px 22px;
}

.hs-cs-intro {
  margin: 4px 0 18px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--neutral-600, #525252);
  text-align: center;
}

/* Scope rows */
.hs-cs-scopes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-cs-scope {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--neutral-200, #EFF0F6);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.2s, background 0.2s;
}

.hs-cs-scope--focus {
  border-color: var(--aquamarine, #43E5A4);
  box-shadow: 0 0 0 2px rgba(67, 229, 164, 0.22);
}

.hs-cs-scope--selectable {
  cursor: pointer;
}

.hs-cs-scope--selectable:hover {
  border-color: var(--neutral-300, #DADADA);
}

.hs-cs-scope--selectable.hs-cs-scope--focus:hover {
  border-color: var(--aquamarine, #43E5A4);
}

.hs-cs-scope__text {
  flex: 1;
  min-width: 0;
}

.hs-cs-scope__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-800, #242424);
  line-height: 1.2;
}

.hs-cs-scope__desc {
  font-size: 13px;
  color: var(--neutral-500, #757575);
  margin-top: 3px;
  line-height: 1.4;
}

.hs-cs-status {
  flex-shrink: 0;
}

.hs-cs-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--aquamarine, #43E5A4);
  color: var(--everglade-700, #1D4032);
}

.hs-cs-dot-empty {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--neutral-300, #DADADA);
}

/* Access block */
.hs-cs-access {
  margin-top: 22px;
}

.hs-cs-access__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.hs-cs-access__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--neutral-800, #242424);
  margin: 0;
}

.hs-cs-lockpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neutral-600, #525252);
  background: var(--neutral-150, #F0F1F1);
  padding: 4px 10px;
  border-radius: 360px;
  flex-shrink: 0;
}

.hs-cs-tier {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  text-align: left;
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--everglade-200, #CCFFEB);
  border-radius: 16px;
  background: var(--everglade-100, #F0FFF3);
  cursor: default;
}

.hs-cs-tier__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  background: rgba(29, 64, 50, 0.08);
  color: var(--everglade-700, #1D4032);
}

.hs-cs-tier__body {
  flex: 1;
  min-width: 0;
}

.hs-cs-tier__label {
  font-size: 15px;
  font-weight: 800;
  color: var(--everglade-700, #1D4032);
}

.hs-cs-tier__who {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500, #757575);
  margin-top: 1px;
}

.hs-cs-tier__blurb {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--neutral-600, #525252);
}

.hs-cs-access__note {
  margin: 12px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--neutral-500, #757575);
}

/* Divider / summary */
.hs-cs-divider {
  height: 1px;
  background: var(--border-hair, #E0DFE2);
  margin: 22px 0 18px;
}

.hs-cs-summary {
  text-align: center;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--neutral-600, #525252);
}

.hs-cs-summary strong {
  color: var(--neutral-800, #242424);
}

/* Fresh connect: primary connector CTA only */
.hs-cs-body--connect-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 36px;
  padding-bottom: 28px;
  min-height: 180px;
}

.hs-cs-connect-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hs-cs-btn--connector {
  min-height: 64px;
  padding: 14px 22px;
  border-radius: 18px;
  font-size: 17px;
  letter-spacing: -0.01em;
  gap: 14px;
  box-shadow: 0 12px 28px rgba(29, 64, 50, 0.24);
}

.hs-cs-btn__logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(8, 15, 52, 0.08);
  flex-shrink: 0;
}

.hs-cs-btn__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hs-cs-btn__logo.hs-cs-logo--meta,
.hs-cs-btn__logo.hs-cs-logo--stripe {
  background: #0a0a0a;
}

.hs-cs-btn__label {
  min-width: 0;
}

.hs-cs-btn--reconnect {
  margin-top: 0;
}

/* Pill button */
.hs-cs-btn {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: 360px;
  padding: 16px;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  min-height: 54px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.hs-cs-btn--primary {
  background: var(--everglade-700, #1D4032);
  color: #fff;
}

.hs-cs-btn--primary:hover {
  background: #163026;
}

.hs-cs-btn--ghost {
  background: #fff;
  color: var(--neutral-800, #242424);
  border-color: var(--neutral-300, #DADADA);
}

.hs-cs-btn--ghost:hover {
  border-color: var(--neutral-400, #A0A3BD);
  background: #FCFDFB;
}

.hs-cs-btn--disconnect {
  margin-top: 0;
  background: #fff;
  color: var(--hs-danger-600, #DC2626);
  border-color: var(--hs-danger-200, #FECACA);
}

.hs-cs-btn--disconnect:hover {
  background: var(--hs-danger-600, #DC2626);
  color: #fff;
  border-color: var(--hs-danger-600, #DC2626);
}

/* Connection settings (Settings view) */
.hs-cs-body--settings {
  padding-top: 8px;
}

.hs-cs-settings__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

.hs-cs-settings__actions .hs-cs-btn {
  width: 100%;
  margin-top: 0;
}

.hs-cs-settings + .hs-cs-btn,
.hs-cs-settings + .hs-cs-connect-cta,
.hs-cs-settings__actions + .hs-cs-btn,
.hs-cs-settings__actions + .hs-cs-connect-cta {
  margin-top: 14px;
}

.hs-cs-body--connect-only:has(.hs-cs-settings) {
  align-items: stretch;
}

.hs-cs-settings-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.hs-cs-settings-head__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--neutral-800, #242424);
}

.hs-cs-settings {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.hs-cs-settings__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--neutral-200, #EFF0F6);
}

.hs-cs-settings__row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.hs-cs-settings__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-600, #525252);
  flex-shrink: 0;
}

.hs-cs-settings__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-800, #242424);
  text-align: right;
  word-break: break-all;
}

.hs-cs-settings__row--label .hs-cs-settings__value {
  flex: 1;
  min-width: 0;
}

.hs-cs-label-input {
  width: 100%;
  max-width: 220px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid rgba(16, 24, 40, 0.14);
  border-radius: 10px;
  background: #f7f9f8;
  color: var(--neutral-800, #242424);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
}

.hs-cs-label-input:focus {
  outline: none;
  border-color: var(--accent-2, #1a7f4b);
  background: #fff;
}

.hs-cs-settings__row--label .hs-cs-settings__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.hs-cs-label-save {
  font-size: 12px;
  min-height: 1em;
}

.hs-cs-label-save.ok {
  color: var(--everglade-600, #1a7f4b);
}

.hs-cs-label-save.err {
  color: var(--hs-danger-600, #DC2626);
}

.hs-connector-tag--label {
  background: #e8f7ef;
  color: #176542;
}

/* Footer trust copy */
.hs-cs-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--neutral-500, #757575);
}

.hs-cs-foot__dot {
  color: var(--neutral-300, #DADADA);
}

/* Connected accounts */
.hs-cs-accounts {
  margin-top: 22px;
}

.hs-cs-accounts__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--neutral-800, #242424);
}

.hs-account-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-account-item {
  padding: 14px;
  border: 1px solid var(--neutral-200, #EFF0F6);
  border-radius: 16px;
  background: var(--neutral-150, #F0F1F1);
}

.hs-account-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.hs-account-main strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-800, #242424);
  word-break: break-all;
}

.hs-account-main .sub {
  font-size: 12.5px;
  color: var(--neutral-500, #757575);
}

.hs-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hs-account-actions .hs-btn {
  font-size: 0.75rem;
}

/* Workspace integrations — connector patterns in card */
.hs-integ-scopes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px;
}

.hs-integ-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 480px) {
  .hs-connect-page {
    padding: 12px 12px 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0));
  }

  .hs-connect-surface {
    border-radius: 20px;
  }

  .hs-cs-header--rich {
    height: 128px;
  }

  .hs-cs-header--minimal {
    height: 88px;
  }

  .hs-cs-dots {
    display: none;
  }

  .hs-cs-floatcard {
    min-width: 0;
    width: calc(100% - 32px);
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(8, 15, 52, 0.14);
  }

  .hs-cs-floatcard__title {
    font-size: 18px;
  }

  .hs-cs-floatcard__sub {
    font-size: 13px;
    margin-top: 2px;
  }

  .hs-cs-logo--lg {
    width: 40px;
    height: 40px;
    padding: 7px;
  }

  .hs-cs-hmark {
    right: 14px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    padding: 6px;
  }

  .hs-cs-body {
    padding: 18px 18px 20px;
  }
}

.hs-lander-thread {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  text-align: left;
}

.hs-lander-thread-time,
.hs-lander-thread-divider {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--hs-text-muted);
  margin: var(--hs-space-1) 0;
}

.hs-lander-msg {
  display: flex;
  max-width: 88%;
}

.hs-lander-msg.sent {
  align-self: flex-end;
  justify-content: flex-end;
}

.hs-lander-msg.received {
  align-self: flex-start;
}

.hs-lander-msg .bubble {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.35;
}

.hs-lander-msg.sent .bubble {
  background: #007aff;
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.hs-lander-msg.received .bubble {
  background: var(--hs-bg-sunken);
  color: var(--hs-text);
  border: 1px solid var(--hs-border);
  border-bottom-left-radius: 0.25rem;
}

.hs-lander-msg .bubble strong {
  font-weight: 600;
}

/* Lander — primary CTA block */
.hs-lander-cta {
  align-self: stretch;
  width: 100%;
  text-align: center;
  padding: var(--hs-space-5) var(--hs-space-4);
  margin-bottom: var(--hs-space-4);
  background: var(--hs-surface);
  border: 2px solid var(--hs-aqua);
  border-radius: var(--hs-radius-xl);
  box-shadow: var(--hs-shadow-lg);
}

.hs-lander-cta-title {
  margin: 0 0 var(--hs-space-2);
  font-size: 1.35rem;
  color: var(--hs-text);
}

.hs-lander-cta-sub {
  margin: 0 0 var(--hs-space-4);
}

.hs-lander-cta-btn {
  width: 100%;
}

.hs-phone-row {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  background: var(--hs-surface);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-3);
  margin-bottom: var(--hs-space-3);
  border: 1px solid var(--hs-border);
  font-size: 0.9rem;
}

.hs-phone-row input {
  border: none;
  flex: 1;
  font: inherit;
  background: transparent;
  outline: none;
  color: var(--hs-text);
}

.hs-phone-row input::placeholder {
  color: var(--hs-text-subtle);
}

.hs-stack { display: flex; flex-direction: column; gap: var(--hs-space-2); }
.hs-stack-gap-3 { gap: var(--hs-space-3); }

.hs-fine {
  font-size: 0.75rem;
  color: var(--hs-text-muted);
  text-align: center;
  margin-top: var(--hs-space-4);
  line-height: 1.45;
}

.hs-intake-cta { margin-bottom: var(--hs-space-4); }

.hs-joined-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.hs-joined-card {
  text-align: center;
  width: 100%;
}

.hs-joined-card h1 {
  margin: 0 0 var(--hs-space-3);
  font-size: 1.5rem;
}

.hs-joined-card .num {
  margin: 0 0 var(--hs-space-4);
}

.hs-joined-qr {
  display: block;
  margin: 0 auto var(--hs-space-4);
  border-radius: var(--hs-radius);
}

.hs-joined-qr-mobile {
  max-width: 140px;
  margin-bottom: var(--hs-space-3);
}

.hs-joined-card .hs-btn {
  width: 100%;
  margin-bottom: var(--hs-space-3);
}

.hs-joined-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--hs-text-muted);
  line-height: 1.45;
}

.hs-joined-qr-wrap {
  align-self: stretch;
  text-align: center;
  margin: var(--hs-space-4) 0;
}

.hs-joined-qr-wrap .num {
  margin-top: var(--hs-space-3);
  font-family: var(--hs-font-mono);
  font-size: 1rem;
  font-weight: 600;
}

.hs-admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hs-space-5);
}

.hs-admin-login-card {
  width: 100%;
  max-width: 400px;
}

.hs-admin-login-card h1 {
  font-size: 1.5rem;
  margin: 0 0 var(--hs-space-2);
  font-weight: 700;
}

.hs-admin-login-title {
  margin: 0 0 var(--hs-space-5);
  font-size: 1rem;
}

.hs-admin-login-card label {
  margin-top: 0;
}

.hs-admin-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-5);
}

.hs-admin-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

#users-toolbar[hidden],
#admin-layout[hidden] {
  display: none !important;
}

.hs-admin-layout {
  display: grid;
  gap: var(--hs-space-5);
}

@media (min-width: 1100px) {
  .hs-admin-layout.has-detail {
    grid-template-columns: 1fr minmax(320px, 42%);
    align-items: start;
  }
}

.hs-admin-detail {
  position: sticky;
  top: var(--hs-space-4);
  max-height: calc(100vh - var(--hs-space-8));
  overflow-y: auto;
}

.hs-admin-client-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-5);
  padding-bottom: var(--hs-space-4);
  border-bottom: 1px solid var(--hs-border);
}

.hs-admin-client-bar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hs-space-4);
}

.hs-admin-client-bar h1 {
  margin: 0;
  font-size: 1.35rem;
}

.hs-admin-client-badge {
  margin: 0 0 var(--hs-space-1);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-warning);
}

.hs-admin-only-panel {
  margin-bottom: var(--hs-space-5);
  border: 1px solid rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.06);
}

.hs-admin-only-panel h2 {
  margin: 0 0 var(--hs-space-4);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--hs-warning);
}

.hs-admin-agent-prompt {
  margin-top: 28px;
  margin-bottom: 8px;
  padding: 16px 18px;
  border-radius: 16px;
}

.hs-admin-agent-prompt__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}

.hs-admin-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--hs-everglade-900, #0e1b11);
  color: #ffffff;
}

.hs-admin-agent-prompt > h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

.hs-admin-agent-prompt__sub {
  margin: 0 0 14px;
}

/* Variable table — admin-only, shows live tenant values. Sits above the
   prompt preview, so the spacing hangs below it. */
.hs-admin-agent-prompt__vars {
  margin-bottom: 14px;
  border: 1px solid var(--hs-border, #e2e8e4);
  border-radius: 12px;
  background: #f8faf9;
}

.hs-admin-agent-prompt__vars > summary {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.hs-admin-agent-prompt__vars > summary::-webkit-details-marker {
  display: none;
}

.hs-admin-agent-prompt__vars > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.hs-admin-agent-prompt__vars[open] > summary::before {
  transform: rotate(90deg);
}

.hs-admin-agent-prompt__varcount {
  font-weight: 400;
  color: var(--hs-muted, #64748b);
}

.hs-admin-agent-prompt__varcount.is-warn {
  color: #b45309;
}

.hs-admin-agent-prompt__varbody {
  padding: 0 12px 12px;
}

.hs-adm-vartable__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.hs-adm-vartable__search {
  flex: 1 1 200px;
  min-width: 160px;
}

.hs-adm-vartable__filters {
  display: inline-flex;
  gap: 4px;
}

.hs-adm-vartable__filters button {
  padding: 5px 10px;
  border: 1px solid var(--hs-border, #e2e8e4);
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-muted, #64748b);
  cursor: pointer;
}

.hs-adm-vartable__filters button.is-active {
  background: var(--hs-everglade-900, #0e1b11);
  border-color: var(--hs-everglade-900, #0e1b11);
  color: #ffffff;
}

/* Wide content scrolls inside its own box, never the page. */
.hs-adm-vartable__scroll {
  overflow-x: auto;
  border: 1px solid var(--hs-border, #e2e8e4);
  border-radius: 10px;
  background: #ffffff;
}

.hs-adm-vartable__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12px;
}

.hs-adm-vartable__table th {
  position: sticky;
  top: 0;
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hs-muted, #64748b);
  background: #f8faf9;
  border-bottom: 1px solid var(--hs-border, #e2e8e4);
}

.hs-adm-vartable__table td {
  padding: 8px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--hs-border-soft, #eef2f0);
}

.hs-adm-vartable__grouprow td {
  padding: 10px;
  font-weight: 700;
  background: #f3f6f4;
}

.hs-adm-vartable__grouprow span {
  display: block;
  font-weight: 400;
  color: var(--hs-muted, #64748b);
}

.hs-adm-vartable__var code {
  font-size: 11.5px;
  white-space: nowrap;
}

.hs-adm-vartable__legacy {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--hs-muted, #64748b);
}

.hs-adm-vartable__desc strong {
  display: block;
}

.hs-adm-vartable__desc span {
  display: block;
  margin-top: 2px;
  color: var(--hs-muted, #64748b);
}

.hs-adm-vartable__value {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.hs-adm-vartable__none {
  color: var(--hs-muted, #64748b);
}

.hs-adm-vartable__status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.hs-adm-vartable__status--ok {
  background: rgba(67, 229, 164, 0.18);
  color: #0f5132;
}

.hs-adm-vartable__status--warn {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}

.hs-adm-vartable__status--off {
  background: rgba(100, 116, 139, 0.16);
  color: #475569;
}

.hs-adm-vartable__owner {
  font-weight: 600;
  color: var(--hs-muted, #64748b);
  white-space: nowrap;
}

.hs-adm-vartable__owner--custom {
  color: #6d28d9;
}

.hs-adm-vartable__empty {
  padding: 16px;
  text-align: center;
  color: var(--hs-muted, #64748b);
}

.hs-admin-agent-prompt__body .hs-adm-preview-pre {
  max-height: 420px;
}

.hs-admin-agent-prompt__body .hs-adm-prompt-assembled {
  max-height: 480px;
}

.hs-admin-agent-prompt__body .hs-adm-prompt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hs-border, #e2e8e4);
  border-radius: 10px;
  background: #f8faf9;
}
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #44534c;
}
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #94a3b8;
}
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--business::before { background: rgba(67, 229, 164, 0.9); }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--skills::before { background: rgba(167, 139, 250, 0.95); }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--rules::before { background: rgba(245, 158, 11, 0.95); }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--tools::before { background: rgba(96, 165, 250, 0.95); }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--integrations::before { background: rgba(45, 212, 191, 0.95); }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--personality::before { background: rgba(244, 114, 182, 0.95); }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--channel::before { background: #94a3b8; }
.hs-admin-agent-prompt__body .hs-adm-prompt-legend__item--other::before { background: #64748b; }

.hs-admin-agent-prompt__body .hs-adm-prompt-field,
.hs-adm-prompt-field {
  position: relative;
  border: 1px solid var(--hs-border, #e2e8e4);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.hs-admin-agent-prompt__body .hs-adm-prompt-field__toolbar,
.hs-adm-prompt-field__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hs-border, #e2e8e4);
  background: #f8faf9;
}
.hs-admin-agent-prompt__body .hs-adm-prompt-field__hint,
.hs-adm-prompt-field__hint {
  font-size: 12px;
  color: #66756d;
}
.hs-admin-agent-prompt__body .hs-adm-prompt-field__content,
.hs-adm-prompt-field__content {
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 14px 16px;
  margin: 0;
  font-family: var(--hs-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1f2a25;
  user-select: text;
  cursor: text;
}
.hs-adm-prompt-seg {
  display: inline;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hs-adm-prompt-seg--business { background: rgba(67, 229, 164, 0.18); }
.hs-adm-prompt-seg--skills { background: rgba(167, 139, 250, 0.18); }
.hs-adm-prompt-seg--rules { background: rgba(245, 158, 11, 0.18); }
.hs-adm-prompt-seg--tools { background: rgba(96, 165, 250, 0.18); }
.hs-adm-prompt-seg--integrations { background: rgba(45, 212, 191, 0.18); }
.hs-adm-prompt-seg--personality { background: rgba(244, 114, 182, 0.18); }
.hs-adm-prompt-seg--channel { background: rgba(148, 163, 184, 0.22); }
.hs-adm-prompt-seg--other { background: rgba(100, 116, 139, 0.16); }

.hs-adm-prompt-selbar {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #cfdad4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 40, 30, 0.12);
}
.hs-adm-prompt-selbar[hidden] {
  display: none !important;
}
.hs-adm-prompt-selbar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #66756d;
  margin-right: 2px;
}
.hs-adm-prompt-report-status {
  margin: 0;
  padding: 6px 12px 10px;
  font-size: 12px;
  color: #66756d;
  min-height: 1.2em;
}
.hs-adm-prompt-report-status.is-ok { color: #1b6b42; }
.hs-adm-prompt-report-status.is-err { color: #b42318; }

.hs-admin-only-panel h3 {
  margin: 0 0 var(--hs-space-3);
  font-size: 0.9rem;
}

.hs-admin-only-grid {
  display: grid;
  gap: var(--hs-space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hs-admin-only-full {
  grid-column: 1 / -1;
}

.hs-admin-only-full .chat {
  max-height: 280px;
}

.hs-client-workspace-wrap {
  border: 2px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-4);
  background: var(--hs-bg-elev);
}

.hs-client-view-label {
  margin: 0 0 var(--hs-space-3);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

.hs-client-workspace-title {
  margin: 0 0 var(--hs-space-2);
  font-size: 1.15rem;
}

.hs-table .hs-name-link {
  color: var(--hs-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.hs-table tr.data-row {
  cursor: pointer;
}

.hs-service-list {
  list-style: none;
  padding: 0;
  margin: var(--hs-space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-2);
}

.hs-service-list li .pill { margin: 0; }

.hs-faq {
  margin-top: var(--hs-space-5);
  font-size: 0.8rem;
  color: var(--hs-text-muted);
  line-height: 1.5;
  text-align: left;
  align-self: stretch;
}

.hs-desktop-hint {
  display: none;
  margin-top: var(--hs-space-4);
  text-align: center;
  font-size: 0.85rem;
  color: var(--hs-text-muted);
}

@media (min-width: 768px) {
  .hs-desktop-hint { display: block; }
}

.hs-status { font-size: 0.875rem; min-height: 1.25rem; margin-top: var(--hs-space-2); }
.hs-status.ok { color: var(--pass, var(--hs-success)); }
.hs-status.err { color: var(--fail, var(--hs-danger)); }
.hs-status.warn { color: var(--hs-warning); }

#status:empty {
  display: none;
}

/* Mobile first-visit: dismissable Add to Home Screen card (task-sized) */
.hs-a2hs-card {
  display: none;
  margin: 12px 12px 0;
  border-radius: 14px;
  border: 1px solid rgba(26, 127, 75, 0.22);
  background:
    linear-gradient(165deg, #f3fbf7 0%, #ffffff 55%, #fafcfb 100%);
  box-shadow:
    0 10px 28px rgba(14, 27, 17, 0.1),
    0 2px 6px rgba(14, 27, 17, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

/* Mirrors isMobileViewport() in workspace-app.js — (max-width: 899px) OR
   (pointer: coarse). When this only matched the width, a touch device wider
   than 900px (iPad Pro in landscape, touchscreen laptop) passed the JS gate,
   got the card injected, and then never rendered it. */
@media (max-width: 899px), (pointer: coarse) {
  .hs-a2hs-card {
    display: block;
  }
}

.hs-a2hs-card__inner {
  position: relative;
  padding: 0.85rem 0.9rem 0.75rem;
}

.hs-a2hs-card__hero {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0 0 0.65rem;
}

.hs-a2hs-card__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid rgba(14, 27, 17, 0.08);
  box-shadow: 0 2px 8px rgba(14, 27, 17, 0.08);
}

.hs-a2hs-card__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.hs-a2hs-card__title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink, #17241c);
  letter-spacing: -0.01em;
}

.hs-a2hs-card__steps {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-2, #3d5248);
  font-size: 0.82rem;
  line-height: 1.4;
}

.hs-a2hs-card__steps li + li {
  margin-top: 3px;
}

/* The Share control is an unlabelled glyph on every platform, so naming it
   isn't enough — the step has to show the shape the user is hunting for. */
.hs-a2hs-card__glyph {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.1em;
  margin-right: 0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-a2hs-card__note {
  margin: 0;
  color: var(--ink-2, #3d5248);
  font-size: 0.82rem;
  line-height: 1.4;
}

.hs-a2hs-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.hs-a2hs-card__cta {
  border: 1px solid rgba(26, 127, 75, 0.4);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #24a86a 0%, #1a7f4b 100%);
  color: #f9faf2;
  box-shadow: 0 2px 6px rgba(14, 27, 17, 0.16);
}

.hs-a2hs-card__cta:hover,
.hs-a2hs-card__cta:focus-visible {
  background: linear-gradient(180deg, #2ab476 0%, #1d8b53 100%);
  outline: none;
}

.hs-a2hs-card__cta[disabled] {
  opacity: 0.6;
  cursor: default;
}

.hs-a2hs-card__dismiss {
  border: 1px solid rgba(14, 27, 17, 0.14);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #1d4032;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.04);
}

.hs-a2hs-card__dismiss:hover,
.hs-a2hs-card__dismiss:focus-visible {
  border-color: rgba(26, 127, 75, 0.35);
  background: #f3fbf7;
  outline: none;
}

.hs-ws-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--hs-border, #e7edea);
  background: var(--hs-bg-elev, #fff);
  box-shadow:
    0 8px 32px rgba(14, 27, 17, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease;
}

@media (max-width: 899px) {
  .hs-ws-toast,
  .hs-boost-toast {
    top: calc(
      var(--ws-browser-chrome-top, 0px) +
        var(--ws-mobile-topbar-h, calc(52px + env(safe-area-inset-top, 0px))) +
        8px
    );
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: translateY(-8px);
  }

  .hs-ws-toast--in,
  .hs-boost-toast--in {
    transform: translateY(0);
  }

  .hs-ws-toast--out,
  .hs-boost-toast--out {
    transform: translateY(-6px);
  }
}

.hs-ws-toast[hidden] {
  display: none !important;
}

.hs-ws-toast--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hs-ws-toast--out {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.hs-ws-toast--ok {
  border-color: rgba(67, 229, 164, 0.45);
  background: linear-gradient(135deg, #f9faf2 0%, #eef9f3 100%);
}

.hs-ws-toast--warn {
  border-color: rgba(245, 166, 35, 0.45);
  background: linear-gradient(135deg, #fffbf5 0%, #fef6e8 100%);
}

.hs-ws-toast--err {
  border-color: rgba(229, 72, 77, 0.35);
  background: linear-gradient(135deg, #fffafa 0%, #fcf0ee 100%);
}

.hs-ws-toast__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.hs-ws-toast--ok .hs-ws-toast__icon {
  background: rgba(67, 229, 164, 0.25);
  color: #0c7a52;
}

.hs-ws-toast--warn .hs-ws-toast__icon {
  background: rgba(245, 166, 35, 0.22);
  color: #9a6200;
}

.hs-ws-toast--err .hs-ws-toast__icon {
  background: rgba(229, 72, 77, 0.15);
  color: var(--hs-danger, #e5484d);
}

.hs-ws-toast__msg {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hs-text, #0e1b11);
}

/* Stats */

.hs-stat {
  background: var(--hs-bg-elev);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: var(--hs-space-3) var(--hs-space-4);
  font-size: 0.875rem;
}

.hs-stat strong { display: block; font-size: 1.25rem; color: var(--hs-text); }

/* Tables */
.hs-table-wrap { overflow-x: auto; }

.hs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.hs-table th,
.hs-table td {
  text-align: left;
  padding: var(--hs-space-2) var(--hs-space-3);
  border-bottom: 1px solid var(--hs-border);
  vertical-align: top;
}

.hs-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  font-weight: 600;
}

.hs-table tr.data-row { cursor: pointer; }
.hs-table tr.data-row:hover { background: var(--hs-bg-elev); }
.hs-table tr.data-row.selected {
  background: rgba(67, 229, 164, 0.12);
}

.hs-muted { color: var(--hs-text-subtle); }

/* Detail panel */


/* Pills / status */
.hs-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--hs-radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--hs-bg-elev);
  border: 1px solid var(--hs-border);
}

.hs-pill.active {
  background: rgba(67, 229, 164, 0.2);
  color: var(--hs-ink);
  border-color: transparent;
}

.hs-pill.pending {
  background: rgba(245, 166, 35, 0.15);
  color: var(--hs-warning);
  border-color: transparent;
}

.hs-pill.blocked {
  background: rgba(229, 72, 77, 0.12);
  color: var(--hs-danger);
  border-color: transparent;
}

/* Chat thread */
.hs-chat {
  max-height: 420px;
  overflow-y: auto;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: var(--hs-space-3);
}

.hs-chat-msg { margin-bottom: var(--hs-space-3); max-width: 85%; }
.hs-chat-msg.inbound { margin-right: auto; }
.hs-chat-msg.outbound { margin-left: auto; text-align: right; }

.hs-chat-bubble {
  display: inline-block;
  padding: var(--hs-space-2) var(--hs-space-3);
  border-radius: var(--hs-radius-lg);
  font-size: 0.85rem;
  text-align: left;
}

.hs-chat-msg.inbound .hs-chat-bubble {
  background: var(--hs-bg-sunken);
  border: 1px solid var(--hs-border);
}

.hs-chat-msg.outbound .hs-chat-bubble {
  background: var(--hs-aqua);
  color: var(--hs-ink);
}

.hs-chat-time {
  font-size: 0.7rem;
  color: var(--hs-text-subtle);
  margin-top: var(--hs-space-1);
}

/* Progress */
.hs-progress {
  height: 8px;
  background: var(--hs-bg-sunken);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
  margin: var(--hs-space-2) 0 var(--hs-space-4);
}

.hs-progress > div {
  height: 100%;
  background: var(--hs-aqua);
  transition: width var(--hs-dur-slow) var(--hs-ease);
}


/* Services grid */


.hs-svc.locked {
  color: var(--ink-3, var(--hs-text-subtle));
  background: var(--panel-2, var(--hs-bg-sunken));
  border-color: var(--hair, var(--hs-border));
}


.hs-loading { color: var(--hs-text-muted); font-style: italic; }

.hs-shell-column {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hs-dev-card h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  margin: 0 0 var(--hs-space-3);
}

.hs-provider-tag { color: var(--hs-aqua); }

.hs-form-row {
  display: flex;
  gap: var(--hs-space-2);
  margin: var(--hs-space-4) 0;
  flex-wrap: wrap;
}

.hs-form-row .hs-input { flex: 1; min-width: 10rem; }

/* Aliases for JS-rendered markup */
.ok { color: var(--pass, var(--hs-success)); }
.err { color: var(--fail, var(--hs-danger)); }
.warn { color: var(--hs-warning); }
.muted { color: var(--hs-text-subtle); }
.mono { font-family: var(--hs-font-mono); font-size: 0.8rem; }
.loading { color: var(--hs-text-muted); font-style: italic; }
.pill { display: inline-block; padding: 2px 8px; border-radius: var(--hs-radius-sm); font-size: 0.72rem; font-weight: 600; background: var(--hs-bg-elev); border: 1px solid var(--hs-border); }
.pill.active { background: rgba(67, 229, 164, 0.2); color: var(--hs-ink); border-color: transparent; }
.pill.pending { background: rgba(245, 166, 35, 0.15); color: var(--hs-warning); border-color: transparent; }
.pill.blocked { background: rgba(229, 72, 77, 0.12); color: var(--hs-danger); border-color: transparent; }
.chat { max-height: 420px; overflow-y: auto; background: var(--hs-surface); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); padding: var(--hs-space-3); }
.chat-msg { margin-bottom: var(--hs-space-3); max-width: 85%; }
.chat-msg.inbound { margin-right: auto; }
.chat-msg.outbound { margin-left: auto; text-align: right; }
.chat-bubble { display: inline-block; padding: var(--hs-space-2) var(--hs-space-3); border-radius: var(--hs-radius-lg); font-size: 0.85rem; text-align: left; }
.chat-msg.inbound .chat-bubble { background: var(--hs-bg-sunken); border: 1px solid var(--hs-border); }
.chat-msg.outbound .chat-bubble { background: var(--hs-aqua); color: var(--hs-ink); }
.chat-time { font-size: 0.7rem; color: var(--hs-text-subtle); margin-top: var(--hs-space-1); }
.chat-msg.inbound .bubble { background: var(--hs-bg-sunken); border: 1px solid var(--hs-border); }
.chat-msg.outbound .bubble { background: var(--hs-aqua); color: var(--hs-ink); }
.usage-table { font-size: 0.8rem; width: 100%; border-collapse: collapse; }
.usage-table th, .usage-table td { padding: var(--hs-space-2); border-bottom: 1px solid var(--hs-border); text-align: left; }
.detail { background: var(--hs-bg-elev); border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg); padding: var(--hs-space-5); margin-top: var(--hs-space-4); }
.detail label { display: block; font-size: 0.875rem; font-weight: 500; margin-top: var(--hs-space-3); }
.detail input, .detail select { width: 100%; max-width: 360px; }
.card { background: var(--hs-surface); border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg); padding: var(--hs-space-5); margin-bottom: var(--hs-space-4); }
.tabs { display: flex; gap: var(--hs-space-2); flex-wrap: wrap; margin: var(--hs-space-4) 0; }
.tabs button { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); padding: var(--hs-space-2) var(--hs-space-3); font: inherit; font-size: 0.875rem; cursor: pointer; background: var(--hs-bg-elev); color: var(--hs-text); }
.tabs button.active { background: var(--hs-ink); color: var(--hs-text-inverse); border-color: var(--hs-ink); }
[data-theme="dark"] .tabs button.active, .dark .tabs button.active { background: var(--hs-aqua); color: var(--hs-ink); }
.panel { display: none; }
.panel.active { display: block; }
.stats { display: flex; gap: var(--hs-space-4); flex-wrap: wrap; margin: var(--hs-space-4) 0; }
.stat { background: var(--hs-bg-elev); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); padding: var(--hs-space-3) var(--hs-space-4); }
.stat strong { display: block; font-size: 1.25rem; }
.table-wrap { overflow-x: auto; }
table.hs-table, .hs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table th, table td, .hs-table th, .hs-table td { text-align: left; padding: var(--hs-space-2) var(--hs-space-3); border-bottom: 1px solid var(--hs-border); vertical-align: top; }
table th, .hs-table th { font-size: 0.75rem; text-transform: uppercase; color: var(--hs-text-muted); font-weight: 600; }
tr.data-row { cursor: pointer; }
tr.data-row:hover { background: var(--hs-bg-elev); }
tr.data-row.selected { background: rgba(67, 229, 164, 0.12); }
/* Bare <button> chrome.
   ------------------------------------------------------------------
   This block used to be four selectors carrying 95-103 chained :not()
   exclusions - up to 2,626 characters each - because a bare `button`
   rule was given accent fill, and every component built since has had
   to opt OUT of it, one class at a time.

   That inverted the system: aquamarine became the default, so it meant
   nothing, while the 111 buttons explicitly marked --primary rendered as
   white glass. A `Cancel` link rendered solid accent green.

   Emphasis is now opt-in. `:where()` keeps this at zero specificity so
   any class, anywhere, wins without needing to be listed here. Nothing
   ever has to be added to an exclusion list again. */
/* Every button starts from nothing. Zero specificity, so any component style
   anywhere wins without effort — but a button that nobody styled renders as
   invisible chrome rather than as a grey operating-system control. */
:where(button) {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

:where(button:not([class])) {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  min-height: var(--hs-size-control-md);
  padding: 0 var(--hs-space-4);
  border-radius: var(--hs-radius-pill);
  border: 1px solid var(--hs-glass-rim);
  cursor: pointer;
  background: var(--hs-glass-control);
  color: var(--hs-fg-primary);
  box-shadow: var(--hs-glass-lift);
}

:where(button:not([class]):hover:not(:disabled)) {
  filter: brightness(1.04);
}

/* Lander chat prompts — after global button resets */
button.hs-lander-prompt.hs-tilt-card-phone {
  background: linear-gradient(145deg, #e8fff5 0%, #c9f7e4 100%);
  border-color: var(--hs-border);
  color: var(--hs-text);
}

button.hs-lander-prompt.hs-tilt-card-leads {
  background: linear-gradient(145deg, #eef4ff 0%, #d6e4ff 100%);
  border-color: var(--hs-border);
  color: var(--hs-text);
}

button.hs-lander-prompt.hs-tilt-card-schedule {
  background: linear-gradient(145deg, #fff8e8 0%, #ffe9b8 100%);
  border-color: var(--hs-border);
  color: var(--hs-text);
}

button.hs-lander-prompt.hs-tilt-card-email {
  background: linear-gradient(145deg, #f5efff 0%, #e4d4ff 100%);
  border-color: var(--hs-border);
  color: var(--hs-text);
}

.detail-header { display: flex; flex-wrap: wrap; gap: var(--hs-space-3); align-items: flex-start; justify-content: space-between; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--hs-space-2) var(--hs-space-4); font-size: 0.85rem; margin: var(--hs-space-3) 0; }
.meta-grid dt { color: var(--hs-text-muted); font-size: 0.72rem; text-transform: uppercase; margin: 0; }
.meta-grid dd { margin: var(--hs-space-1) 0 0; }
.edit-block { margin-top: var(--hs-space-4); padding-top: var(--hs-space-4); border-top: 1px solid var(--hs-border); }
.filters { display: flex; gap: var(--hs-space-3); flex-wrap: wrap; margin-bottom: var(--hs-space-3); align-items: center; }
.filters label { display: flex; align-items: center; gap: var(--hs-space-2); font-size: 0.875rem; margin: 0; }
.check { list-style: none; padding: 0; margin: 0; }
.check li { padding: var(--hs-space-1) 0; font-size: 0.9rem; color: var(--hs-text-muted); }
.check li.done { color: var(--pass, var(--hs-success)); }
.check li.done::before { content: "✓ "; }
.check li:not(.done)::before { content: "○ "; color: var(--hs-text-subtle); }
.progress { height: 8px; background: var(--hs-bg-sunken); border-radius: var(--hs-radius-sm); overflow: hidden; margin: var(--hs-space-2) 0 var(--hs-space-4); }
.progress > div { height: 100%; background: var(--hs-aqua); transition: width var(--hs-dur-slow) var(--hs-ease); }
.svc-grid { display: grid; gap: var(--hs-space-3); }
.svc { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); padding: var(--hs-space-4); background: var(--hs-surface); }
.svc.locked {
  color: var(--ink-3, var(--hs-text-subtle));
  background: var(--panel-2, var(--hs-bg-sunken));
  border-color: var(--hair, var(--hs-border));
}
.svc h3 { margin: 0 0 var(--hs-space-2); font-size: 0.95rem; }
.svc p { margin: 0 0 var(--hs-space-2); font-size: 0.82rem; color: var(--hs-text-muted); }
.demo-out { background: var(--hs-bg-sunken); border: 1px solid var(--hs-border); border-radius: var(--hs-radius-sm); padding: var(--hs-space-3); font-size: 0.82rem; margin-top: var(--hs-space-3); white-space: pre-wrap; }
.customer-row { border-top: 1px solid var(--hs-border); padding: var(--hs-space-3) 0; }
.hint { font-size: 0.85rem; color: var(--hs-text-muted); margin: var(--hs-space-1) 0 0; }
.provider-tag { color: var(--hs-aqua); }
.sender { font-family: var(--hs-font-mono); word-break: break-all; }
.warn-line { color: var(--hs-warning); }
.login { max-width: 360px; }
.num { font-family: var(--hs-font-mono); font-size: 1.1rem; font-weight: 700; margin: var(--hs-space-4) 0; }
.card h2 { font-size: 0.75rem; text-transform: uppercase; color: var(--hs-text-muted); margin: 0 0 var(--hs-space-3); }
.detail h3 { margin: 0 0 var(--hs-space-2); }
.detail h4 { margin: var(--hs-space-5) 0 var(--hs-space-3); font-size: 0.75rem; text-transform: uppercase; color: var(--hs-text-muted); }
.hs-phone-row input,
.hs-phone-row .hs-input {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: auto;
}
label { display: block; font-size: 0.875rem; font-weight: 500; margin: var(--hs-space-3) 0 var(--hs-space-2); }
/* Bare field chrome. Same inversion as the button block above: styled only
   when a field carries no class of its own, at zero specificity, so no
   component ever needs adding to an exclusion list. */
:where(textarea:not([class])),
:where(select:not([class])),
:where(input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="color"])) {
  width: 100%;
  min-height: var(--hs-size-control-md);
  padding: var(--hs-space-2) var(--hs-space-3);
  border: 1px solid var(--hs-border-control);
  border-radius: var(--hs-radius-sm);
  font: inherit;
  box-sizing: border-box;
  background: var(--hs-glass-control);
  color: var(--hs-fg-primary);
}
textarea { min-height: 6rem; resize: vertical; }

.hs-workspace-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--hs-space-2);
  overflow-x: auto;
  padding-bottom: var(--hs-space-2);
  border-bottom: 1px solid var(--hs-border);
}

@media (min-width: 900px) {
  .hs-workspace-nav {
    flex-direction: column;
    overflow-x: visible;
    border-bottom: none;
    padding-bottom: 0;
    position: sticky;
    top: var(--hs-space-4);
  }
}

.hs-workspace-nav a {
  display: block;
  padding: var(--hs-space-2) var(--hs-space-3);
  border-radius: var(--hs-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hs-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hs-workspace-nav a:hover {
  color: var(--hs-text);
  background: var(--hs-bg-sunken);
}

.hs-workspace-nav a.active {
  color: var(--hs-text);
  background: var(--hs-surface);
  border-color: var(--hs-border);
  font-weight: 600;
}

.hs-workspace-nav-label {
  margin: var(--hs-space-4) 0 var(--hs-space-2);
  padding: 0 var(--hs-space-3);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

.hs-workspace-nav-agent {
  padding-left: var(--hs-space-4);
  font-size: 0.8125rem;
}

.hs-workspace-header h1 {
  margin: 0 0 var(--hs-space-1);
  font-size: 1.35rem;
}


.hs-stat-widgets {
  display: grid;
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-4);
}

@media (min-width: 700px) {
  .hs-stat-widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hs-stat-card {
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-4);
  background: var(--hs-surface);
}

.hs-stat-card-muted {
  opacity: 0.92;
  background: var(--hs-bg-elev);
}

.hs-stat-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-2);
  margin-bottom: var(--hs-space-3);
}

.hs-stat-card h3 {
  margin: 0;
  font-size: 0.95rem;
}

.hs-widget-sample {
  border-style: solid;
  border-color: var(--hs-border-strong);
}

.hs-widget-sample-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  background: var(--hs-bg-sunken);
  padding: 0.15rem 0.45rem;
  border-radius: var(--hs-radius-sm);
}

.hs-widget-dismiss {
  border: none;
  background: transparent;
  color: var(--hs-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  margin: -0.25rem 0 0;
}

.hs-widget-dismiss:hover {
  color: var(--hs-text);
}

.hs-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hs-space-3);
  margin-bottom: var(--hs-space-3);
}

.hs-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hs-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hs-stat-label {
  font-size: 0.72rem;
  color: var(--hs-text-muted);
  text-transform: capitalize;
}

.hs-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.hs-data-table th,
.hs-data-table td {
  text-align: left;
  padding: var(--hs-space-2) var(--hs-space-2);
  border-bottom: 1px solid var(--hs-border);
}

.hs-data-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

.hs-widget-empty {
  margin: 0;
}


.hs-chat-snippet {
  max-height: 320px;
  overflow-y: auto;
}

.hs-billing-preview {
  position: relative;
}

.hs-billing-preview .hs-widget-sample-badge {
  position: absolute;
  top: var(--hs-space-3);
  right: var(--hs-space-3);
}

.hs-admin-view-tabs {
  margin-bottom: var(--hs-space-4);
}

.hs-admin-view-panel {
  display: none;
}

.hs-admin-view-panel.active {
  display: block;
}

.hs-onboard-input {
  max-width: 360px;
  margin: 0 auto var(--hs-space-4);
  font-size: 1rem;
}


.hs-module-checklist {
  margin-bottom: var(--hs-space-4);
  text-align: left;
}

.hs-module-checklist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hs-space-3);
  margin-bottom: var(--hs-space-3);
}

.hs-module-checkpoint-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hs-space-2);
}

.hs-module-checkpoint {
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-3);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
}

.hs-module-checkpoint.is-done {
  opacity: 0.72;
}

.hs-module-checkpoint.is-pending {
  border-color: var(--hs-accent, #0d9488);
}

.hs-module-checkpoint__mark {
  flex: 0 0 1.5rem;
  font-weight: 600;
  text-align: center;
}

.hs-module-checkpoint__body {
  display: grid;
  gap: 0.15rem;
}

.hs-module-checkpoint__label {
  font-weight: 500;
}

/* Sample widget connect overlay */
.hs-widget-body-wrap {
  position: relative;
}

.hs-widget-blurred-wrap .hs-widget-body {
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.hs-widget-connect-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-3);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(4px);
  border-radius: var(--hs-radius);
}

[data-theme="dark"] .hs-widget-connect-overlay,
.dark .hs-widget-connect-overlay {
  background: rgba(20, 24, 28, 0.75);
}

.hs-voice-test-page,
.hs-voice-embed {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.hs-voice-call-mount {
  margin-top: var(--hs-space-4);
}

.hs-voice-embed-actions {
  display: flex;
  gap: var(--hs-space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.hs-voice-orb {
  width: 120px;
  height: 120px;
  border-radius: var(--hs-radius-full);
  margin: var(--hs-space-5) auto;
  background: var(--hs-aqua);
  opacity: 0.35;
  transition: opacity 0.3s, transform 0.3s;
}

.hs-voice-orb.live {
  opacity: 1;
  animation: hs-voice-pulse 1.5s ease-in-out infinite;
}

.hs-voice-orb.listening {
  opacity: 0.85;
  background: var(--hs-mint, #6ee7b7);
  animation: none;
  transform: scale(1.02);
}

.hs-voice-orb.processing {
  opacity: 0.7;
  animation: hs-voice-pulse 0.8s ease-in-out infinite;
}

.hs-voice-picker {
  margin-top: var(--hs-space-4);
  text-align: left;
}

.hs-voice-picker__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--hs-space-2);
  color: var(--hs-neutral-700);
}

.hs-voice-picker__grid {
  display: grid;
  /* Radio dial adds 44px start padding; keep room for the Recommended pill. */
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 8px;
  max-width: none;
}

.hs-voice-option {
  appearance: none;
  border: 1px solid var(--hs-neutral-250, #d8ddd4);
  background: #fff !important;
  border-radius: 8px;
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111 !important;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.hs-voice-option.is-recommended {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name play'
    'rec rec';
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  overflow: visible;
}

.hs-voice-option__name {
  grid-area: name;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.hs-voice-option__rec {
  grid-area: rec;
  display: inline-block;
  justify-self: start;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(47, 158, 106, 0.12);
  color: #14663c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
}

.hs-voice-option__play {
  grid-area: play;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--hs-neutral-250, #d8ddd4);
  background: #f7f8f5;
  color: #111;
  opacity: 1;
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}

.hs-voice-option:hover .hs-voice-option__play,
.hs-voice-option.is-playing .hs-voice-option__play {
  opacity: 1;
}

.hs-voice-option.is-playing .hs-voice-option__play {
  background: #111;
  color: #fff;
}

.hs-voice-option.is-loading .hs-voice-option__play {
  opacity: 0.35;
}

.hs-call-transfer-field--hold-music {
  grid-column: 1 / -1;
}

.hs-hold-music-picker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.hs-hold-music-picker .hs-hold-music-select {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
}

.hs-hold-music-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.hs-hold-music-preview.is-playing {
  background: var(--hs-neutral-800, #1a2e24);
  color: #fff;
  border-color: transparent;
}

.hs-hold-music-preview.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.hs-voice-option:hover {
  border-color: var(--hs-neutral-400, #aeb5ab);
  background: #fff !important;
  color: #111 !important;
}

.hs-voice-option.is-selected {
  border-color: #111;
  background: #fff !important;
  color: #111 !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #111;
}

.hs-voice-picker label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: var(--hs-space-1);
}

.hs-admin-voice-actions {
  display: flex;
  gap: var(--hs-space-2);
  flex-wrap: wrap;
  margin-top: var(--hs-space-2);
}

@keyframes hs-voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.hs-voice-transcript {
  text-align: left;
  max-height: 240px;
  overflow-y: auto;
  margin-top: var(--hs-space-4);
  font-size: 0.875rem;
}

.hs-admin-voice-prompt {
  width: 100%;
  min-height: 12rem;
  font-family: var(--hs-font-mono);
  font-size: 0.75rem;
}

/* Lander uses shell column width (chat layout) */
.hs-page-lander {
  max-width: 420px;
}

.hs-tilt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hs-space-3);
  width: 100%;
}

.hs-tilt-grid-lander {
  margin: var(--hs-space-4) 0 var(--hs-space-5);
}

@media (max-width: 520px) {
  .hs-tilt-grid { grid-template-columns: 1fr; }
  .hs-tilt-card-span { grid-column: auto; }
}

.hs-tilt-card-span {
  grid-column: 1 / -1;
}

.hs-tilt-card {
  perspective: 900px;
  min-height: 9rem;
}

.hs-tilt-card-clickable {
  cursor: pointer;
}

.hs-tilt-card-inner {
  height: 100%;
  padding: var(--hs-space-4);
  border-radius: var(--hs-radius-xl);
  border: 1px solid var(--hs-border);
  box-shadow: var(--hs-shadow-lg);
  text-align: left;
  transition: transform 0.35s var(--hs-ease-out), box-shadow 0.35s var(--hs-ease-out);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}

.hs-tilt-card:hover .hs-tilt-card-inner {
  box-shadow: var(--hs-shadow-aqua);
}

.hs-tilt-card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 55%);
  pointer-events: none;
}

.hs-tilt-card-phone {
  background: linear-gradient(145deg, #e8fff5 0%, #c9f7e4 100%);
}

.hs-tilt-card-leads {
  background: linear-gradient(145deg, #eef4ff 0%, #d6e4ff 100%);
}

.hs-tilt-card-schedule {
  background: linear-gradient(145deg, #fff8e8 0%, #ffe9b8 100%);
}

.hs-tilt-card-email {
  background: linear-gradient(145deg, #f5efff 0%, #e4d4ff 100%);
}

.hs-tilt-card-start {
  background: linear-gradient(145deg, #ffffff 0%, #e8fff5 55%, #c9f7e4 100%);
  text-align: center;
}

.hs-tilt-card-hero {
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf8 100%);
}

.hs-tilt-card-business {
  background: linear-gradient(145deg, #f7f8f8 0%, #eef4ff 100%);
}

.hs-tilt-card-onboard {
  background: linear-gradient(145deg, #ffffff 0%, #fff8e8 100%);
}

.hs-tilt-card-widget {
  background: linear-gradient(145deg, var(--hs-surface) 0%, var(--hs-bg-elev) 100%);
}

.hs-tilt-card-muted {
  opacity: 0.92;
}

.hs-tilt-card-inner.hs-widget-sample-inner {
  border-style: solid;
  border-color: var(--hs-border-strong);
}

.dark .hs-tilt-card-phone { background: linear-gradient(145deg, #0f2a22 0%, #143528 100%); }
.dark .hs-tilt-card-leads { background: linear-gradient(145deg, #121f33 0%, #172840 100%); }
.dark .hs-tilt-card-schedule { background: linear-gradient(145deg, #2a2410 0%, #332c14 100%); }
.dark .hs-tilt-card-email { background: linear-gradient(145deg, #221830 0%, #2a1f3d 100%); }
.dark .hs-tilt-card-start { background: linear-gradient(145deg, #1a1b1d 0%, #0f2a22 100%); }
.dark .hs-tilt-card-hero { background: linear-gradient(145deg, #1a1b1d 0%, #141516 100%); }
.dark .hs-tilt-card-business { background: linear-gradient(145deg, #141516 0%, #121f33 100%); }
.dark .hs-tilt-card-onboard { background: linear-gradient(145deg, #1a1b1d 0%, #2a2410 100%); }

.hs-tilt-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--hs-radius);
  background: rgba(255,255,255,0.55);
  font-size: 1.1rem;
  margin-bottom: var(--hs-space-2);
}

.hs-tilt-card-inner h3 {
  margin: 0 0 var(--hs-space-2);
  font-size: 1rem;
}

.hs-tilt-card-inner p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--hs-text-muted);
  line-height: 1.45;
}

.hs-tilt-card-start .hs-lander-cta-btn {
  width: 100%;
  margin-top: var(--hs-space-3);
}

.hs-tilt-cta-qr {
  margin-top: var(--hs-space-3);
}

.hs-tilt-cta-qr .hs-joined-qr {
  margin-bottom: var(--hs-space-2);
}

@media (min-width: 900px) {

  .hs-workspace-nav {
    min-height: calc(100vh - 6rem);
  }
}


/* Business summary + full profile */
.hs-link {
  font-weight: 600;
  color: var(--hs-text);
  text-decoration: none;
  border-bottom: 1px solid var(--hs-aqua);
}

.hs-link:hover { color: var(--hs-aqua-hover); }

/* An aqua underline is a link affordance. On a BUTTON that also carries
   .hs-btn-sm it lands underneath button chrome — white fill, border, radius,
   padding — and the stray green rule under the label reads as a rendering
   error rather than as a link. Overview's "Cancel" was the clearest case.
   These are the QUIET tier of the ladder: no fill, no border, no underline. */
button.hs-link.hs-btn-sm,
a.hs-link.hs-btn-sm {
  border-bottom: none;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2, #5c6b63);
  border-radius: var(--r-sm, 8px);
}

button.hs-link.hs-btn-sm:hover,
a.hs-link.hs-btn-sm:hover {
  background: var(--hs-glass-control-ghost, rgba(15, 42, 32, 0.05));
  color: var(--ink, #0f2a20);
}

button.hs-link.hs-btn-sm.hs-link--danger { color: var(--fail, #d9534f); }

button.hs-link.hs-btn-sm.hs-link--danger:hover {
  background: var(--fail-tint, #fbe9e8);
  color: var(--fail, #d9534f);
}

/* Without .hs-btn-sm it is genuinely inline in a sentence ("Canada only",
   "Change country"). Keep the geometry, drop the accent: an underline that
   matches the text reads as a link; one in a different hue reads as a bug. */
button.hs-link:not(.hs-btn-sm) {
  border-bottom-color: currentColor;
  background: none;
  padding: 0;
}

.hs-business-summary-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--hs-space-2);
  padding: var(--hs-space-2) 0;
  border-bottom: 1px solid var(--hs-border);
  font-size: 0.875rem;
}

.hs-business-summary-row:last-of-type { border-bottom: none; }

.hs-business-summary-label {
  color: var(--hs-text-muted);
  font-weight: 500;
}

.hs-business-summary-value { color: var(--hs-text); }

.hs-business-group {
  margin-top: var(--hs-space-4);
  padding-top: var(--hs-space-3);
  border-top: 1px solid var(--hs-border);
}

.hs-business-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.hs-business-group h4 {
  margin: 0 0 var(--hs-space-3);
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

/* Email agent rules (legacy advanced UI kept dormant) */
.hs-email-rules-panel { margin-top: var(--hs-space-4); }

.hs-email-rule {
  margin-top: var(--hs-space-3);
  padding: var(--hs-space-3);
}

.hs-email-rule-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hs-space-2);
}

.hs-email-rule-flags {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  margin-top: var(--hs-space-3);
}

.hs-email-rule-flag {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  font-size: 0.875rem;
  cursor: pointer;
}

/* Expandable email rule cards by kind */
.hs-email-rule-card {
  margin-top: var(--hs-space-2);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  background: var(--hs-bg-elev);
  overflow: hidden;
}

.hs-email-rule-card--guidance {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, var(--hs-bg-elev) 12%);
}

.hs-email-rule-card--auto_reply {
  border-left: 4px solid #8b5cf6;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.07) 0%, var(--hs-bg-elev) 12%);
}

.hs-email-rule-card--auto_archive {
  border-left: 4px solid #64748b;
  background: linear-gradient(90deg, rgba(100, 116, 139, 0.08) 0%, var(--hs-bg-elev) 12%);
}

.hs-email-rule-card--notify {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, var(--hs-bg-elev) 12%);
}

.hs-email-rule-card[open] .hs-email-rule-card__chevron {
  transform: rotate(90deg);
}

.hs-email-rule-card__summary {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  padding: var(--hs-space-3);
  cursor: pointer;
  list-style: none;
}

.hs-email-rule-card__summary::-webkit-details-marker {
  display: none;
}

.hs-email-rule-card__chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--hs-text-muted);
  transition: transform var(--hs-dur);
}

.hs-email-rule-card__badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--hs-radius-sm);
}

.hs-email-rule-card--guidance .hs-email-rule-card__badge {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

.hs-email-rule-card--auto_reply .hs-email-rule-card__badge {
  background: rgba(139, 92, 246, 0.15);
  color: #6d28d9;
}

.hs-email-rule-card--auto_archive .hs-email-rule-card__badge {
  background: rgba(100, 116, 139, 0.15);
  color: #475569;
}

.hs-email-rule-card--notify .hs-email-rule-card__badge {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.hs-email-rule-card__title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

.hs-email-rule-card__title .sub {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-email-rule-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--hs-text-muted);
}

.hs-email-rule-toggle input {
  width: 2.25rem;
  height: 1.2rem;
  accent-color: var(--hs-aqua);
  cursor: pointer;
}

.hs-email-rule-card__body {
  padding: 0 var(--hs-space-3) var(--hs-space-3);
  border-top: 1px solid var(--hs-border);
}

.hs-email-rule-card.is-enabled {
  border-left-color: #22c55e;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, var(--hs-bg-elev) 14%);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.hs-email-rule-card.is-enabled .hs-email-rule-card__badge {
  background: rgba(34, 197, 94, 0.22);
  color: #15803d;
}

.hs-email-rule-card.is-disabled {
  opacity: 0.85;
}

.hs-email-rule-card--setup {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: var(--hs-aqua);
}

.hs-email-rule-card--setup .hs-email-rule-card__badge {
  background: rgba(67, 229, 164, 0.2);
  color: #0d9488;
}

.hs-email-rule-card--suggested.is-enabled,
.hs-email-rule-card--suggested.hs-email-rule-card--setup {
  border-left-color: #22c55e;
}

.hs-email-rules-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  margin-top: var(--hs-space-2);
}

.hs-email-rules-active {
  margin-top: var(--hs-space-2);
}

.hs-email-rules-add {
  display: none;
  margin-top: var(--hs-space-2);
  padding-top: var(--hs-space-2);
  border-top: 1px solid var(--hs-border);
}

.hs-email-rules-add.is-open {
  display: block;
}

.hs-email-rules-empty {
  padding: var(--hs-space-2) 0;
}

.hs-email-inbox-insights {
  padding: var(--hs-space-3);
  margin-bottom: var(--hs-space-3);
  border-radius: var(--hs-radius-lg);
  border: 1px solid var(--hs-border);
  background: rgba(67, 229, 164, 0.08);
}

.hs-email-suggest-card {
  border-left: 4px solid var(--hs-aqua);
}

.hs-email-suggest-card--high {
  border-left-color: #22c55e;
}

.hs-email-rule-setup-panel {
  margin-top: var(--hs-space-3);
  padding: var(--hs-space-3);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  border-left: 4px solid var(--hs-aqua);
  background: var(--hs-bg-elev);
}

.hs-email-rule-setup-panel summary {
  cursor: pointer;
  font-weight: 600;
}

.hs-email-monitor-suggest summary {
  cursor: pointer;
  font-weight: 600;
}

/* ============================================================
   Portal workspace (user dashboard)
   ============================================================ */
html:has(body.hs-portal-body) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(body.hs-portal-body),
body.hs-portal-body {
  /* Match portal canvas so rubber-band / overscroll never flashes grey */
  background: #fff;
}

body.hs-portal-body {
  font-family: var(--font, var(--hs-font));
  color: var(--ink, var(--hs-neutral-800));
  /* Override .hs-page padding so the shell can lock to the viewport */
  padding: 0;
  margin: 0;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.hs-portal-body #root {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.hs-portal-body.hs-admin-mode #root {
  height: calc(100% - 36px);
}

.hs-admin-mode-banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--hs-everglade-900, #0e1b11);
  color: #f9faf2;
  font-family: var(--font, var(--hs-font-ui, Inter, system-ui, sans-serif));
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  z-index: 10000;
}

.hs-admin-mode-banner[hidden] {
  display: none !important;
}

.hs-admin-mode-banner__label {
  grid-column: 2;
  justify-self: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hs-aqua, #43e5a4);
}

.hs-admin-mode-banner__back,
:is(.surface-user, .surface-admin) a.hs-admin-mode-banner__back {
  grid-column: 1;
  justify-self: start;
  color: #f9faf2;
  text-decoration: none;
  border-bottom: none;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
}

.hs-admin-mode-banner__back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--hs-aqua, #43e5a4);
}

body.hs-portal-body > .hs-status {
  display: none;
}

.hs-portal-page {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.ws-mobile-topbar {
  display: none;
}

.hs-portal-top {
  display: none;
}

.hs-portal-topin {
  height: 100%;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 900px) {
  .hs-portal-topin {
    padding: 0 40px;
  }
}

/* Layout, size and gap come from ds/hs-brand.css off the --hs-lockup-* tokens.
   The 14px gap that used to live here was tuned to a 36px mark; the token gap
   is 0.4em, so it scales with whatever step the rail is on. */
.hs-portal-brand,
:is(.surface-user, .surface-admin) a.hs-portal-brand {
  text-decoration: none;
  border-bottom: none;
  color: inherit;
  flex-shrink: 0;
}

.hs-portal-brand:hover,
:is(.surface-user, .surface-admin) a.hs-portal-brand:hover {
  opacity: 1;
}

.hs-portal-nav__scroll {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.hs-portal-nav-collapse,
.hs-portal-nav-foot {
  display: none !important;
}

.hs-portal-nav-brand {
  flex-shrink: 0;
  padding: 4px 8px 22px;
}

.hs-portal-sidefoot {
  margin-top: auto;
  flex-shrink: 0;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--hair, var(--hs-neutral-200));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hs-portal-sidefoot__switch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 6px + 1px border == the profile trigger's 7px, so both icon columns start
     at the same x and their labels share one left edge. */
  padding: 9px 6px;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 12px;
  background: var(--panel-2, var(--hs-bg-sunken));
  color: var(--ink-2, var(--hs-neutral-700));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.hs-portal-sidefoot__switch .hs-portal-nav-ic {
  display: grid;
  place-items: center;
  /* Matches the 34px avatar column below it — centers the glyph on the avatar.
     flex-basis too: the base .hs-portal-nav-ic sets `flex: 0 0 24px`, which
     decides the used width in this flex row no matter what `width` says. */
  flex: 0 0 34px;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.hs-portal-sidefoot__switch .hs-portal-nav-ic svg {
  width: 16px;
  height: 16px;
  display: block;
}

.hs-portal-sidefoot__switch:hover {
  background: var(--accent-tint, var(--hs-everglade-100));
  border-color: color-mix(in srgb, var(--accent-2, var(--hs-everglade-600)) 35%, var(--hair, var(--hs-neutral-200)));
  color: var(--accent-2, var(--hs-everglade-600));
}

.hs-portal-profile {
  position: relative;
}

.hs-portal-profile__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hs-portal-profile__trigger:hover,
.hs-portal-profile__trigger[aria-expanded="true"] {
  background: var(--panel-2, var(--hs-bg-sunken));
}

.hs-portal-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--hs-neutral-150, #eef3f0);
  color: var(--accent-2, var(--hs-everglade-600));
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--hair, var(--hs-neutral-200));
}

.hs-portal-avatar--img {
  object-fit: cover;
  display: block;
  padding: 0;
  background: var(--panel, #fff);
}

.hs-portal-sidefoot__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.hs-portal-sidefoot__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, var(--hs-neutral-900));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-portal-sidefoot__role {
  display: block;
  font-size: 11px;
  color: var(--ink-3, var(--hs-neutral-500));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-portal-sidefoot__version,
.hs-portal-footer-nav__version {
  margin: 2px 6px 0;
  padding: 0;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3, var(--hs-neutral-500));
  opacity: 0.85;
  user-select: text;
}

.hs-portal-footer-nav__version {
  margin: 8px 12px 4px;
  text-align: center;
}

.hs-portal-profile__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  background: #fff;
  box-shadow: var(--shadow, var(--hs-shadow-card));
}

.hs-portal-profile__menu[hidden] {
  display: none !important;
}

.hs-portal-profile__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink, var(--hs-neutral-800));
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.hs-portal-profile__menu-item .hs-portal-nav-ic {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.hs-portal-profile__menu-item .hs-portal-nav-ic svg {
  width: 16px;
  height: 16px;
  display: block;
}

.hs-portal-profile__menu-item:hover {
  background: var(--accent-tint, var(--hs-everglade-100));
  color: var(--accent-2, var(--hs-everglade-600));
}

.hs-portal-profile__menu-item--danger,
.hs-portal-profile__menu-item--danger .hs-portal-nav-ic {
  color: #b42318;
}

.hs-portal-profile__menu-item--danger:hover {
  background: color-mix(in srgb, #b42318 10%, #fff);
  color: #b42318;
}

.hs-portal-profile__menu-item--danger:hover .hs-portal-nav-ic {
  color: #b42318;
}

@media (min-width: 900px) {
  .hs-portal-nav-rail {
    flex: 0 0 244px;
    width: 244px;
    min-width: 0;
    /* Sibling of the scrolling main pane — stay put while content bounces. */
    position: relative;
    top: auto;
    align-self: stretch;
    height: 100%;
    max-height: 100%;
    background: rgba(255, 255, 255, 0.92);
    /* Match admin: clear vertical rule between rail and page content */
    border-right: 1px solid var(--hair-2, #D7DDD3);
    border-radius: 0;
    padding: 22px 16px;
    box-shadow: none;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    display: flex;
    backdrop-filter: blur(10px);
    z-index: 5;
  }

  .hs-portal-nav-biz {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 10px;
    font-family: var(--font, var(--hs-font));
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-3, var(--hs-neutral-500));
    flex-shrink: 0;
    min-width: 0;
  }

  .hs-portal-nav-biz__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Sizing lives in ds/hs-brand.css, off the --hs-lockup-* tokens. 36/18 here
   was a 2.0 mark-to-wordmark ratio against the design system's 1.5. */

.hs-portal-biz {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-family: var(--font, var(--hs-font));
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3, var(--hs-neutral-500));
}

@media (min-width: 900px) {
  .hs-portal-nav-biz {
    display: none;
  }
}

.hs-portal-shell {
  flex: 1 1 auto;
  margin: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hs-portal-page,
  .hs-portal-shell {
    /* White page; rail border-right is the divider (not a grey canvas). */
    background: #fff;
  }

  .hs-portal-shell {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .hs-portal-nav {
    flex-direction: column;
    overflow: hidden;
    position: relative;
    top: auto;
    padding-bottom: 0;
    min-height: 0;
    display: flex;
    align-self: stretch;
    height: 100%;
  }

  .hs-portal-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* Bounce inside the page pane only — nav + Julia stay fixed. */
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    /* White content pane — frosted title fades assume a white page. */
    background: #fff;
    padding: 30px clamp(28px, 3vw, 48px) 56px;
  }

  .hs-portal-nav-rail {
    position: relative;
    top: auto;
    align-self: stretch;
    z-index: 5;
  }

  .ws-julia-dock,
  .julia-chat-dock {
    position: fixed;
  }
}

/* iPad / touch tablets (incl. landscape): keep the viewport chrome locked.
   Only .hs-portal-main scrolls (with native bounce). Sidebar + Julia stay fixed. */
@media (min-width: 900px) and (hover: none) and (pointer: coarse) {
  html:has(body.hs-portal-body) {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #fff;
  }

  body.hs-portal-body {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    background: #fff;
  }

  body.hs-portal-body #root {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }

  .hs-portal-page {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }

  .hs-portal-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    background: transparent;
  }

  .hs-portal-nav,
  .hs-portal-nav-rail {
    position: relative;
    top: auto;
    height: 100%;
    max-height: none;
    align-self: stretch;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 5;
  }

  .hs-portal-main {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    background: #fff;
  }

  .ws-julia-dock,
  .julia-chat-dock {
    position: fixed;
  }
}

.hs-portal-nav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  padding-bottom: 0;
  min-height: 0;
  height: 100%;
}

@media (min-width: 900px) {
  .hs-portal-nav {
    flex-direction: column;
    overflow: hidden;
    position: relative;
    top: auto;
    padding-bottom: 0;
    min-height: 0;
    display: flex;
    align-self: stretch;
    height: 100%;
  }

  .hs-portal-nav__scroll {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
  }
}

.hs-portal-seg {
  display: flex;
  flex-direction: row;
  gap: 4px;
  background: var(--panel, #fff);
  border: 1px solid var(--hair, #E7EDEA);
  border-radius: var(--r-md, 13px);
  padding: 4px;
  margin-bottom: 6px;
}

@media (min-width: 900px) {
  .hs-portal-seg {
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    gap: 2px;
    margin-bottom: 0;
  }
}

.hs-portal-seg a {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 13px;
  cursor: pointer;
  color: var(--hs-neutral-700);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font, var(--hs-font));
}

.hs-portal-nav-ic {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.hs-portal-nav-ic {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.hs-portal-nav-ic svg {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

.hs-portal-seg a.active .hs-portal-nav-ic svg {
  opacity: 1;
  color: var(--hs-everglade-600);
}

@media (min-width: 900px) {
  .hs-portal-seg a {
    text-align: left;
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 14px;
    gap: 11px;
    border-radius: var(--r-pill, 999px);
    color: var(--ink-2, var(--hs-neutral-700));
  }

  .hs-portal-seg a .hs-portal-nav-ic {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }

  .hs-portal-seg a .hs-portal-nav-ic svg {
    width: 16px;
    height: 16px;
    opacity: 0.85;
  }

  .hs-portal-seg a.active .hs-portal-nav-ic svg {
    opacity: 1;
    color: var(--hs-aqua-deep, #27AE60);
  }

  .hs-portal-seg a > span:not(.hs-portal-nav-ic):not(.hs-portal-nav-status) {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.18s;
  }

  .hs-portal-seg a > .hs-portal-nav-status {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .hs-portal-seg a > .hs-portal-nav-status.hs-portal-footer-nav__tag--admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--hs-everglade-900, #0e1b11);
    color: #ffffff;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a {
    justify-content: center;
    padding: 10px 0;
    color: var(--ink-2, var(--hs-neutral-700, #3D4A55));
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a .hs-portal-nav-ic {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--panel-2, var(--hs-neutral-150, #F0F1F1));
    color: var(--ink-2, var(--hs-neutral-700, #3D4A55));
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a .hs-portal-nav-ic svg {
    opacity: 1;
    color: inherit;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a.active .hs-portal-nav-ic {
    background: var(--accent-tint, var(--hs-everglade-100, #F0FFF3));
    color: var(--accent-2, var(--hs-everglade-600, #056C42));
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a.active {
    background: transparent;
    box-shadow: none;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a > span:not(.hs-portal-nav-ic):not(.hs-portal-nav-status),
  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a > .hs-portal-nav-status {
    opacity: 0;
    width: 0;
    flex: 0 0 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-label {
    justify-content: center;
    padding: 8px 0;
    color: var(--ink-3, var(--hs-neutral-500, #6B7280));
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-navlabel {
    display: none;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-label .hs-portal-nav-ic {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--panel-2, var(--hs-neutral-150, #F0F1F1));
    color: var(--ink-3, var(--hs-neutral-500, #6B7280));
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-label .hs-portal-nav-ic svg {
    opacity: 1;
    color: inherit;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-label > span:not(.hs-portal-nav-ic) {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
  }

}

.hs-portal-seg a:hover {
  color: var(--accent-2, var(--hs-everglade-600));
  background: var(--accent-tint, var(--hs-everglade-100));
}

.hs-portal-seg a.active {
  background: linear-gradient(135deg, rgba(67, 229, 164, 0.28), rgba(163, 71, 234, 0.12));
  color: var(--accent-2, var(--hs-everglade-600));
  font-weight: 600;
  border-radius: var(--r-pill, 999px);
  box-shadow: inset 0 0 0 1px rgba(67, 229, 164, 0.35);
}

@media (min-width: 900px) {
  .hs-portal-seg a:hover {
    background: var(--accent-tint, var(--hs-everglade-100));
    color: var(--accent-2, var(--hs-everglade-600));
  }

  .hs-portal-seg a.active {
    background: linear-gradient(135deg, rgba(67, 229, 164, 0.28), rgba(163, 71, 234, 0.12));
    color: var(--accent-2, var(--hs-everglade-600));
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(67, 229, 164, 0.35);
  }

  .hs-portal-seg a.active:hover {
    background: linear-gradient(135deg, rgba(67, 229, 164, 0.34), rgba(163, 71, 234, 0.16));
  }
}

/* Collapsed sidebar hover tooltips */
@media (min-width: 900px) {
  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a[data-tip],
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-collapse[data-tip],
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-biz[data-tip] {
    position: relative;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a[data-tip]::after,
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-collapse[data-tip]::after,
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-biz[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    transform-origin: left center;
    background: var(--hs-neutral-800);
    color: var(--hs-bg);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s, transform 0.14s;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(8, 15, 52, 0.16);
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-seg a[data-tip]:hover::after,
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-collapse[data-tip]:hover::after,
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-biz[data-tip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.hs-portal-navlabel {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3, var(--hs-neutral-500));
  padding: 14px 10px 6px;
  line-height: 1.2;
  user-select: none;
  pointer-events: none;
}

.hs-portal-navlabel:first-child {
  padding-top: 6px;
}

.hs-portal-nav-label {
  margin: 0;
  padding: 4px 14px 8px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--hs-neutral-500);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.hs-portal-nav-label .hs-portal-nav-ic svg {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

/* Mobile — sidebar replaced by floating footer */
.hs-portal-footer-nav {
  display: none;
}

@media (max-width: 899px) {
  /* Document scroller — single overflow target so iOS momentum feels natural. */
  html:has(body.hs-portal-body) {
    --hs-browser-chrome-bottom: 0px;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    background: #fff;
  }

  .hs-table-wrap,
  .table-wrap,
  .hs-agent-subtabs,
  .hs-training-subtabs {
    touch-action: pan-x pan-y;
  }

  body.hs-portal-body {
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    /* clip (not hidden) so overflow-y stays visible — sticky headers need that */
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    touch-action: pan-y;
    background: #fff;
  }

  body.hs-portal-body #root {
    height: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    /* Do not clip here — overflow on #root retargets position:fixed footer on iOS. */
    overflow: visible;
    touch-action: pan-y;
  }

  .hs-portal-page {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  .hs-portal-shell {
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
    /* Bottom inset is stable — do not include live --hs-browser-chrome-bottom
       (that grew the page when the toolbar moved and let users scroll past content). */
    padding: var(
        --ws-mobile-chrome-h,
        calc(var(--ws-mobile-topbar-h, calc(52px + env(safe-area-inset-top, 0px))) + 74px)
      )
      0
      calc(100px + env(safe-area-inset-bottom, 0px));
  }

  /* Lander-style thin top bar — fixed so titles never scroll away */
  .ws-mobile-topbar {
    display: block;
    position: fixed;
    /* Follow visualViewport offset so iPad Safari chrome doesn't cover Handshake */
    top: var(--ws-browser-chrome-top, 0px);
    left: 0;
    right: 0;
    z-index: 36;
    /* Opaque canvas, not glass: the bar sits under the status-bar strip, which
       is plain --hs-bg-canvas. A translucent warm white read as a separate
       lighter band above the page. Nothing tints through, so no blur. */
    background: var(--hs-bg-canvas, #f4f7f3);
    border-bottom: 1px solid rgba(231, 229, 225, 0.75);
  }

  .ws-mobile-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 20px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
  }

  .ws-mobile-topbar__brand,
  :is(.surface-user, .surface-admin) a.ws-mobile-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 42%;
  }
  .ws-mobile-topbar__brand:hover,
  :is(.surface-user, .surface-admin) a.ws-mobile-topbar__brand:hover { opacity: 1; }

  /* Sizing lives in ds/hs-brand.css, off the --hs-lockup-* tokens. 18/14 here
     (22/14 once the bridge widened the mark) was a 1.29–1.57 ratio against the
     design system's 1.5 — close enough to look deliberate, which is worse. */
  .ws-mobile-topbar__word {
    max-width: 100%;
  }

  .ws-mobile-topbar__biz {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #3d4a42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  body.hs-portal-body,
  .hs-portal-page {
    background: #fff !important;
    background-attachment: fixed;
  }

  .hs-portal-main {
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .hs-portal-nav-rail {
    display: none !important;
  }

  .hs-portal-sidefoot {
    display: none;
  }

  .hs-portal-main {
    padding: 0;
    overflow: visible;
    height: auto;
  }

  .hs-portal-panel.active {
    gap: 0;
  }

  .hs-portal-section {
    gap: 0;
  }

  /*
   * Mobile page titles — liquid glass pinned under the topbar.
   * Frost sits on the head (not ::before) so backdrop-filter samples content
   * scrolling underneath. Low saturate avoids amplifying the canvas photo;
   * the mask fades the glass out so there is no hard line under the title.
   */
  .hs-portal-section__head,
  .hs-conv-head {
    --hs-title-glass-bg: rgba(247, 248, 244, 0.4);
    --hs-title-glass-blur: blur(28px) saturate(0.88) brightness(1.03);
    --hs-title-glass-mask: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - 36px),
      rgba(0, 0, 0, 0.55) calc(100% - 16px),
      transparent 100%
    );
    position: fixed;
    top: calc(
      var(--ws-browser-chrome-top, 0px) +
        var(--ws-mobile-topbar-h, calc(52px + env(safe-area-inset-top, 0px)))
    );
    left: 0;
    right: 0;
    z-index: 35;
    margin: 0;
    margin-bottom: 0;
    /* Bottom padding is the fade runway — title stays in the solid mask band. */
    padding: 16px 20px 38px;
    gap: 10px;
    border-bottom: none;
    box-sizing: border-box;
    background: var(--hs-title-glass-bg);
    backdrop-filter: var(--hs-title-glass-blur);
    -webkit-backdrop-filter: var(--hs-title-glass-blur);
    -webkit-mask-image: var(--hs-title-glass-mask);
    mask-image: var(--hs-title-glass-mask);
    isolation: auto;
  }

  .hs-portal-section__head::before,
  .hs-conv-head::before {
    content: none;
  }

  body.hs-portal-body.hs-portal-scroll-lock,
  body.hs-portal-body.hs-portal-sheet-dimmed {
    overflow: hidden !important;
    height: 100%;
    max-height: 100dvh;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.hs-portal-body.hs-portal-scroll-lock .hs-portal-page,
  body.hs-portal-body.hs-portal-sheet-dimmed .hs-portal-page {
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    touch-action: none;
  }

  body.hs-portal-body.hs-portal-scroll-lock .hs-portal-shell,
  body.hs-portal-body.hs-portal-sheet-dimmed .hs-portal-shell {
    overflow: hidden;
  }

  /* Sheet + card stay interactive while the page under the scrim is locked. */
  body.hs-portal-body.hs-portal-sheet-dimmed .hs-portal-footer-nav,
  body.hs-portal-body.hs-portal-sheet-dimmed .hs-portal-footer-nav * {
    touch-action: manipulation;
  }

  body.hs-portal-body.hs-portal-sheet-dimmed .hs-portal-footer-nav__sheet-inner {
    touch-action: pan-y;
  }

  .hs-portal-section__title {
    font-size: 1.85rem;
    line-height: 1.25;
    text-align: left;
    padding: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .hs-portal-section__head-row:has(> .hs-portal-back) .hs-portal-section__title {
    padding-left: 44px;
  }

  /* Icon-only back control — frees title space, avoids overlap */
  .hs-portal-section__head-row > .hs-portal-back,
  .hs-conv-page--detail .hs-conv-head__row > .hs-portal-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
    justify-content: center;
  }

  .hs-portal-section__head-row > .hs-portal-back .hs-portal-back__label,
  .hs-conv-page--detail .hs-portal-back__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hs-portal-section__body {
    gap: 0;
    padding: 0 20px 24px;
    box-sizing: border-box;
  }

  /* Conversations: same top rhythm as other section heads */
  #ws-panel-conversations .hs-portal-section__body {
    padding-top: 0;
  }

  .hs-conv-head__actions .hs-conv-filters-toggle--icon {
    margin-right: 2px;
  }

  /* Title gutters used to dodge absolute actions; the row is flex now. */
  .hs-conv-head__row .hs-portal-section__title {
    padding: 0;
  }

  .hs-conv-page--detail .hs-portal-section__title {
    padding: 0;
  }

  /* Flatten nested white cards — content sits with consistent page padding */
  .hs-portal-panel .card,
  .hs-portal-panel .hs-portal-panel-card,
  .hs-portal-panel .hs-portal-card,
  .hs-portal-panel .hs-agent-pane {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 16px 0;
  }

  /* Conversations inbox: stay within page padding — no stacked edge rules */
  #ws-panel-conversations .hs-activity-inbox-card {
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #ws-panel-conversations .hs-conv-filter-wrap,
  #ws-panel-conversations .hs-conv-empty,
  #ws-panel-conversations #ws-activity-loading,
  #ws-panel-conversations .hs-cn-panel {
    padding-left: 0;
    padding-right: 0;
  }

  /* Agents use the shared section body gutter — no extra inset. */
  .hs-portal-section--agents .hs-portal-section__body--agents {
    box-sizing: border-box;
  }

  .hs-portal-section--agents .hs-portal-content-pane.is-active {
    min-width: 0;
  }

  #ws-panel-conversations .hs-activity-detail {
    padding: 0;
  }

  #ws-panel-conversations .hs-portal-section__body {
    padding-bottom: 20px;
  }

  #ws-panel-conversations .hs-activity-tbl__frame {
    border: none;
    border-radius: 0;
  }

  #ws-panel-conversations .hs-activity-tbl__head,
  #ws-panel-conversations .hs-activity-daygroup {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Compact tables & conversation rows */
  .hs-activity-tbl__head {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;
  }

  .hs-activity-tbl__h {
    font-size: 11px;
  }

  .hs-activity-row {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 3px;
  }

  .hs-activity-row__top {
    gap: 6px 8px;
    grid-template-columns: 18px 5.25rem minmax(0, 1fr) auto;
  }

  .hs-activity-row__title,
  .hs-activity-row__time {
    font-size: 14px;
  }

  .hs-activity-row__sum {
    font-size: 12px;
    padding-left: calc(18px + 8px + 5.25rem + 8px);
  }

  .hs-activity-chip--icon {
    padding: 4px;
  }

  .hs-activity-chip__ico {
    width: 18px;
    height: 18px;
  }

  .hs-activity-chip__ico svg {
    width: 16px;
    height: 16px;
  }

  .hs-activity-daygroup {
    padding-top: 8px;
    padding-bottom: 4px;
  }

  .hs-activity-daygroup__day {
    font-size: 13px;
  }

  .hs-activity-daygroup__date {
    font-size: 12px;
  }

  .hs-billing-table,
  .hs-portal-data-table,
  .hs-connectors-table,
  table.hs-table,
  .hs-table {
    font-size: 12px;
  }

  .hs-billing-table th,
  .hs-billing-table td,
  .hs-portal-data-table th,
  .hs-portal-data-table td,
  .hs-connectors-table th,
  .hs-connectors-table td,
  table.hs-table th,
  table.hs-table td,
  .hs-table th,
  .hs-table td {
    padding: 6px 8px;
  }

  .hs-billing-table th,
  .hs-connectors-table th,
  .hs-portal-data-table th,
  table.hs-table th,
  .hs-table th {
    font-size: 10px;
  }

  .hs-connectors-layout__header > span,
  .hs-connectors-layout__row:not(.hs-cw-card) > * {
    padding: 8px 10px;
  }

  /* Connectors: fit phone width — stack name/private/email as a card row */
  .hs-connectors-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .hs-connectors-layout__header {
    display: none;
  }

  .hs-connectors-layout__row:not(.hs-cw-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name action"
      "meta action";
    gap: 4px 10px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #E7EDEA;
    align-items: center;
  }

  .hs-connectors-layout__row:not(.hs-cw-card) > * {
    padding: 0;
    border-bottom: none;
    min-width: 0;
  }

  .hs-connectors-layout__row:not(.hs-cw-card) .hs-connector-name {
    grid-area: name;
  }

  .hs-connectors-layout__row:not(.hs-cw-card) .hs-connector-action {
    grid-area: action;
    justify-content: flex-end;
    align-self: start;
  }

  .hs-connectors-layout__row .hs-connector-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hs-connectors-layout__row .hs-connector-actions .hs-btn {
    width: 100%;
  }

  .hs-connectors-layout__row .hs-connector-perm,
  .hs-connectors-layout__row .hs-connector-account {
    grid-area: meta;
  }

  .hs-connectors-layout__row .hs-connector-perm {
    display: none;
  }

  .hs-connectors-layout__row .hs-connector-account--stack,
  .hs-connectors-layout__row .hs-connector-account {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  .hs-connector-account__tags .hs-connector-tag--private {
    display: inline-flex;
  }

  .hs-connectors-layout__row .hs-connector-account__email {
    font-size: 13px;
    color: var(--ink-2, #4a5c52);
    word-break: break-word;
  }

  .hs-connectors-layout__section {
    padding: 12px 0 8px;
  }

  .hs-connectors-layout__empty {
    padding: 10px 0;
  }

  .hs-portal-footer-nav {
    --hs-dock-h: 52px;
    --hs-dock-max: 400px;
    /* Inherit --hs-browser-chrome-bottom from :root (JS). Do not reset it here —
       a local 0px shadowed the live inset and dropped the dock into the browser tab bar. */
    --hs-dock-gutter: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    /* Single assembly width — collapsed dock and More/Agents card share this */
    --hs-dock-width: min(
      85vw,
      var(--hs-dock-max),
      calc(100vw - (2 * var(--hs-dock-gutter)))
    );
    /* Shared by nav pill + Julia disc — frosted glass over page content */
    --hs-dock-bg: rgba(255, 255, 255, 0.36);
    --hs-dock-border: 1px solid rgba(255, 255, 255, 0.34);
    --hs-dock-blur: blur(30px) saturate(1.7);
    --hs-dock-lift:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 10px 28px rgba(14, 27, 17, 0.14),
      0 2px 8px rgba(14, 27, 17, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    position: fixed;
    /* Center one fixed-width unit (pill + Julia + sheets) */
    left: 0;
    right: 0;
    width: var(--hs-dock-width);
    max-width: var(--hs-dock-width);
    min-width: 0;
    margin: 0 auto;
    transform: none;
    padding: 0;
    /* Match admin dock: 12px/safe-area above screen edge or browser chrome */
    bottom: calc(
      max(12px, env(safe-area-inset-bottom, 0px)) + var(--hs-browser-chrome-bottom, 0px)
    );
    top: auto !important;
    z-index: 40;
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - max(24px, env(safe-area-inset-bottom, 0px)) -
        var(--hs-browser-chrome-bottom, 0px) - 8px
    );
    box-sizing: border-box;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    opacity: 1;
    pointer-events: none;
    transition:
      bottom 0.2s ease,
      background 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .hs-portal-footer-nav > * {
    pointer-events: auto;
  }

  /* Expand grows height only — same width as collapsed dock + Julia.
     Solid white card so the grey sheet scrim does not tint the nav popup. */
  .hs-portal-footer-nav.is-expanded {
    --hs-dock-card-bg: #ffffff;
    --hs-dock-card-border: 1px solid rgba(14, 27, 17, 0.1);
    --hs-dock-card-blur: none;
    --hs-dock-card-lift:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 18px 48px rgba(14, 27, 17, 0.18),
      0 4px 14px rgba(14, 27, 17, 0.08);
    overflow: hidden;
    left: 0;
    right: 0;
    width: var(--hs-dock-width);
    max-width: var(--hs-dock-width);
    min-width: 0;
    margin: 0 auto;
    transform: none;
    padding: 0;
    align-items: stretch;
    pointer-events: auto;
    background: var(--hs-dock-card-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: var(--hs-dock-card-border);
    border-radius: 28px;
    box-shadow: var(--hs-dock-card-lift);
  }

  .hs-portal-footer-nav.is-more-expanded,
  .hs-portal-footer-nav.is-agents-expanded {
    align-items: stretch;
  }

  .hs-portal-footer-nav__sheet {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    min-height: 0;
    box-sizing: border-box;
    transition: grid-template-rows 0.46s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .hs-portal-footer-nav.is-more-expanded .hs-portal-footer-nav__sheet--more,
  .hs-portal-footer-nav.is-agents-expanded .hs-portal-footer-nav__sheet--agents {
    grid-template-rows: 1fr;
  }

  .hs-portal-footer-nav__sheet-inner {
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
  }

  .hs-portal-footer-nav.is-more-expanded .hs-portal-footer-nav__sheet--more .hs-portal-footer-nav__sheet-inner,
  .hs-portal-footer-nav.is-agents-expanded .hs-portal-footer-nav__sheet--agents .hs-portal-footer-nav__sheet-inner {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - var(--hs-dock-h) - 72px -
        max(12px, env(safe-area-inset-bottom, 0px)) - var(--hs-browser-chrome-bottom, 0px)
    );
  }

  .hs-portal-footer-nav.is-expanded .hs-portal-footer-nav__dock {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    /* Keep dock row the same height as collapsed — sheet grows upward only */
    padding: 0;
    height: var(--hs-dock-h);
    min-height: var(--hs-dock-h);
    max-height: var(--hs-dock-h);
    justify-content: space-between;
  }

  .hs-portal-footer-nav.is-expanded .hs-portal-footer-nav__pill {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hs-portal-footer-nav__dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    transform: none;
    transition:
      padding 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      gap 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .hs-portal-footer-nav__pill {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: var(--hs-dock-h);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    background: var(--hs-dock-bg);
    backdrop-filter: var(--hs-dock-blur);
    -webkit-backdrop-filter: var(--hs-dock-blur);
    border: var(--hs-dock-border);
    border-radius: 999px;
    box-shadow: var(--hs-dock-lift);
    overflow: hidden;
    transition:
      background 0.36s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.36s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .hs-portal-footer-nav__primary {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 0;
    /* Fill pill content box (border-box) so highlight padding is equal top/bottom */
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: inherit;
  }

  .hs-portal-footer-nav__extra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 8px 6px;
    border-bottom: 1px solid rgba(14, 27, 17, 0.08);
    opacity: 0;
    transform: translateY(12px);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    transition:
      opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.46s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
  }

  .hs-portal-footer-nav.is-more-expanded .hs-portal-footer-nav__extra--more,
  .hs-portal-footer-nav.is-agents-expanded .hs-portal-footer-nav__extra--agents {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.04s;
  }

  .hs-portal-footer-nav__extra-divider {
    height: 1px;
    margin: 6px 12px;
    background: rgba(14, 27, 17, 0.1);
    flex-shrink: 0;
  }

  .hs-portal-footer-nav__extra-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
  }

  .hs-portal-footer-nav__extra-row > .hs-portal-footer-nav__extra-item {
    flex: 1 1 0;
    flex-direction: column;
    width: auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    text-align: center;
  }

  .hs-portal-footer-nav__extra-row > .hs-portal-footer-nav__extra-item .hs-portal-nav-ic {
    width: 24px;
    height: 24px;
  }

  .hs-portal-footer-nav__extra-row > .hs-portal-footer-nav__extra-item .hs-portal-nav-ic svg {
    width: 20px;
    height: 20px;
  }

  .hs-portal-footer-nav__extra-row > .hs-portal-footer-nav__extra-item .hs-portal-footer-nav__extra-item__label {
    flex: 0 1 auto;
    font-size: 13px;
    line-height: 1.2;
  }

  .hs-portal-footer-nav__extra-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--hs-everglade-900, #0e1b11);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .hs-portal-footer-nav__extra-item__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hs-portal-footer-nav__extra-item__tags {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .hs-portal-footer-nav__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
  }

  .hs-portal-footer-nav__tag--setup {
    background: #e8f7ef;
    color: #176542;
  }

  .hs-portal-footer-nav__tag--new {
    background: #e8f0ff;
    color: #1d4f91;
  }

  .hs-portal-footer-nav__tag--beta {
    background: #f3eefc;
    color: #5b3d9a;
  }

  .hs-portal-footer-nav__tag--admin {
    background: var(--hs-everglade-900, #0e1b11);
    color: #ffffff;
  }

  .hs-portal-footer-nav__extra-item .hs-portal-nav-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    opacity: 1;
    color: var(--hs-everglade-900, #0e1b11);
  }

  .hs-portal-footer-nav__extra-item .hs-portal-nav-ic svg {
    width: 24px;
    height: 24px;
  }

  .hs-portal-footer-nav__extra-item.is-on {
    background: color-mix(in srgb, var(--accent-2, #1a7a4c) 14%, #ffffff);
    color: var(--accent-2, #1a7a4c);
  }

  .hs-portal-footer-nav__extra-item.is-on .hs-portal-nav-ic {
    color: var(--accent-2, #1a7a4c);
  }

  @media (hover: hover) and (pointer: fine) {
    .hs-portal-footer-nav__extra-item:hover {
      background: rgba(14, 27, 17, 0.05);
      color: var(--hs-everglade-900, #0e1b11);
    }
  }

  .hs-portal-footer-nav__extra-item:active {
    transform: scale(0.985);
  }

  .hs-portal-footer-nav__extra-item--danger,
  .hs-portal-footer-nav__extra-item--danger .hs-portal-nav-ic,
  .hs-portal-footer-nav__extra-item--danger .hs-portal-footer-nav__extra-item__label {
    color: #b42318;
  }

  .hs-portal-footer-nav__extra-item--danger .hs-portal-nav-ic {
    opacity: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    .hs-portal-footer-nav__extra-item--danger:hover,
    .hs-portal-footer-nav__extra-item--danger:hover .hs-portal-nav-ic,
    .hs-portal-footer-nav__extra-item--danger:hover .hs-portal-footer-nav__extra-item__label {
      color: #b42318;
    }
  }

  .hs-portal-footer-nav a,
  .hs-portal-footer-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    flex: 1 1 0;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    min-width: 0;
    max-width: none;
    padding: 0;
    border-radius: 999px;
    text-decoration: none;
    color: #3a4540;
    font-size: 0;
    font-weight: 600;
    line-height: 0;
    letter-spacing: 0;
    text-align: center;
    border-bottom: none;
    overflow: visible;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
  }

  /* Icon-only dock — labels stay in DOM for JS/aria, visually hidden */
  .hs-portal-footer-nav a > span:not(.hs-portal-nav-ic):not(.hs-portal-footer-julia-av):not(.hs-portal-footer-collapse-ic):not(.hs-portal-footer-julia-admin-badge),
  .hs-portal-footer-nav__link > span:not(.hs-portal-nav-ic):not(.hs-portal-footer-julia-av):not(.hs-portal-footer-collapse-ic):not(.hs-portal-footer-julia-admin-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hs-portal-footer-nav .hs-portal-nav-ic {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: inherit;
  }

  .hs-portal-footer-nav .hs-portal-nav-ic svg {
    width: 24px;
    height: 24px;
  }

  /*
   * Julia disc: same glass tokens + lift as the pill.
   * No overflow:hidden on the disc (that clipped the shared shadow).
   */
  .hs-portal-footer-nav__link--julia .hs-portal-footer-julia-av {
    display: grid;
    place-items: center;
    width: var(--hs-dock-h);
    height: var(--hs-dock-h);
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 3px;
    background: var(--hs-dock-bg);
    backdrop-filter: var(--hs-dock-blur);
    -webkit-backdrop-filter: var(--hs-dock-blur);
    border: var(--hs-dock-border);
    box-shadow: var(--hs-dock-lift);
    transition:
      opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      background 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .hs-portal-footer-nav__link--julia .hs-portal-footer-julia-av img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
  }

  .hs-portal-footer-nav__link--julia .hs-portal-footer-collapse-ic {
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--hs-dock-h);
    height: var(--hs-dock-h);
    border-radius: 50%;
    background: var(--hs-dock-bg);
    backdrop-filter: var(--hs-dock-blur);
    -webkit-backdrop-filter: var(--hs-dock-blur);
    border: var(--hs-dock-border);
    color: var(--hs-everglade-900, #0e1b11);
    box-shadow: var(--hs-dock-lift);
    opacity: 0;
    transform: scale(0.72) translateY(-6px);
    pointer-events: none;
    transition:
      opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      background 0.24s ease,
      color 0.24s ease;
  }

  .hs-portal-footer-nav__link--julia .hs-portal-footer-collapse-ic svg {
    width: 24px;
    height: 24px;
  }

  .hs-portal-footer-nav__link--julia.is-collapse .hs-portal-footer-julia-av {
    opacity: 0;
    transform: scale(0.78) translateY(4px);
    pointer-events: none;
  }

  .hs-portal-footer-nav__link--julia.is-collapse .hs-portal-footer-collapse-ic {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }

  @media (hover: hover) and (pointer: fine) {
    .hs-portal-footer-nav a:hover,
    .hs-portal-footer-nav__link:hover {
      color: var(--ink, var(--hs-neutral-800));
      background: rgba(14, 27, 17, 0.06);
    }

    .hs-portal-footer-nav__link--julia:hover {
      background: transparent !important;
      transform: scale(1.04);
    }

    .hs-portal-footer-nav__link--julia.is-collapse:hover {
      transform: none;
    }

    .hs-portal-footer-nav__link--julia.is-collapse:hover .hs-portal-footer-collapse-ic {
      background: rgba(255, 255, 255, 0.68);
    }
  }

  .hs-portal-footer-nav a.active,
  .hs-portal-footer-nav__link.active {
    color: var(--accent-2, var(--hs-everglade-600));
    background: color-mix(in srgb, var(--accent-2, #1a7a4c) 16%, #ffffff);
  }

  .hs-portal-footer-nav__link--more.active,
  .hs-portal-footer-nav__link--agents.active {
    color: var(--accent-2, var(--hs-everglade-600));
    background: color-mix(in srgb, var(--accent-2, #1a7a4c) 16%, #ffffff);
  }

  .hs-portal-footer-nav__link--julia {
    flex: 0 0 auto;
    width: var(--hs-dock-h);
    height: var(--hs-dock-h);
    min-width: var(--hs-dock-h);
    max-width: var(--hs-dock-h);
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none;
    justify-content: center;
    align-self: center;
    overflow: visible;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .hs-portal-footer-nav__link--julia:hover {
    background: transparent !important;
    color: inherit !important;
  }

  .hs-portal-footer-nav__link--julia.active {
    background: transparent !important;
    color: inherit !important;
  }

  .hs-portal-footer-nav__link--julia .hs-portal-nav-ic:not(.hs-portal-footer-collapse-ic) {
    display: none;
  }

  .hs-portal-footer-nav__link--julia.active:not(.is-collapse) .hs-portal-footer-julia-av {
    box-shadow: var(--hs-dock-lift);
  }

  .hs-portal-footer-nav__link {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .hs-portal-footer-nav,
    .hs-portal-footer-nav__sheet,
    .hs-portal-footer-nav__extra,
    .hs-portal-footer-nav__dock,
    .hs-portal-footer-nav__pill,
    .hs-portal-footer-nav__link--julia .hs-portal-footer-julia-av,
    .hs-portal-footer-nav__link--julia .hs-portal-footer-collapse-ic {
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
  }
}

/* Narrow phones: tighten icon hit targets inside the same dock width unit */
@media (max-width: 480px) {
  .hs-portal-footer-nav {
    --hs-dock-gutter: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    /* Keep the same single-unit width model (85vw capped) */
    left: 0;
    right: 0;
    width: var(--hs-dock-width);
    max-width: var(--hs-dock-width);
    margin: 0 auto;
    transform: none;
    padding: 0;
  }

  .hs-portal-footer-nav.is-expanded {
    left: 0;
    right: 0;
    width: var(--hs-dock-width);
    max-width: var(--hs-dock-width);
    margin: 0 auto;
    padding: 0;
    transform: none;
  }

  .hs-portal-footer-nav__dock {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  .hs-portal-footer-nav__primary {
    padding: 4px 6px;
    gap: 0;
  }

  .hs-portal-footer-nav .hs-portal-nav-ic {
    width: 24px;
    height: 24px;
  }

  .hs-portal-footer-nav .hs-portal-nav-ic svg {
    width: 20px;
    height: 20px;
  }

  .hs-portal-footer-nav__link--julia,
  .hs-portal-footer-nav__link--julia .hs-portal-footer-julia-av,
  .hs-portal-footer-nav__link--julia .hs-portal-footer-collapse-ic {
    width: var(--hs-dock-h);
    height: var(--hs-dock-h);
    min-width: var(--hs-dock-h);
    max-width: var(--hs-dock-h);
  }
}

.hs-portal-main {
  --hs-portal-content-max: 1080px;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hs-portal-panel {
  display: none;
}

.hs-portal-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  padding-top: 0;
}

.hs-portal-section {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  min-width: 0;
}

.hs-portal-section__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
  padding: 16px 0;
  background: transparent;
  border-bottom: none;
}

.hs-portal-section__head-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  min-width: 0;
  width: 100%;
  min-height: 44px;
}

.hs-portal-section__head-actions {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  flex: none;
}

.hs-portal-section__title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-3xl);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-fg-primary);
  /* 1.25 keeps Lexend descenders ("g", "y") inside the line box */
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  padding: 0;
  overflow: visible;
  text-wrap: balance;
}

/* The 48px / 148px gutters that used to live here dodged absolutely
   positioned buttons. The row is a flex line now, so there is nothing to
   dodge and nothing to keep in sync when a button changes width. */

.hs-btn.hs-conv-notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: var(--hs-size-control-md);
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hair-2, #d5dbd4);
  background: var(--panel, #fff);
  color: var(--ink, #17241c);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.04);
}

.hs-btn.hs-conv-notif-btn:hover,
.hs-btn.hs-conv-notif-btn:focus-visible {
  background: var(--panel-2, #f4f7f5);
  border-color: var(--hair-2, #c5cdc6);
  color: var(--ink, #0e1b11);
  outline: none;
}

.hs-btn.hs-conv-notif-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hs-portal-section__head-actions .hs-btn.hs-conv-notif-btn,
.hs-conv-head__actions .hs-btn.hs-conv-notif-btn {
  position: static;
  top: auto;
  right: auto;
  transform: none;
}


/* Notif / filter buttons are flex siblings of the title now — no reserved
   gutter on the title itself. */

.hs-portal-back,
.hs-conv-notif-back,
.hs-activity-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
}

.hs-portal-back__chev {
  font-size: 16px;
  line-height: 1;
}

.hs-portal-section__head-row > .hs-portal-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.hs-conv-notif-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

.hs-activity-detail .hs-activity-back.hs-portal-back {
  position: static;
  transform: none;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}

.hs-conv-page--detail .hs-activity-back.hs-portal-back {
  position: absolute;
  transform: translateY(-50%);
  margin-bottom: 0;
  align-self: auto;
}

.hs-portal-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  min-width: 0;
}

.hs-activity-inbox-card__lede {
  margin: -8px 0 14px;
  font-size: 13.5px;
  color: var(--ink-2, var(--hs-neutral-600));
}

.hs-activity-inbox-card__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 4px;
}

.hs-activity-inbox-card__head .hs-portal-section__title {
  margin: 0;
}

.hs-agents-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hs-agents-toolbar:empty {
  display: none;
}

@media (min-width: 900px) {
  .hs-portal-section--agents .hs-agents-toolbar .hs-agents-subtabs-wrap,
  .hs-portal-section--agents .hs-agents-toolbar .hs-agents-subtabs {
    display: none !important;
  }
}

.hs-portal-content-pane {
  display: none;
}

.hs-portal-content-pane.is-active {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  min-width: 0;
}

.hs-agents-subtabs-wrap,
.hs-agents-subtabs,
.hs-settings-subtabs,
.hs-conv-subtabs {
  max-width: 100%;
}
.hs-agents-subtabs-wrap {
  justify-content: flex-start;
}

@media (min-width: 900px) {
  .hs-portal-section__head {
    min-height: 0;
  }
}

.hs-portal-frame {
  border: 1px solid var(--hair, var(--hs-card-border));
  border-radius: var(--r-lg, var(--hs-radius-lg));
  background: var(--canvas, var(--hs-page-warm));
  overflow: hidden;
}

/* Portal cards */
.hs-portal-card {
  background: var(--panel, #fff);
  border: 1px solid var(--hair, #E7EDEA);
  border-radius: var(--r-lg, 14px);
  padding: 15px 16px;
  box-shadow: var(--shadow, var(--hs-shadow-card));
  margin-bottom: 10px;
}

.hs-portal-card-accent,
.hs-portal-card-core {
  border-left: 2px solid var(--accent, var(--hs-aqua));
}

.hs-portal-card-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
}

.hs-portal-card-clickable:hover {
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.04), 0 18px 46px rgba(10, 12, 11, 0.09);
}

.hs-portal-card h3 {
  margin: 0 0 4px;
  font-family: var(--hs-font-ui);
  font-size: 15px;
  font-weight: 600;
}

.hs-portal-card p.sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--hs-text-muted);
  line-height: 1.45;
}

.hs-portal-hero {
  margin-bottom: 14px;
}


.hs-portal-icon {
  display: inline-block;
  font-size: 1.1rem;
  margin-bottom: 6px;
  opacity: 0.85;
}

.hs-portal-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

@media (min-width: 600px) {
  .hs-portal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hs-portal-widgets {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

@media (min-width: 700px) {
  .hs-portal-widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hs-portal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hs-space-3);
  margin: var(--hs-space-3) 0;
}

.hs-portal-stat-value {
  font-family: var(--hs-font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hs-portal-stat-label {
  font-size: 0.72rem;
  color: var(--hs-text-muted);
}

.hs-portal-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: var(--hs-space-2);
}

.hs-portal-data-table th,
.hs-portal-data-table td {
  text-align: left;
  padding: var(--hs-space-2) var(--hs-space-3);
  border-bottom: 1px solid #F1F5F3;
}

.hs-portal-data-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  font-weight: 600;
}

/* Onboarding */
.hs-portal-onboard .hs-portal-bars {
  display: flex;
  gap: 4px;
  margin: 10px 0;
}

.hs-portal-onboard .hs-portal-bars i {
  width: 24px;
  height: 4px;
  border-radius: 3px;
  background: #E7EDEA;
  font-style: normal;
  display: block;
}

.hs-portal-onboard .hs-portal-bars i.on {
  background: var(--hs-aqua);
}


/* Widget preview overlay */
.hs-portal-widget-sample .hs-widget-body-wrap {
  position: relative;
}

.hs-portal-widget-sample .hs-widget-blurred-wrap .hs-widget-body {
  filter: blur(3px);
  opacity: 0.65;
  pointer-events: none;
}

.hs-portal-widget-sample .hs-widget-connect-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-3);
  background: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
}

/* Business summary in portal */
.hs-portal-card .hs-business-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #F1F5F3;
  font-size: 14px;
}

.hs-portal-card .hs-business-summary-label {
  color: var(--hs-text-muted);
  flex-shrink: 0;
}

.hs-portal-card .hs-business-summary-value {
  text-align: right;
  font-weight: 500;
}

/* Panel cards: one white layer for content units. Page titles live on the canvas (admin-like). */
.hs-portal-panel .card,
.hs-portal-panel .hs-portal-panel-card {
  background: var(--panel, var(--hs-bg));
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--hs-shadow-card);
  margin-bottom: 0;
}

.hs-portal-panel .card h3,
.hs-portal-panel .hs-portal-panel-card h3 {
  margin: 0 0 6px;
  font-family: var(--hs-font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hs-neutral-800);
}

.hs-portal-panel .hs-portal-panel-card > .sub:first-of-type,
.hs-portal-panel .hs-portal-panel-card > p.sub {
  font-size: 15px;
  color: var(--hs-neutral-500);
  margin: 6px 0 0;
}

.hs-portal-panel .hs-portal-panel-card--flush {
  padding: 0;
  overflow: hidden;
}

.hs-portal-panel .hs-portal-panel-card--flush .hs-activity-tbl__frame {
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Mobile: Conversations-style flat canvas — no nested white cards */
@media (max-width: 899px) {
  .hs-portal-panel .card,
  .hs-portal-panel .hs-portal-panel-card,
  .hs-portal-panel .hs-portal-card,
  .hs-portal-panel .hs-agent-pane,
  .hs-portal-panel .hs-cn-card,
  .hs-portal-panel .hs-td-hero,
  .hs-portal-panel .hs-phone-skill-card,
  .hs-portal-panel .hs-agent-preview-card,
  .hs-portal-panel .hs-chatbot-section,
  .hs-portal-panel .hs-training-business-card,
  .hs-portal-panel .hs-agent-persona-card,
  .hs-portal-panel .hs-connectors-skills-card,
  .hs-portal-panel .hs-scheduled-tasks-card,
  .hs-portal-panel .hs-refer-history-card,
  .hs-portal-panel .hs-refer-steps-card,
  .hs-portal-panel .hs-billing-section-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* Keep the Refer share card as a full-bleed hero surface on mobile */
  .hs-portal-panel .hs-refer-share-card {
    margin-left: 0;
    margin-right: 0;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 18px !important;
    border: 1px solid rgba(14, 27, 17, 0.08) !important;
    box-shadow: 0 10px 28px rgba(14, 27, 17, 0.08) !important;
    background: #fff !important;
  }

  /* The mobile page title is fixed liquid glass with a 38px fade runway beneath
     it, and .hs-portal-shell only reserves 74px — so the first ~17px of content
     sits under the frost. Every other page opens with a plain card, which reads
     fine half-faded. This one opens with artwork and an eyebrow, and both were
     being clipped by "Refer and earn". Buy the clearance back. */
  #ws-panel-refer .hs-portal-section__body {
    padding-top: 16px;
  }

  /* Keep the Billing plan hero as a visible gradient card on mobile */
  .hs-portal-panel .hs-billing-plan-card--hero {
    margin-left: 0;
    margin-right: 0;
    padding: var(--hs-space-5) var(--hs-space-5) var(--hs-space-6) !important;
    overflow: hidden;
    border-radius: var(--hs-radius-xl) !important;
    border: var(--hs-size-hairline) solid var(--hs-border-subtle) !important;
    box-shadow: var(--hs-elevation-raised) !important;
    background: linear-gradient(
      105deg,
      rgba(212, 247, 230, 0.45) 0%,
      rgba(207, 230, 249, 0.4) 50%,
      rgba(229, 212, 247, 0.4) 100%
    ) !important;
  }

  .hs-portal-panel .hs-portal-panel-card,
  .hs-portal-panel .hs-portal-card,
  .hs-portal-panel .hs-agent-pane {
    padding-top: 8px;
    padding-bottom: 16px;
    margin-bottom: 0;
  }

  .hs-portal-panel .hs-portal-panel-card h3,
  .hs-portal-panel .hs-portal-card h3,
  .hs-portal-panel .hs-agent-pane h3 {
    font-size: 1rem;
  }

  /* Phone / agent skills: hairline rows instead of nested cards */
  .hs-portal-panel .hs-phone-skills-list {
    gap: 0;
    margin-top: 0.5rem;
  }

  .hs-portal-panel .hs-phone-skill-card {
    padding: 14px 0;
    border-bottom: 1px solid var(--hair, rgba(231, 229, 225, 0.95)) !important;
  }

  .hs-portal-panel .hs-phone-skill-card:last-child {
    border-bottom-color: transparent !important;
  }

  #ws-panel-agent-phone .hs-td-hero--phone:not(.hs-td-hero--assigned) {
    padding: 12px 0 16px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--hair, rgba(231, 229, 225, 0.95)) !important;
    background: transparent !important;
  }

  .hs-portal-panel .hs-agent-preview-card {
    margin: 12px 0 0;
    border-top: 1px solid var(--hair, rgba(231, 229, 225, 0.95)) !important;
  }

  .hs-portal-panel .hs-agent-preview-card__summary {
    padding-left: 0;
    padding-right: 0;
  }

  .hs-portal-panel .hs-agent-preview-card__body {
    padding-left: 0;
    padding-right: 0;
  }

  .hs-portal-panel .hs-cn-row {
    padding-left: 0;
    padding-right: 0;
  }

  /* Keep section surface cards opaque on mobile (match desktop chatbot Appearance) */
  .hs-portal-panel .hs-ptool,
  .hs-portal-panel .hs-st-task-card,
  .hs-portal-panel .hs-email-disabled-card,
  .hs-portal-panel .hs-activity-row,
  .hs-portal-panel #ws-sms-agent-settings-panel.hs-chatbot-section,
  .hs-portal-panel #ws-sms-agent-settings-panel.hs-portal-panel-card,
  .hs-portal-panel #ws-sms-agent-settings-panel.hs-chatbot-settings-collapse {
    background: var(--panel, #fff) !important;
    border: 1px solid var(--hair, #e7edea) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
  }

  .hs-portal-panel #ws-sms-agent-settings-panel {
    padding: 0.85rem 1rem !important;
  }

  .hs-portal-panel .hs-activity-row {
    border-radius: 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Notifications keep opaque white surfaces so channel + Message me menus stay readable */
  .hs-portal-panel .hs-cn-card,
  .hs-portal-panel .hs-cn-rec,
  .hs-portal-panel .hs-cn-form:not(.hs-cn-form--new) {
    background: #fff !important;
    border: 1px solid var(--hair, var(--border, #e6eae3)) !important;
    box-shadow: 0 1px 2px rgba(14, 27, 17, 0.04) !important;
    border-radius: 18px !important;
  }

  .hs-portal-panel .hs-cn-rec,
  .hs-portal-panel .hs-cn-form:not(.hs-cn-form--new) {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .hs-portal-panel .hs-cn-form--new {
    background: #fff !important;
    border: 1px solid var(--hair, var(--border, #e6eae3)) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .hs-portal-panel .hs-cn-card {
    border-radius: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hs-portal-panel .hs-cn-card--others {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hs-portal-panel .hs-cn-channel-nav > .sgc,
  .hs-portal-panel .hs-cn-me-seg {
    background: #fff;
    border-color: var(--hair, #e6eae3);
  }

  .hs-portal-panel .hs-cn-card > .hs-cn-row {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hs-portal-panel .hs-training-accordion__section {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hair, rgba(231, 229, 225, 0.95));
    border-radius: 0;
    box-shadow: none;
  }
}

.hs-agent-pane {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.hs-agent-pane.locked {
  opacity: 0.72;
}

.hs-portal-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(14, 27, 17, 0.52);
  color: transparent;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition:
    opacity 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    backdrop-filter 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hs-portal-sheet-backdrop:hover,
.hs-portal-sheet-backdrop:focus,
.hs-portal-sheet-backdrop:active {
  background: rgba(14, 27, 17, 0.52);
  color: transparent;
  box-shadow: none;
  border-color: transparent;
}

.hs-portal-sheet-backdrop.is-visible {
  display: block;
  opacity: 1;
}

@media (min-width: 900px) {
  .hs-portal-sheet-backdrop {
    display: none !important;
  }
}

.hs-admin-view-panel { display: none; }
.hs-admin-view-panel.active { display: block; }

/* Workspace — full chat panel */

.hs-chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 58px - 40px);
  background: #fff;
  border: 1px solid #E7EDEA;
  border-radius: 14px;
  box-shadow: var(--hs-shadow-card);
  overflow: hidden;
}

.hs-chat-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #E7EDEA;
  background: #FAFCFB;
}

.hs-chat-panel-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hs-chat-panel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1D4032, #2d6b52);
  color: #fff;
  font-family: var(--hs-font-ui);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hs-chat-panel-head h2 {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: 17px;
  font-weight: 700;
}

.hs-chat-panel-head .sub {
  margin: 2px 0 0;
  font-size: 13px;
}

.hs-chat-panel-cta {
  flex-shrink: 0;
}

.hs-chat-thread-wrap {
  flex: 1;
  min-height: 0;
  background: #F4F7F5;
}

.hs-chat-thread {
  height: 100%;
  min-height: 320px;
  max-height: calc(100vh - 58px - 200px);
  overflow-y: auto;
  padding: 20px 18px 28px;
  scroll-behavior: smooth;
}

@media (min-width: 900px) {
  .hs-chat-thread {
    min-height: 480px;
    max-height: calc(100vh - 58px - 180px);
    padding: 24px 28px 32px;
  }
}

.hs-chat-day {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

.hs-chat-day span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #E7EDEA;
  border-radius: 999px;
  padding: 4px 12px;
}

.hs-chat-panel .hs-chat-msg {
  margin-bottom: 14px;
  max-width: min(78%, 520px);
}

.hs-chat-panel .hs-chat-msg.inbound {
  margin-right: auto;
}

.hs-chat-panel .hs-chat-msg.outbound {
  margin-left: auto;
  text-align: right;
}

.hs-chat-panel .hs-chat-bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  word-break: break-word;
}

.hs-chat-panel .hs-chat-msg.inbound .hs-chat-bubble {
  background: #fff;
  border: 1px solid #E7EDEA;
  border-bottom-left-radius: 6px;
}

.hs-chat-panel .hs-chat-msg.outbound .hs-chat-bubble {
  background: var(--hs-aqua);
  color: var(--hs-ink);
  border-bottom-right-radius: 6px;
}

.hs-chat-panel .hs-chat-time {
  font-size: 11px;
  color: var(--hs-text-muted);
  margin-top: 4px;
  padding: 0 4px;
}

.hs-chat-media-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
}

.hs-chat-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--hs-text-muted);
}

.hs-chat-empty p {
  margin: 0 0 8px;
}

.hs-chat-panel-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid #E7EDEA;
  background: #FAFCFB;
}

.hs-chat-panel-foot p {
  margin: 0;
  font-size: 12.5px;
  color: var(--hs-text-muted);
  text-align: center;
}

/* Floating Julia chat widget */
.julia-chat-dock {
  position: fixed;
  z-index: 9000;
  overflow: visible;
  background: transparent;
  --julia-chat-shadow-pad: 28px;
  --julia-chat-accent-hover: var(--hs-aqua-hover);
  --julia-chat-accent-press: var(--hs-aqua-press);
  --julia-chat-accent-text: #0e1b11;
}

.julia-chat-dock:not(.julia-chat-dock--inline) .julia-chat-dock__shadow-room {
  padding: var(--julia-chat-shadow-pad);
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
}

.julia-chat-dock--embed {
  overflow: visible;
}

.julia-chat-dock.is-dragging {
  transition: none;
  touch-action: none;
}

.julia-chat-dock.is-dragging .julia-chat-fab,
.julia-chat-dock.is-dragging .julia-chat-panel {
  cursor: grabbing;
}

.julia-chat-fab {
  position: relative;
  padding: 0;
  border: none;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

/* Badge sits outside the clipped avatar circle so it isn't cropped. */
.julia-chat-fab__avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  overflow: visible;
  z-index: 2;
}

.julia-chat-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 4;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e11d48;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
  transform-origin: center;
}

.julia-chat-fab--unread .julia-chat-fab__badge:not([hidden]) {
  animation: julia-chat-fab-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes julia-chat-fab-badge-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px #fff;
  }
  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 6px rgba(225, 29, 72, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .julia-chat-fab--unread .julia-chat-fab__badge:not([hidden]) {
    animation: none;
  }
}

.julia-chat-fab__badge[hidden] {
  display: none !important;
}

.julia-chat-fab--compact {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 6px 20px rgba(8, 40, 25, 0.22);
}

.julia-chat-fab--pill {
  gap: 12px;
  min-height: 56px;
  padding: 8px 22px 8px 8px;
  border-radius: 360px;
  background: var(--julia-chat-accent, var(--hs-aqua));
  color: var(--julia-chat-accent-text, var(--accent-ink, #0e1b11));
  font-family: var(--font, var(--hs-font, Inter, system-ui, sans-serif));
  font-weight: 700;
  font-size: 15px;
  box-shadow:
    0 8px 24px rgba(67, 229, 164, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.julia-chat-fab[hidden] {
  display: none !important;
}

.julia-chat-fab .julia-chat-panel-avatar {
  position: relative;
  overflow: hidden;
}

.julia-chat-fab--compact .julia-chat-panel-avatar {
  width: 48px;
  height: 48px;
  pointer-events: none;
  box-shadow: 0 0 0 2.5px var(--julia-chat-accent, var(--hs-aqua));
}

.julia-chat-fab--pill .julia-chat-panel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hs-everglade-900, #0e1b11);
  flex-shrink: 0;
  pointer-events: none;
  box-shadow: none;
}

.julia-chat-fab .julia-chat-panel-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.julia-chat-fab__label {
  white-space: nowrap;
  line-height: 1.2;
}

.julia-chat-fab__label-short {
  display: none;
  white-space: nowrap;
  line-height: 1.2;
}

.julia-chat-fab--compact:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(8, 40, 25, 0.28);
}

.julia-chat-fab--compact:hover .julia-chat-panel-avatar {
  box-shadow: 0 0 0 2.5px var(--julia-chat-accent, var(--hs-aqua-hover));
}

.julia-chat-fab--pill:hover {
  filter: brightness(0.96);
}

.julia-chat-fab--pill:active {
  transform: scale(0.97);
}

@media (max-width: 520px) {
  /* Lander / public: keep text+avatar pill (same as desktop), not icon-only */
  .julia-chat-fab--pill {
    gap: 10px;
    min-height: 52px;
    padding: 6px 16px 6px 6px;
    font-size: 14px;
    max-width: calc(100vw - 32px);
  }

  .julia-chat-fab--pill .julia-chat-panel-avatar {
    width: 40px;
    height: 40px;
  }

  .julia-chat-fab__label {
    display: none;
  }

  .julia-chat-fab__label-short {
    display: inline;
  }
}

/* Workspace mobile: FAB floats above footer; open as full sheet */
@media (max-width: 899px) {
  .ws-julia-dock .julia-chat-fab--pill,
  .ws-julia-dock .ws-julia-fab.julia-chat-fab--pill {
    padding: 0;
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    border-radius: 50%;
    gap: 0;
    justify-content: center;
  }

  .ws-julia-dock .julia-chat-fab--pill .julia-chat-panel-avatar,
  .ws-julia-dock .ws-julia-fab.julia-chat-fab--pill .julia-chat-panel-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  .ws-julia-dock .julia-chat-fab__label,
  .ws-julia-dock .julia-chat-fab__label-short {
    display: none !important;
  }

  /* Pin with CSS bottom so it stays glued to the toolbar across browser chrome changes */
  .ws-julia-dock.ws-julia-dock--fab-docked {
    left: auto !important;
    top: auto !important;
    right: 16px !important;
    bottom: calc(
      96px + env(safe-area-inset-bottom, 0px) + var(--hs-browser-chrome-bottom, 0px)
    ) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  /* Mobile: Julia is in the footer — hide floating FAB when closed */
  .ws-julia-dock.ws-julia-dock--footer-julia,
  .julia-chat-dock.julia-chat-dock--footer-julia {
    display: none !important;
  }

  .ws-julia-dock.ws-julia-dock--mobile-sheet.is-open {
    display: flex !important;
    z-index: 12050;
    pointer-events: auto;
  }

  .ws-julia-dock.ws-julia-dock--mobile-sheet.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Near-neutral, not everglade: this sheet opens over the studio canvas
       (aqua) and the console canvas (jasmine), and a green scrim over the
       purple one goes muddy. */
    background: rgba(20, 22, 30, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
    pointer-events: auto;
  }

  .ws-julia-dock.ws-julia-dock--mobile-sheet.is-open {
    pointer-events: none;
  }

  .ws-julia-dock.ws-julia-dock--mobile-sheet.is-open .ws-julia-panel {
    pointer-events: auto;
    box-shadow: 0 -18px 48px -20px rgba(14, 27, 17, 0.2);
    transition:
      height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      max-height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .ws-julia-dock.ws-julia-dock--mobile-sheet.is-open .ws-julia-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -18px 48px -20px rgba(8, 15, 52, 0.35);
  }

  .ws-julia-dock.ws-julia-dock--composer-expanded.is-open .ws-julia-panel {
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    box-shadow: none !important;
  }

  .ws-julia-dock.ws-julia-dock--composer-expanded.is-open::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  body.ws-julia-sheet-open,
  body.ws-julia-composer-fullscreen {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.hs-portal-body.ws-julia-sheet-open .hs-portal-page,
  body.hs-portal-body.ws-julia-sheet-open .hs-portal-shell {
    overflow: hidden;
    touch-action: none;
  }

  body.ws-julia-composer-fullscreen .hs-portal-footer-nav,
  body.ws-julia-composer-fullscreen .hs-portal-topbar {
    visibility: hidden;
    pointer-events: none;
  }

  body.ws-julia-sheet-open .hs-portal-footer-nav {
    visibility: hidden;
    pointer-events: none;
  }

  body.ws-julia-sheet-open .ws-julia-dock,
  body.ws-julia-sheet-open .ws-julia-dock * {
    touch-action: manipulation;
  }

  body.ws-julia-sheet-open .ws-julia-dock .julia-chat-panel__thread-wrap {
    touch-action: pan-y;
  }

  body.hs-portal-more-open .ws-julia-dock--fab-docked,
  body.hs-portal-agents-open .ws-julia-dock--fab-docked {
    opacity: 0;
    pointer-events: none;
  }
}

.julia-chat-panel {
  width: min(420px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 24px));
  background: var(--julia-chat-card-bg, #fff);
  border: 1px solid #E7EDEA;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(8, 40, 25, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Stable panel height for floating embed — avoids jump when toggling chat/voice */
.julia-chat-dock:not(.julia-chat-dock--inline) .julia-chat-panel {
  height: min(480px, calc(100dvh - 96px));
  min-height: min(480px, calc(100dvh - 96px));
}

.julia-chat-panel[hidden] {
  display: none !important;
}

.julia-chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #E7EDEA;
  background: var(--julia-chat-card-head-bg, #FAFCFB);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.julia-chat-panel__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.julia-chat-panel__titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.julia-chat-panel__identity h2 {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.julia-chat-panel__identity--solo h2 {
  font-size: 18px;
  line-height: 1.15;
}

.julia-chat-panel__identity .sub {
  margin: 2px 0 0;
  font-size: 12px;
}

.julia-chat-panel__identity .sub[hidden] {
  display: none !important;
}

.julia-chat-avatar-menu {
  position: relative;
  flex-shrink: 0;
}

.julia-chat-avatar-menu__btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.julia-chat-avatar-menu__btn:active .julia-chat-panel-avatar {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .julia-chat-avatar-menu__btn:active .julia-chat-panel-avatar {
    transform: none;
  }
}

.julia-chat-avatar-menu__pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  min-width: 124px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E7EDEA;
  box-shadow: 0 10px 28px rgba(14, 27, 17, 0.14), 0 2px 8px rgba(14, 27, 17, 0.06);
}

.julia-chat-avatar-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hs-ink, #0e1b11);
  font-family: var(--hs-font-ui, inherit);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.julia-chat-avatar-menu__item:hover,
.julia-chat-avatar-menu__item:focus-visible {
  background: rgba(14, 27, 17, 0.06);
}

.julia-chat-panel-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: #16261c;
  flex-shrink: 0;
}

.julia-chat-panel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.julia-chat-panel-avatar--emoji,
.julia-chat-panel-avatar--icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eef6f1;
  color: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-panel-avatar__emoji {
  display: block;
  line-height: 1;
  font-size: 1.15em;
  user-select: none;
  pointer-events: none;
}

.julia-chat-panel-avatar__icon {
  display: grid;
  place-items: center;
  width: 62%;
  height: 62%;
  color: inherit;
}

.julia-chat-panel-avatar__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.julia-chat-fab .julia-chat-panel-avatar--emoji,
.julia-chat-fab .julia-chat-panel-avatar--icon {
  background: #eef6f1;
}

.julia-chat-fab--pill .julia-chat-panel-avatar--emoji .julia-chat-panel-avatar__emoji,
.julia-chat-fab--compact .julia-chat-panel-avatar--emoji .julia-chat-panel-avatar__emoji {
  font-size: 1.35em;
}

.julia-chat-minimize {
  flex-shrink: 0;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6b66;
  background: #F4F5F3;
  cursor: pointer;
  transition: background 0.18s;
  padding: 0;
}

.julia-chat-minimize:hover {
  background: #E9EAE6;
  color: #3d4843;
}

.julia-chat-minimize svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.julia-chat-minimize__x {
  display: none;
}

.julia-chat-minimize--dismiss .julia-chat-minimize__chev {
  display: none;
}

.julia-chat-minimize--dismiss .julia-chat-minimize__x {
  display: block;
}

.julia-chat-panel__head-end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.julia-chat-panel__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.julia-chat-header-action {
  flex-shrink: 0;
  border: 1px solid #D5DBD7;
  background: #F4F5F3;
  color: #3d4843;
  font-family: var(--hs-font-ui, inherit);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
  touch-action: manipulation;
}

.julia-chat-header-action:hover {
  background: #E9EAE6;
  color: #1f2925;
}

.julia-chat-header-action--danger {
  color: #9b2c2c;
  border-color: #f0d0d0;
  background: #fff5f5;
}

.julia-chat-header-action--danger:hover {
  background: #ffe8e8;
  color: #822727;
}

.julia-chat-panel__thread .hs-chat-msg {
  position: relative;
}

.julia-chat-msg__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.julia-chat-panel__thread .hs-chat-msg.outbound .julia-chat-msg__actions {
  justify-content: flex-end;
}

.julia-chat-panel__thread .hs-chat-msg:hover .julia-chat-msg__actions,
.julia-chat-panel__thread .hs-chat-msg:focus-within .julia-chat-msg__actions {
  opacity: 1;
  pointer-events: auto;
}

.julia-chat-tapback {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.julia-chat-tapback:hover {
  background: rgba(0, 0, 0, 0.06);
}

.julia-chat-tapback:disabled {
  opacity: 0.45;
  cursor: wait;
}

@media (max-width: 680px) {
  .julia-chat-header-action {
    min-height: 36px;
    padding: 0 12px;
  }

  .julia-chat-msg__actions {
    opacity: 1;
    pointer-events: auto;
  }

  .julia-chat-tapback {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }
}

/* Agent Lab: thinking steps + pricing + tap-to-bug sheet inside chat */
.julia-chat-panel {
  position: relative;
}

.julia-chat-thread--timeline .julia-chat-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.julia-chat-thread--timeline .hs-adm-agent-ix__event-row {
  margin: 0;
}

.julia-chat-thread--timeline .hs-adm-agent-ix__event--thinking {
  width: 100%;
  text-align: left;
}

.julia-chat-thread--timeline .hs-chat-msg.julia-chat-msg--tappable {
  cursor: pointer;
}

/* Same bubbles as the lander thread: blue sent, white received, iOS tail.
   Timeline mode only — branded embeds keep --julia-chat-accent. */
.julia-chat-panel__thread.julia-chat-thread--timeline .hs-chat-msg .hs-chat-bubble {
  border-radius: 18px;
}

.julia-chat-panel__thread.julia-chat-thread--timeline .hs-chat-msg.inbound .hs-chat-bubble {
  background: linear-gradient(180deg, #2aa3ff, #007aff);
  border: none;
  color: #ffffff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 8px 20px -10px rgba(0, 60, 130, 0.5);
}

.julia-chat-panel__thread.julia-chat-thread--timeline
  .hs-chat-msg.inbound
  .hs-chat-bubble
  a.julia-chat-link {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

.julia-chat-panel__thread.julia-chat-thread--timeline .hs-chat-msg.outbound .hs-chat-bubble {
  background: #ffffff;
  border: 1px solid #dbe4e8;
  color: var(--hs-ink, #0e1b11);
  border-bottom-left-radius: 6px;
  box-shadow: 0 4px 14px -8px rgba(14, 27, 17, 0.28);
}

/* Reply with its thinking card tucked behind — tag stays visible above it */
.julia-chat-thread--timeline .hs-chat-msg.julia-chat-msg--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.julia-chat-thread--timeline .hs-chat-msg.inbound.julia-chat-msg--stacked {
  align-items: flex-end;
}

.julia-chat-thread--timeline .hs-chat-msg.julia-chat-msg--stacked .hs-chat-bubble,
.julia-chat-thread--timeline .hs-chat-msg.julia-chat-msg--stacked .hs-chat-time {
  position: relative;
  z-index: 1;
}

.julia-chat-thread--timeline .hs-chat-msg.julia-chat-msg--tappable:hover .hs-chat-bubble,
.julia-chat-thread--timeline .hs-chat-msg.julia-chat-msg--tappable.is-selected .hs-chat-bubble {
  outline: 2px solid rgba(0, 122, 255, 0.35);
  outline-offset: 1px;
}

.julia-chat-thread--timeline .hs-chat-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

.julia-chat-thread--timeline .hs-adm-agent-ix__usage {
  display: inline-block;
  flex: 0 0 auto;
}

.julia-chat-thread--timeline .hs-chat-msg.inbound .hs-adm-agent-ix__usage-body {
  left: auto;
  right: 0;
}

.julia-chat-tl-sheet.hs-adm-agent-ix__sheet {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
}

.julia-chat-tl-sheet .hs-adm-agent-ix__sheet-card {
  max-height: calc(100% - 24px);
  width: calc(100% - 24px);
  margin: 12px;
}

.julia-chat-tl-fb {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e7edea;
  background: #f7f9f8;
  color: var(--ink-3, #5a6b60);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.julia-chat-tl-fb:hover {
  background: #eef3ef;
  color: var(--ink-2, #24352a);
}

.julia-chat-tl-fb--bug.is-active {
  border-color: rgba(200, 80, 60, 0.45);
  background: rgba(200, 80, 60, 0.1);
  color: #a33a28;
}

.julia-chat-tl-fb--tone.is-active {
  border-color: rgba(15, 118, 110, 0.45);
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
}

.julia-chat-tl-fb-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3, #5a6b60);
}

.julia-chat-panel__thread-wrap {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--julia-chat-card-thread-bg, #F4F7F5);
  display: grid;
  grid-template: 1fr / 1fr;
}

.julia-chat-panel__thread,
.julia-chat-voice-pane {
  grid-area: 1 / 1;
  min-height: 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.julia-chat-panel__thread-wrap > .julia-chat-panel__thread[hidden],
.julia-chat-panel__thread-wrap > .julia-chat-voice-pane[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.julia-chat-panel__thread-wrap > .julia-chat-panel__thread:not([hidden]),
.julia-chat-panel__thread-wrap > .julia-chat-voice-pane:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.julia-chat-panel__thread {
  overflow-y: auto;
  padding: 16px 14px 20px;
  align-items: stretch;
  text-align: left;
}

.julia-chat-dock--embed .julia-chat-panel__thread .hs-chat-bubble {
  text-align: left;
}

.julia-chat-panel__thread .hs-chat-msg {
  margin-bottom: 12px;
  max-width: min(88%, 340px);
  width: fit-content;
}

.julia-chat-panel__thread .hs-chat-msg.inbound {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.julia-chat-panel__thread .hs-chat-msg.outbound {
  align-self: flex-start;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.julia-chat-panel__thread .hs-chat-bubble {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.julia-chat-panel__thread .hs-chat-bubble a.julia-chat-link {
  color: #1d4032;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.julia-chat-panel__thread .hs-chat-bubble a.julia-chat-link:hover {
  color: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-panel__thread .hs-chat-msg.inbound .hs-chat-bubble a.julia-chat-link {
  color: var(--julia-chat-accent-text, var(--hs-everglade-900, #0e1b11));
}

.julia-chat-panel__thread .hs-chat-msg.inbound .hs-chat-bubble {
  background: var(--julia-chat-accent, var(--hs-aqua));
  color: var(--julia-chat-accent-text, var(--hs-ink));
  border: none;
  border-bottom-right-radius: 5px;
}

.julia-chat-panel__thread .hs-chat-msg.outbound .hs-chat-bubble {
  background: #fff;
  border: 1px solid #E7EDEA;
  border-bottom-left-radius: 5px;
}

.julia-chat-panel__thread .hs-chat-time {
  font-size: 12px;
  color: var(--hs-text-muted);
  margin-top: 3px;
}

.julia-chat-panel__thread .hs-chat-bubble__block + .hs-chat-bubble__block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(26, 36, 32, 0.1);
}

.julia-chat-panel__thread .hs-chat-msg.outbound .hs-chat-bubble__block + .hs-chat-bubble__block {
  border-top-color: rgba(26, 36, 32, 0.14);
}

.julia-chat-panel__thread .hs-chat-bubble__lang {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

.julia-chat-panel__thread .hs-chat-msg.outbound .hs-chat-bubble__lang {
  color: rgba(26, 36, 32, 0.62);
}

.julia-chat-panel__thread .hs-chat-bubble__block--translation {
  color: var(--hs-text-muted);
  font-size: 13px;
}

.julia-chat-panel__thread .hs-chat-msg.outbound .hs-chat-bubble__block--translation {
  color: rgba(26, 36, 32, 0.78);
}

.hs-activity-detail__transcript.julia-chat-panel__thread,
.hs-activity-detail__transcript.hs-conv-transcript-thread,
.hs-voice-playback__transcript.julia-chat-panel__thread,
.hs-voice-playback__transcript.hs-conv-transcript-thread {
  height: auto;
  min-height: 12rem;
  max-height: none;
}

.julia-chat-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--hs-text-muted);
  font-size: 14px;
}

.julia-chat-empty p {
  margin: 0 0 8px;
}

.julia-chat-panel__foot {
  padding: 12px 14px 14px;
  border-top: 1px solid #E7EDEA;
  background: var(--julia-chat-card-bg, #fff);
}

.julia-chat-status {
  margin: 0 0 8px;
  min-height: 1.1em;
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(14, 27, 17, 0.55);
  font-style: italic;
}

.julia-chat-status[hidden] {
  display: none !important;
}

.julia-chat-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.julia-chat-attach-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #E7EDEA;
  border-radius: 12px;
  background: #FAFCFB;
  color: #3D5248;
  cursor: pointer;
}

.julia-chat-attach-btn:hover:not(:disabled) {
  background: #F0F5F2;
  border-color: #C9D8D0;
}

.julia-chat-attach-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.julia-chat-voice-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #E7EDEA;
  border-radius: 12px;
  background: #FAFCFB;
  color: #3D5248;
  cursor: pointer;
}

.julia-chat-voice-btn:hover:not(:disabled) {
  background: #F0F5F2;
  border-color: #C9D8D0;
}

.julia-chat-voice-btn.is-active {
  background: var(--julia-chat-accent, #43E5A4);
  border-color: var(--julia-chat-accent, #43E5A4);
  color: #0B1F17;
}

.julia-chat-voice-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.julia-chat-voice-pane {
  overflow: hidden;
}

.julia-chat-voice-mount {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.julia-chat-voice-pane .hs-callcard--voice-embed,
.julia-chat-voice-mount .hs-callcard--voice-embed {
  flex: 1;
  min-height: 0 !important;
  height: auto;
  max-height: none;
  padding: 16px 14px 12px;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
}

.julia-chat-voice-pane .hs-callcard--voice-embed .call-id,
.julia-chat-voice-pane .hs-callcard--voice-embed .call-top,
.julia-chat-voice-mount .hs-callcard--voice-embed .call-id,
.julia-chat-voice-mount .hs-callcard--voice-embed .call-top {
  display: none;
}

.julia-chat-voice-pane .hs-callcard--voice-embed .call-tx,
.julia-chat-voice-mount .hs-callcard--voice-embed .call-tx {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin-bottom: 4px;
  padding-bottom: 0;
}

.julia-chat-voice-pane .hs-callcard--voice-embed .call-action-wrap,
.julia-chat-voice-mount .hs-callcard--voice-embed .call-action-wrap {
  padding-top: 0;
  margin-top: auto;
  flex-shrink: 0;
}

.julia-chat-voice-pane .hs-callcard--voice-embed #hs-voice-status,
.julia-chat-voice-mount .hs-callcard--voice-embed #hs-voice-status {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.julia-chat-panel__identity .sub.julia-chat-voice-status--ok {
  color: var(--pass, var(--hs-success, #1d8a5b));
}

.julia-chat-panel__identity .sub.julia-chat-voice-status--err {
  color: var(--fail, var(--hs-danger, #c62828));
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__identity .sub.julia-chat-voice-status--ok {
  color: var(--pass, var(--hs-success, #1d8a5b));
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__identity .sub.julia-chat-voice-status--err {
  color: var(--fail, var(--hs-danger, #c62828));
}

/* Voice mode — keep white panel shell (readable back-to-chat controls) */
.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) {
  --julia-voice-bg: #ffffff;
  --julia-voice-border: #e7edea;
  --julia-voice-text: #17241c;
  --julia-voice-muted: rgba(14, 27, 17, 0.55);
  background: var(--julia-voice-bg);
  border-color: var(--julia-voice-border);
  color: var(--julia-voice-text);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__head {
  background: var(--julia-voice-bg);
  border-bottom-color: var(--julia-voice-border);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__identity h2 {
  color: var(--julia-voice-text);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__identity .sub {
  color: var(--julia-voice-muted);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel-avatar {
  background: #e8eee9;
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-minimize {
  background: #f4f7f5;
  color: var(--julia-voice-muted);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-minimize:hover {
  background: #e8eee9;
  color: var(--julia-voice-text);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__thread-wrap {
  background: var(--julia-voice-bg);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-panel__foot {
  background: var(--julia-voice-bg);
  border-top-color: var(--julia-voice-border);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-form input[type="text"] {
  background: #fff;
  border-color: #e7edea;
  color: #17241c;
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-attach-btn,
.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-voice-btn {
  background: #f4f7f5;
  border-color: #d7e0db;
  color: #17241c;
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-attach-btn svg,
.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-voice-btn svg {
  stroke: currentColor;
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-attach-btn:hover:not(:disabled),
.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-voice-btn:hover:not(:disabled) {
  background: #e8eee9;
  border-color: #c9d8d0;
  color: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-voice-btn.is-active {
  background: var(--julia-chat-accent, #43E5A4);
  border-color: var(--julia-chat-accent, #43E5A4);
  color: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-panel--voice:not(.julia-chat-panel--voice-match) .julia-chat-voice-btn.is-active svg {
  stroke: currentColor;
}

.julia-chat-voice-mount .call-action,
.julia-chat-voice-pane .call-action,
.hs-callcard--voice-embed .call-action {
  border-radius: 999px !important;
  appearance: none;
  -webkit-appearance: none;
}

.hs-chatbot-voice-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.hs-chatbot-voice-row__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-chatbot-field .hs-agent-switch {
  display: inline-flex;
  margin-bottom: 0;
}

.hs-chatbot-voice-row__head .hs-agent-switch {
  flex-shrink: 0;
  margin-top: 2px;
}

.hs-chatbot-voice-row__copy .hs-chatbot-field-hint {
  margin: 4px 0 0;
}

.hs-chatbot-voice-row__note {
  margin: 6px 0 0;
}

.hs-chatbot-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.hs-chatbot-editor-layout__live {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.hs-chatbot-launcher-strip {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: linear-gradient(180deg, #f9faf6 0%, #eef3ef 100%);
}

.hs-chatbot-launcher-strip__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #5a6b62);
  text-transform: uppercase;
}

.hs-chatbot-launcher-strip .hs-chatbot-fab-slot {
  display: flex;
  justify-content: flex-end;
  min-height: 3rem;
}

.hs-chatbot-editor-layout__settings {
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: var(--hs-bg-sunken, #f6f8f5);
}

.hs-chatbot-editor-layout__settings .hs-chatbot-editor__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  width: 100%;
}

.hs-chatbot-settings-collapse {
  border-radius: 14px;
  border: 1px solid var(--hair, #e7edea);
  background: var(--panel, #fff);
  padding: 0.85rem 1rem;
}

.hs-chatbot-settings-collapse > summary {
  list-style: none;
  cursor: pointer;
}

.hs-chatbot-settings-collapse > summary::-webkit-details-marker {
  display: none;
}

.hs-chatbot-settings-collapse__summary .hs-chatbot-editor__head {
  position: relative;
  padding-right: 1.5rem;
}

.hs-chatbot-settings-collapse__summary .hs-chatbot-editor__head::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ink-3, #7a8a82);
  border-bottom: 2px solid var(--ink-3, #7a8a82);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.hs-chatbot-settings-collapse[open] > .hs-chatbot-settings-collapse__summary .hs-chatbot-editor__head::after {
  top: 0.55rem;
  transform: rotate(225deg);
}

.hs-chatbot-settings-collapse__body {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hair, #e7edea);
}

.hs-chatbot-appearance {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hs-chatbot-appearance__block {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair, #e7edea);
}

.hs-chatbot-appearance__block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hs-chatbot-appearance__block--voice {
  padding-top: 0.65rem;
}

.hs-chatbot-appearance__heading {
  margin: 0 0 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted, #5a6b62);
}

.hs-chatbot-brand-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.hs-chatbot-brand-row__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  border: 1px solid var(--hair, #e7edea);
  background: #fff;
}

.hs-chatbot-brand-row__fields {
  flex: 1;
  min-width: 0;
}

.hs-chatbot-colors-row--single {
  grid-template-columns: 1fr;
  max-width: 11rem;
}

.hs-chatbot-theme-option {
  cursor: pointer;
}

.hs-chatbot-theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hs-chatbot-brand-row__fields > label,
.hs-chatbot-brand-row__fields > .hs-chatbot-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hs-chatbot-brand-row__fields .hs-btn {
  margin-top: 0.15rem;
}

.hs-chatbot-colors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.hs-chatbot-color-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hs-chatbot-messages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.hs-chatbot-messages-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hs-chatbot-field--message {
  margin: 0;
}

.hs-chatbot-field--message > label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0e1b11);
}

.hs-chatbot-message-input.hs-input,
textarea.hs-chatbot-message-input.hs-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 10px;
}

textarea.hs-chatbot-message-input.hs-input {
  min-height: 3.75rem;
  resize: vertical;
}

.hs-chatbot-field--message .hs-chatbot-field-hint {
  margin: 0.45rem 0 0;
  line-height: 1.4;
  font-size: 12.5px;
}

.hs-chatbot-preview-section__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.hs-chatbot-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.55rem;
  max-width: 420px;
}

.hs-chatbot-preview-toolbar .sub {
  margin: 0;
}

.hs-chatbot-field--compact {
  margin-bottom: 0;
}

.hs-chatbot-field--compact + .hs-chatbot-field--compact,
.hs-chatbot-field--compact .hs-chatbot-field-hint {
  margin-top: 4px;
}

.hs-chatbot-editor-sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hs-chatbot-editor-section__title {
  margin: 0 0 0.65rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0e1b11);
}

.hs-chatbot-editor-section--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}

.hs-chatbot-voice-theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-top: 0.35rem;
}

.hs-chatbot-voice-theme-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.hs-chatbot-voice-theme-option input {
  margin: 0;
}

.hs-chatbot-embed-block {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair, #e7edea);
}

@media (max-width: 960px) {
  .hs-chatbot-editor-section--grid,
  .hs-chatbot-messages-grid,
  .hs-chatbot-colors-row {
    grid-template-columns: 1fr;
  }
}

.hs-chatbot-customize-box .hs-chatbot-settings-inner.hs-portal-panel-card,
.hs-chatbot-customize-box .hs-chatbot-embed.hs-portal-panel-card {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  margin-top: 0.75rem;
}

.hs-chatbot-customize-box .hs-chatbot-settings-inner.hs-portal-panel-card:first-child {
  margin-top: 0;
}

.julia-chat-attach-preview {
  margin-bottom: 8px;
}

.julia-chat-attach-preview__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #E7EDEA;
  border-radius: 12px;
  background: #FAFCFB;
}

.julia-chat-attach-preview__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.julia-chat-attach-preview__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.julia-chat-attach-preview__meta {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.julia-chat-attach-preview__meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.julia-chat-attach-preview__kb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: #5A6B62;
  cursor: pointer;
}

.julia-chat-attach-preview__remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5A6B62;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.julia-chat-attach-preview__remove:hover {
  background: rgba(14, 27, 17, 0.06);
}

.julia-chat-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #E7EDEA;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}

/* iOS Safari zooms the page when a sub-16px field takes focus and never zooms
   back out, which strands the Send button off-screen. `hs-mobile.css` sets this
   floor document-wide on our own pages, but the third-party embed injects this
   sheet alone — so the widget carries its own copy. Keep the two in sync. */
@media (pointer: coarse) {
  .julia-chat-form input,
  .julia-chat-form textarea {
    font-size: 16px;
  }

  /* Kills double-tap-to-zoom inside the widget on host pages we don't control.
     Descendants that set their own `touch-action` (the drag handle, the
     transcript's `pan-y`) still win. */
  .julia-chat-dock {
    touch-action: manipulation;
  }
}

.julia-chat-form input:focus {
  outline: none;
  border-color: var(--hs-everglade-400, #2d6b52);
  box-shadow: 0 0 0 3px rgba(67, 229, 164, 0.15);
}

/* The label and hover here were written for an aqua fill — an ink-on-aqua
   label over what is now an ink fill, which is ink on ink. */
.julia-chat-form .hs-btn.hs-btn-primary {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
}

.julia-chat-form .hs-btn.hs-btn-primary:hover:not(:disabled) {
  background: var(--hs-everglade-800, #122920);
  border-color: var(--hs-everglade-800, #122920);
}

.julia-chat-dock--inline {
  position: relative;
  z-index: 1;
}

.julia-chat-dock--inline .julia-chat-fab {
  display: none !important;
}

.julia-chat-dock--inline .julia-chat-panel {
  width: 100%;
  height: 440px;
  min-height: 440px;
  max-height: 440px;
  box-shadow: none;
}

.julia-chat-dock--inline .julia-chat-panel__head {
  cursor: default;
}

.julia-chat-dock--inline .julia-chat-minimize {
  display: none;
}

.julia-chat-dock--inline.julia-chat-dock--stage-mobile-fullscreen .julia-chat-minimize {
  display: flex !important;
}

.hs-chatbot-page {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
}

.hs-chatbot-section {
  margin: 0;
}

.hs-chatbot-preview-section {
  padding: 0;
  overflow: visible;
}

.hs-chatbot-preview-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-4);
  flex-wrap: wrap;
  padding: var(--hs-space-5) var(--hs-space-5) var(--hs-space-3);
}

.hs-chatbot-preview-section__title {
  margin: 0;
  padding: 0;
  font-family: var(--hs-font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hs-neutral-800);
}

.hs-chatbot-preview-section .hs-chatbot-preview-hint {
  margin: var(--hs-space-3) var(--hs-space-5) var(--hs-space-4);
}

.hs-chatbot-stage {
  position: relative;
  min-height: 460px;
}

.hs-chatbot-demo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  padding: 28px 24px 22px;
  min-height: 460px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(67, 229, 164, 0.14), transparent 62%),
    linear-gradient(180deg, #f9faf6 0%, #eef3ef 100%);
}

.hs-chatbot-demo__panel {
  flex: 1 1 380px;
  max-width: 420px;
  min-width: 0;
}

.hs-chatbot-preview-frame {
  width: 100%;
  border: 1px solid #ecedea;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 -4px 24px rgba(8, 15, 52, 0.08),
    0 2px 8px rgba(8, 15, 52, 0.04);
}

.hs-chatbot-demo__aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 2px;
}

.hs-chatbot-fab-slot .julia-chat-fab {
  position: static;
  transform: none !important;
  pointer-events: none;
  cursor: default;
}

.hs-chatbot-editor {
  padding: var(--hs-space-5);
}

.hs-chatbot-editor[hidden] {
  display: none !important;
}

.hs-chatbot-demo[hidden] {
  display: none !important;
}

.hs-chatbot-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-4);
}

.hs-chatbot-editor__head h3 {
  margin: 0 0 4px;
  font-size: 1.125rem;
}

.hs-chatbot-editor__actions {
  display: flex;
  gap: var(--hs-space-2);
  flex-shrink: 0;
}

.hs-chatbot-editor__grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .hs-chatbot-editor__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hs-chatbot-editor__grid .hs-chatbot-field--full {
    grid-column: 1 / -1;
  }
}

.hs-chatbot-field--full {
  grid-column: 1 / -1;
}

.hs-chatbot-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
}

.hs-chatbot-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (max-width: 560px) {
  .hs-chatbot-launcher-grid {
    grid-template-columns: 1fr;
  }
}

.hs-chatbot-launcher-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--hs-neutral-200);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hs-chatbot-launcher-option.is-selected {
  border-color: var(--ink, #0e1b11);
  box-shadow: inset 0 0 0 1px var(--ink, #0e1b11);
  background: #fff;
}

.hs-chatbot-launcher-option__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #5a6b62);
}

.hs-chatbot-launcher-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hs-chatbot-launcher-option__stage {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 2.5rem;
  padding: 0.35rem 0.5rem;
  background: linear-gradient(180deg, #f9faf6 0%, #eef3ef 100%);
  border-radius: 8px;
}

.hs-chatbot-launcher-option__stage .julia-chat-fab {
  position: static;
  transform: none !important;
  pointer-events: none;
  cursor: default;
  box-shadow: 0 8px 20px rgba(8, 40, 25, 0.12);
}

.hs-chatbot-field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hs-chatbot-embed__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-4);
  flex-wrap: wrap;
}

.hs-chatbot-embed__head h3 {
  margin: 0 0 4px;
}

.hs-chatbot-embed-panel {
  margin-top: var(--hs-space-4);
}

.hs-chatbot-embed-panel[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .hs-chatbot-demo {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 16px 16px;
    min-height: 0;
  }

  .hs-chatbot-demo__panel {
    flex: 1 1 auto;
    max-width: none;
  }

  .hs-chatbot-demo__aside {
    align-items: center;
    justify-content: center;
  }

  .hs-chatbot-launcher-grid {
    grid-template-columns: 1fr;
  }
}

.hs-chatbot-embed-actions {
  margin: var(--hs-space-3) 0 0;
}

.hs-chatbot-field--advanced {
  margin-bottom: 10px;
}

.hs-chatbot-preview-wrap {
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  min-height: 440px;
  box-shadow: none;
}

.hs-chatbot-preview-wrap .julia-chat-dock--inline {
  width: 100%;
}

.hs-chatbot-preview-wrap .julia-chat-dock--inline .julia-chat-panel {
  height: 440px;
  max-height: 440px;
  min-height: 440px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hs-chatbot-preview-wrap .julia-chat-dock--inline .julia-chat-panel__thread-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.hs-chatbot-preview-wrap .julia-chat-dock--inline .julia-chat-panel__thread {
  max-height: none;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
}

.hs-agent-preview-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  margin-top: 0;
}

.hs-agent-preview-stack__preview {
  width: 100%;
}

.hs-agent-preview-stack__preview #hs-voice-call-mount {
  max-width: 480px;
  margin: 0 auto;
}

.hs-agent-preview-stack__settings {
  margin: 0;
}

.hs-agent-subtabs-wrap {
  margin-top: var(--hs-space-4);
  justify-content: flex-start;
  max-width: 100%;
}

.hs-agent-subtabs {
  max-width: 20rem;
}

.hs-agent-subtabs.sgc--raised button.is-on {
  color: var(--accent-2, var(--hs-aqua-deep));
  font-weight: 700;
}

.hs-agent-subtab-panel {
  margin-top: 0;
}

.hs-agent-pane > .hs-agent-page-head + .hs-agent-subtab-panel {
  margin-top: 0;
}

.hs-phone-ai-number {
  padding: var(--hs-space-4);
  border-radius: var(--hs-radius-md, 8px);
  background: var(--hs-surface-muted, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--hs-border, #e5e5e5);
  text-align: center;
  margin-bottom: var(--hs-space-4);
}

.hs-phone-business-banner {
  margin: var(--hs-space-3) 0 0;
  padding: var(--hs-space-3) var(--hs-space-4);
  border-radius: var(--hs-radius-md, 8px);
  background: color-mix(in srgb, var(--hs-accent, #2a9d8f) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hs-accent, #2a9d8f) 28%, var(--hs-border, #e5e5e5));
}

.hs-phone-business-banner p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--hs-text, inherit);
}

.hs-phone-agent-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: var(--hs-space-3) 0 var(--hs-space-4);
  padding: var(--hs-space-3) var(--hs-space-4);
  border-radius: var(--hs-radius-md, 8px);
  background: var(--hs-surface-muted, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--hs-border, #e5e5e5);
}

.hs-phone-agent-header--unassigned {
  flex-direction: column;
  align-items: stretch;
}

.hs-phone-agent-header--unassigned:not(.is-provisioning) {
  flex-direction: row;
  align-items: center;
}

.hs-phone-agent-header--assigned .hs-phone-ai-number {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
}

.hs-phone-agent-header__intro {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-phone-agent-header__hint {
  margin: 0.25rem 0 0;
}

.hs-phone-agent-header__provision {
  width: 100%;
  flex: 1 1 100%;
}

.hs-phone-agent-header.is-provisioning {
  flex-direction: column;
  align-items: stretch;
}

.hs-phone-agent-header.is-provisioning .hs-phone-agent-header__intro {
  margin-bottom: 0.25rem;
}

.hs-phone-agent-header.is-provisioning .hs-phone-agent-header__hint {
  display: none;
}

.hs-phone-agent-header__provision .hs-phone-number-block {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.hs-phone-agent-header--assigned .hs-phone-ai-number__value {
  font-size: 1.15rem;
  margin: 0;
  color: #111;
}

.hs-phone-agent-header--assigned .hs-phone-ai-number__label {
  color: #111;
}

.hs-phone-ai-number__value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.35rem;
}

.hs-phone-agent-header__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #111;
  cursor: pointer;
  flex-shrink: 0;
}

.hs-phone-agent-header__copy:hover {
  background: rgba(0, 0, 0, 0.06);
}

.hs-phone-agent-header__copy:active {
  background: rgba(0, 0, 0, 0.1);
}

.hs-phone-agent-header__copy svg {
  display: block;
}

.hs-phone-ai-number__label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--hs-text-muted, #666);
}

.hs-phone-ai-number__value {
  margin: 0.35rem 0 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.hs-phone-preview-tab #hs-voice-call-mount {
  max-width: 480px;
  margin: 0 auto;
}

.hs-phone-preview-tab__label {
  padding-left: 0;
  margin-bottom: 0.75rem;
}

.hs-chatbot-field {
  margin-bottom: 0;
}

.hs-chatbot-field > label:not(.hs-agent-switch) {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.hs-chatbot-accent-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hs-chatbot-accent-swatch {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 3px;
  border: 2px solid var(--hs-neutral-200);
  border-radius: 10px;
  cursor: pointer;
  background: var(--hs-surface);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.hs-chatbot-accent-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}

.hs-chatbot-accent-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.hs-chatbot-accent-swatch::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}

.hs-chatbot-accent-value {
  width: 7.6em;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 2px solid var(--hs-neutral-200);
  border-radius: 10px;
  background: var(--hs-surface);
  box-sizing: border-box;
  font-family: var(--hs-font-mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--hs-neutral-700, #3d4f44);
}

.hs-chatbot-accent-value:focus {
  outline: none;
  border-color: var(--hs-everglade-400, #0d8a58);
  color: var(--ink, #0e1b11);
}

.hs-chatbot-avatar-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hs-chatbot-avatar-row input[type="text"] {
  flex: 1;
}

.hs-chatbot-embed textarea {
  width: 100%;
  min-height: 88px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 10px;
  border: 1px solid #E7EDEA;
  border-radius: 8px;
  background: #FAFCFB;
  resize: vertical;
}

.julia-chat-img {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  border-radius: 10px;
}

.julia-chat-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 14px;
}

.julia-chat-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(14, 27, 17, 0.35);
  animation: julia-chat-dot 1s infinite ease-in-out;
}

.julia-chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.julia-chat-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes julia-chat-dot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 520px) {
  .julia-chat-panel {
    width: min(420px, calc(100vw - 16px));
  }

  .julia-chat-dock:not(.julia-chat-dock--inline) .julia-chat-panel {
    height: min(440px, calc(100dvh - 80px));
    min-height: min(440px, calc(100dvh - 80px));
    max-height: min(440px, calc(100dvh - 80px));
  }

  .julia-chat-dock--inline .julia-chat-panel {
    height: min(400px, calc(100dvh - 80px));
    min-height: min(400px, calc(100dvh - 80px));
    max-height: min(400px, calc(100dvh - 80px));
  }
}

@media (max-width: 680px) {
  .julia-chat-dock--mobile-sheet {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
  }

  .julia-chat-dock--mobile-sheet:not(.julia-chat-dock--inline) .julia-chat-dock__shadow-room {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    justify-content: flex-end;
  }

  .julia-chat-dock--mobile-sheet.julia-chat-dock--composer-expanded.is-open:not(.julia-chat-dock--inline) .julia-chat-dock__shadow-room {
    justify-content: stretch;
  }

  .julia-chat-dock--mobile-sheet .julia-chat-fab {
    margin: 0 16px 0 auto;
    max-width: calc(100vw - 32px);
  }

  .julia-chat-dock--mobile-sheet.is-open {
    z-index: 12050;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: auto;
    overflow: hidden;
  }

  .julia-chat-dock--mobile-sheet.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 17, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
    pointer-events: auto;
  }

  .julia-chat-dock--mobile-sheet.is-open .julia-chat-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 48px -20px rgba(8, 15, 52, 0.35);
    display: flex;
    flex-direction: column;
    transition:
      height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      max-height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      border-radius 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      flex 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .julia-chat-dock--mobile-sheet.is-open:not(.julia-chat-dock--inline):not(.julia-chat-dock--composer-expanded) .julia-chat-panel {
    height: var(--julia-chat-sheet-height, min(72dvh, 520px)) !important;
    max-height: var(--julia-chat-sheet-height, min(72dvh, 520px)) !important;
    min-height: 0 !important;
  }

  .julia-chat-dock--mobile-sheet.is-open .julia-chat-panel__thread-wrap {
    flex: 1 1 auto;
    min-height: 0;
  }

  .julia-chat-dock--mobile-sheet.is-open .julia-chat-panel__foot {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .julia-chat-dock--mobile-sheet.julia-chat-dock--composer-expanded.is-open {
    justify-content: stretch !important;
  }

  .julia-chat-dock--mobile-sheet.julia-chat-dock--composer-expanded.is-open::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .julia-chat-dock--mobile-sheet.julia-chat-dock--composer-expanded.is-open .julia-chat-panel {
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
  }

  .julia-chat-dock--mobile-sheet.julia-chat-dock--composer-expanded.is-open:not(.julia-chat-dock--composer-instant) .julia-chat-panel {
    animation: julia-chat-mobile-rise 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes julia-chat-mobile-rise {
    from {
      transform: translateY(6%);
      opacity: 0.96;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .julia-chat-dock--composer-instant.is-open .julia-chat-panel {
    transition: none !important;
  }

  body.julia-chat-composer-fullscreen,
  body.julia-chat-sheet-open {
    overflow: hidden !important;
    touch-action: none;
  }

  /* Workspace chatbot stage — lander-style fullscreen when typing on mobile */
  body.julia-chat-composer-fullscreen #ws-panel-agent-chatbot .hs-chatbot-preview-stage,
  body.julia-chat-composer-fullscreen #ws-panel-agent-chatbot .hs-chatbot-preview-wrap,
  body.julia-chat-composer-fullscreen #ws-panel-agent-chatbot .hs-chatbot-direct-preview {
    overflow: visible !important;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen {
    position: fixed !important;
    z-index: 12050 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: rgba(10, 14, 12, 0.32) !important;
    pointer-events: auto;
    /* top/height come from JS visualViewport so the keyboard is respected */
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-dock__shadow-room,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-dock__shadow-room {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-fab,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-fab {
    display: none !important;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-stage-hint,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-stage-hint {
    display: none !important;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-minimize,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-minimize {
    display: flex !important;
  }

  #ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-panel,
  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-panel,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-panel {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(219, 228, 223, 0.95) !important;
    box-shadow:
      0 18px 50px rgba(14, 27, 17, 0.22),
      0 2px 8px rgba(14, 27, 17, 0.08) !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen:not(.julia-chat-dock--composer-instant) .julia-chat-panel,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen:not(.julia-chat-dock--composer-instant) .julia-chat-panel {
    animation: julia-chat-mobile-rise 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  #ws-panel-agent-chatbot .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-panel__foot,
  .julia-chat-dock--stage.julia-chat-dock--stage-mobile-fullscreen .julia-chat-panel__foot {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Workspace nav sections */
@media (min-width: 900px) {
  .hs-portal-nav-section {
    margin-top: 0;
  }

  .hs-agents-subtabs-wrap,
  .hs-agents-subtabs {
    display: none !important;
  }
}

.hs-portal-nav-label--static {
  margin: 0.35rem 0 0.15rem;
  padding: 0 10px 0.15rem;
  border-top: none;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* Expanded: text only. Collapsed: show section icon chip. */
.hs-portal-nav-label--static > .hs-portal-nav-ic {
  display: none;
}

@media (min-width: 900px) {
  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-label--static {
    pointer-events: auto;
  }

  .hs-portal-shell.is-nav-collapsed .hs-portal-nav-label--static > .hs-portal-nav-ic {
    display: inline-flex;
  }
}

.hs-portal-nav-label--static:hover {
  background: transparent;
}

/* Activity */
.hs-activity-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hs-usage-card {
  margin-bottom: 0;
}

.hs-usage-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hs-usage-card__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-usage-card__value {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hs-neutral-800);
}

.hs-usage-card__value b {
  color: var(--hs-everglade-600);
  font-weight: 800;
}

.hs-usage-card__meta {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.hs-usage-card__link {
  font-size: 15px;
  font-weight: 700;
  color: var(--hs-everglade-600);
  text-decoration: none;
  border-bottom: 2px solid var(--hs-aqua);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: gap 0.15s, color 0.15s;
}

.hs-usage-card__link:hover {
  gap: 11px;
  color: var(--hs-everglade-700);
  opacity: 1;
}

.hs-usage-card__line {
  margin: 12px 0 4px;
  font-size: 15px;
  color: var(--hs-neutral-600);
}

.hs-usage-card__line b {
  color: var(--hs-neutral-800);
  font-weight: 700;
}

.hs-usage-card__reset {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--hs-neutral-500);
}

.hs-usage-card .progress {
  height: 9px;
  margin-top: 14px;
  border-radius: 360px;
  background: var(--hs-neutral-150);
  overflow: hidden;
}

.hs-usage-card .progress > div {
  height: 100%;
  border-radius: 360px;
  background: linear-gradient(90deg, var(--hs-aqua), #36d196);
}

.hs-billing-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
}

.hs-billing-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
}

.hs-billing-plan-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* The gradient is a deliberate brand wash and has no token equivalent; the
   frame around it uses the same roles as the pricing card below, so the two
   read as one section rather than two cards from different eras. */
.hs-billing-plan-card--hero {
  position: relative;
  overflow: hidden;
  padding: var(--hs-space-5) var(--hs-space-5) var(--hs-space-6);
  border-radius: var(--hs-radius-xl);
  border: var(--hs-size-hairline) solid var(--hs-border-subtle);
  background: linear-gradient(
    105deg,
    rgba(212, 247, 230, 0.45) 0%,
    rgba(207, 230, 249, 0.4) 50%,
    rgba(229, 212, 247, 0.4) 100%
  );
  box-shadow: var(--hs-elevation-raised);
}

.hs-billing-plan-card--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 58%
  );
  pointer-events: none;
}

.hs-billing-plan-card--hero > * {
  position: relative;
  z-index: 1;
}

.hs-billing-plan-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  margin-bottom: var(--hs-space-2);
}

.hs-billing-plan-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--hs-space-2);
  flex-shrink: 0;
}

.hs-billing-plan-card__see-usage {
  flex-shrink: 0;
  margin: 0;
}

.hs-billing-plan-card__eyebrow {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  color: var(--hs-fg-secondary);
}

.hs-billing-plan-card__upgrade {
  flex-shrink: 0;
  margin: 0;
}

.hs-billing-plan-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  flex-wrap: wrap;
}

.hs-billing-plan-card__name {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tight);
  line-height: var(--hs-leading-tight);
  color: var(--hs-fg-primary);
}

.hs-billing-plan-card__remaining {
  margin: var(--hs-space-3) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-medium);
  line-height: var(--hs-leading-snug);
  color: var(--hs-fg-primary);
}

.hs-billing-plan-card__remaining b {
  color: var(--hs-accent-ink);
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: tabular-nums;
}

.hs-billing-plan-card__meta {
  margin: var(--hs-space-2) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-normal);
  color: var(--hs-fg-secondary);
  font-variant-numeric: tabular-nums;
}

.hs-billing-plan-card__note {
  margin: var(--hs-space-2) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-normal);
  color: var(--hs-fg-secondary);
}

/* The track sits on the hero's pastel wash, so it is a translucent white rather
   than a surface token — nothing in the palette reads as "lighter than this
   gradient". */
.hs-billing-plan-card .progress {
  height: 9px;
  margin-top: var(--hs-space-4);
  border-radius: var(--hs-radius-pill);
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

.hs-billing-plan-card .progress > div {
  height: 100%;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-accent-solid);
}

.hs-billing-topups {
  padding: 0;
}


.hs-billing-plans-details {
  margin-top: 0;
}

.hs-billing-section-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hs-neutral-200, #e7edea);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 27, 17, 0.04);
  overflow: hidden;
  padding: 0;
}

.hs-billing-section-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 18px 16px;
  user-select: none;
}

.hs-billing-section-card__summary::-webkit-details-marker {
  display: none;
}

.hs-billing-section-card__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hs-billing-section-card__heading {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hs-everglade-900, #0e1b11);
}

.hs-billing-section-card__sub {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(14, 27, 17, 0.58);
}

.hs-billing-section-card__chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--hs-neutral-500);
  border-bottom: 2px solid var(--hs-neutral-500);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.hs-billing-section-card[open] .hs-billing-section-card__chev {
  transform: rotate(225deg);
  margin-top: 4px;
}

.hs-billing-section-card__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--hs-neutral-150, #eef1ef);
}


.hs-billing-topup-btn__list {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(14, 27, 17, 0.48);
  text-decoration: line-through;
}


.hs-billing-topup-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 18px 14px 14px;
  border: 1.5px solid rgba(14, 27, 17, 0.14);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 0 rgba(14, 27, 17, 0.04), 0 8px 20px rgba(14, 27, 17, 0.05);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.hs-billing-topup-btn:hover {
  border-color: rgba(61, 143, 106, 0.55);
  background: #f7fcf9;
  box-shadow: 0 10px 28px rgba(14, 27, 17, 0.1);
  transform: translateY(-2px);
}

.hs-billing-topup-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(14, 27, 17, 0.08);
}

.hs-billing-topup-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hs-aqua, #43e5a4) 55%, transparent);
  outline-offset: 2px;
}

.hs-billing-topup-btn.is-featured {
  border-color: rgba(67, 229, 164, 0.75);
  background: linear-gradient(180deg, #eefaf4 0%, #ffffff 70%);
  box-shadow: 0 1px 0 rgba(14, 27, 17, 0.03), 0 10px 26px rgba(67, 229, 164, 0.18);
}

.hs-billing-topup-btn.is-featured:hover {
  border-color: rgba(45, 180, 120, 0.9);
  background: linear-gradient(180deg, #e6f8ef 0%, #f7fcf9 70%);
}

.hs-billing-topup-btn.is-added {
  border-color: var(--hs-aqua, #43e5a4);
  box-shadow: 0 0 0 2px rgba(67, 229, 164, 0.28);
}

.hs-billing-topup-btn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.hs-billing-topup-btn__price {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--hs-everglade-600, #1f6b4a);
}

.hs-billing-topup-btn__credits {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--hs-neutral-900, #0e1b11);
}

.hs-billing-topup-btn__rate {
  margin: 2px 0 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--hs-neutral-500, #6b7f72);
}

.hs-billing-topup-btn__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 34px was not a rung on the control scale; control-md is 36. */
  min-height: 36px;
  margin-top: auto;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ink, #0e1b11);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.12), 0 4px 12px rgba(14, 27, 17, 0.1);
  transition: background 0.15s ease;
}

.hs-billing-topup-btn:hover .hs-billing-topup-btn__cta {
  background: var(--hs-everglade-800, #122920);
}

.hs-billing-topup-btn:disabled .hs-billing-topup-btn__cta {
  box-shadow: none;
}

.hs-billing-topups__monthly {
  display: flex;
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}

@media (max-width: 640px) {

  .hs-billing-topup-btn {
    padding: 14px 8px 10px;
  }

  .hs-billing-topup-btn__credits {
    font-size: 1.1rem;
  }

  .hs-billing-topup-btn__rate {
    font-size: 0.625rem;
    margin-bottom: 8px;
  }

  .hs-billing-topup-btn__cta {
    min-height: 30px;
    font-size: 0.75rem;
  }
}

.hs-billing-plan-card__manage {
  flex-shrink: 0;
  margin: 0;
}

/* ---- Billing pricing card ----------------------------------------------
   Layout and type only. The SURFACE of this card, its segmented control, its
   tier picks and its Purchase button are all owned by the design system
   (design-system/css/hs-bridge-components.css — search `.v2-pp-`), which loads
   after this file and states them in roles. Everything that used to be restated
   here in literals — a white fill, an aqua tab pill, a 12% aqua selected wash,
   #1d8a5b borders — is gone: two layers painting the same element is how this
   card ended up with a toggle whose thumb missed its tab.

   Also note: inside the workspace subtree `--hs-border-default`,
   `--hs-border-strong` and `--hs-fg-tertiary` resolve to NOTHING (v1 bridges in
   handshake.css re-point the neutral ramp at tokens that point back at it), so
   they are not used here. Use -subtle / -secondary / -disabled. */
.hs-billing-pricing.v2-pp-card {
  border-radius: var(--hs-radius-xl);
  padding: var(--hs-space-4) var(--hs-space-4) var(--hs-space-5);
  text-align: left;
}

.hs-billing-pricing .v2-pp-tabs {
  margin-bottom: var(--hs-space-4);
  box-sizing: border-box;
}

/* Only the horizontal arithmetic lives here — the design system paints the
   thumb and owns its vertical inset. 4px, deliberately literal: it has to stay
   in step with the track padding the bridge sets, so a spacing-scale token
   would be a silent way for the two to drift apart. */
.hs-billing-pricing .v2-pp-tabs-thumb {
  position: absolute;
  left: 4px;
  width: calc(50% - 4px);
  transition: transform var(--hs-duration-base) var(--hs-ease-expand);
  pointer-events: none;
}

/* Monthly is first (matches lander); slide thumb for One-time top-ups. */
.hs-billing-pricing .v2-pp-tabs.is-monthly .v2-pp-tabs-thumb {
  transform: none;
}

.hs-billing-pricing .v2-pp-tabs.is-payg .v2-pp-tabs-thumb {
  transform: translateX(100%);
}

.hs-billing-pricing .v2-pp-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--hs-space-2);
  flex-wrap: wrap;
}

.hs-billing-pricing .v2-pp-price {
  font-family: var(--hs-font-display);
  font-weight: var(--hs-weight-bold);
  font-size: var(--hs-text-4xl);
  line-height: var(--hs-leading-none);
  letter-spacing: var(--hs-tracking-tighter);
  color: var(--hs-fg-primary);
  font-variant-numeric: tabular-nums;
}

.hs-billing-pricing .v2-pp-price-period {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
}

.hs-billing-pricing .v2-pp-credits-line {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-secondary);
  margin-top: var(--hs-space-2);
}

/* Colour comes from the design system, which pins fg-link here for AA on glass. */
.hs-billing-pricing .v2-pp-credits-line strong {
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: tabular-nums;
}

.hs-billing-pricing .v2-pp-tier-picks {
  display: grid;
  /* The design system draws these buttons with `1px solid var(--hs-glass-rim)`,
     and the rim is a 55% WHITE — correct on a photo or a dark wash, invisible on
     this near-white card. An unselected option that shows no edge does not read
     as pressable at all: "Custom" looked like a caption.

     Supplying a rim value here rather than overriding `border-color` keeps the
     design system's declaration in charge — it still owns what the border IS,
     this only tells it what a rim is worth on this surface. The selected state's
     accent border still wins, so the two states stay distinguishable. */
  --hs-glass-rim: var(--hs-border-control);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hs-space-2);
  margin: var(--hs-space-3) 0 var(--hs-space-2);
  align-items: end;
}

.hs-billing-pricing .v2-pp-tier-picks--duo,
.hs-billing-pricing .v2-pp-tier-picks--plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hs-billing-pricing .v2-pp-tier-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hs-space-1);
  min-width: 0;
}

/* Colour comes from the design system, which pins accent-ink for AA on glass. */
.hs-billing-pricing .v2-pp-tier-label {
  display: block;
  text-align: center;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-2xs);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  line-height: var(--hs-leading-tight);
  min-height: 1.2em;
}

.hs-billing-pricing .v2-pp-tier-label--spacer {
  visibility: hidden;
  color: transparent;
}

/* Fill, border and the selected state belong to the design system. What is left
   here is the shape of the button. */
.hs-billing-pricing .v2-pp-tier-pick {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--hs-size-control-lg);
  padding: var(--hs-space-2);
  border-radius: var(--hs-radius-md);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-bold);
  cursor: pointer;
  transition:
    border-color var(--hs-duration-base) var(--hs-ease-standard),
    background-color var(--hs-duration-base) var(--hs-ease-standard);
}

.hs-billing-pricing .v2-pp-tier-pick:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 2px;
}

/* The tier the subscriber is already paying for, marked without stealing the
   selected treatment — they can select something else and still see which is
   theirs. */
.hs-billing-pricing .v2-pp-tier-pick.is-current {
  outline: var(--hs-size-hairline) solid var(--hs-accent-ring);
  outline-offset: 2px;
}

.hs-billing-pricing .v2-pp-card-sub {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-secondary);
  margin: 0 0 var(--hs-space-3);
}

/* Custom recurring amount — priced on the same ladder as the listed plan.
   A recessed well, not another accent panel: the estimate box below it is the
   one green surface on this card, and two adjacent mint panels made neither of
   them read as the emphasis. Same treatment as the segmented track. */
.hs-billing-volume {
  margin: 0 0 var(--hs-space-3);
  display: grid;
  gap: var(--hs-space-2);
}

.hs-billing-volume__label {
  display: block;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-accent-ink);
}

/* ---- The Custom amount, on this file's own segmented control ----
   Was a drawn range: a painted track plus a --hs-slide-fill gradient, because
   accent-color made Chrome derive a near-black unfilled bar from the aqua
   accent. That whole problem goes away here — there is no native track left to
   paint. The amount rides in the thumb of the control this page already uses
   for Monthly / One-time top-ups (.v2-pp-tabs, hs-bridge-components.css): a
   recessed well holding a raised thumb. Its two load-bearing numbers are
   copied exactly — --pb-inset 2px, --pb-lift 3px — so the pill stands
   lift - inset = 1px proud of the well on all four sides.

   The same control is on the lander as .pb-* (lander-v3.css). The rules are
   stated in both files rather than shared: neither surface loads
   hs-components.css, so moving them into the design system would mean a CSS
   load-order change, which is governed by docs/css-load-order.md and is a
   separate, reviewable diff. */
.hs-billing-pricing .hs-pb-well {
  --pb-tabw: 7.25rem;
  /* px, both set by the script: --pb-x moves the pill, --pb-fill clips the bar.
     Neither is a percentage — the drag has to be paint-only. */
  --pb-x: 0px;
  --pb-fill: 0px;
  --pb-inset: 2px;
  --pb-lift: 3px;
  position: relative;
  height: 3rem;
  padding: var(--pb-inset);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-glass-recessed);
  cursor: grab;
  /* hs-mobile.css sets `touch-action: manipulation` on <html> for every coarse
     pointer and effective touch-action is intersected down the ancestor chain,
     so a horizontal drag here was eligible to become a page pan. `pan-y` keeps
     vertical scrolling for the page and hands horizontal movement to this. */
  touch-action: pan-y;
}

.hs-billing-pricing .hs-pb-well.is-dragging { cursor: grabbing; }

/* Filled to the middle of the pill, not to its leading edge, or the fill
   appears to lag the number it belongs to. */
.hs-billing-pricing .hs-pb-fill {
  position: absolute;
  inset: var(--pb-inset);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-accent-muted);
  /* Clipped, not resized. A width per pointermove is layout on every frame of a
     drag; a clip is paint only. `round` keeps the pill cap that a scaleX would
     squash. --pb-fill is px, set by the script. */
  clip-path: inset(0 calc(100% - var(--pb-fill, 0px)) 0 0 round var(--hs-radius-pill));
}

/* Ticks live in the range you have NOT taken: the strip starts at the pill's
   right edge and ends at the well's, so it is the empty part of the bar that is
   alive, and it shrinks as you claim it. Heights are fixed and ramp right —
   only opacity travels, phase-offset per tick, so the bar shimmers rather than
   pulses. Tied to remaining range, not to whether you have touched the control,
   so coming back down brings it back. */
.hs-billing-pricing .hs-pb-wave {
  position: absolute;
  top: var(--pb-inset);
  bottom: var(--pb-inset);
  /* Parked where the pill sits at the floor, and it never moves again. Anchored
     to the live thumb it re-ran a 22-child flex layout every frame and squeezed
     the ticks together as it shrank — that was the jitter. */
  left: calc(var(--pb-inset) + var(--pb-tabw));
  right: var(--pb-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding-inline: var(--hs-space-3);
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--hs-duration-slow) var(--hs-ease-standard);
}

/* The hint is spent once you have moved up, and it does not come back. */
.hs-billing-pricing .hs-pb-well.is-quiet .hs-pb-wave { opacity: 0; }

.hs-billing-pricing .hs-pb-wave i {
  flex: none;
  width: 2px;
  height: var(--pb-h);
  border-radius: 1px;
  background: var(--hs-accent-solid);
  opacity: 0.16;
  animation: hs-pb-wave 2.4s var(--hs-ease-standard) infinite;
  animation-delay: var(--pb-d);
}

@keyframes hs-pb-wave {
  0%, 100% { opacity: 0.16; }
  45%      { opacity: 0.85; }
}

/* A pure positioning frame — transparent, exact. ::before paints the visible
   pill, inset by a negative amount, so the lift never changes the box the
   arithmetic depends on. */
.hs-billing-pricing .hs-pb-tab {
  position: absolute;
  top: var(--pb-inset);
  bottom: var(--pb-inset);
  left: var(--pb-inset);
  /* translateX, not left: composited, so the drag tracks the finger instead of
     relaying out the well on every pointermove. --pb-x is px, set by script. */
  transform: translateX(var(--pb-x, 0px));
  will-change: transform;
  width: var(--pb-tabw);
  border-radius: var(--hs-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hs-fg-primary);
  pointer-events: none;
  isolation: isolate;
}

.hs-billing-pricing .hs-pb-tab::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--pb-lift));
  z-index: 0;
  border-radius: inherit;
  /* Opaque, not the 0.88 control glass: the lift only reads if the pill is a
     solid object sitting over the well. */
  background: var(--hs-seg-thumb, var(--hs-bg-raised));
  box-shadow: var(--hs-seg-thumb-shadow,
    0 0 0 0.5px rgba(13, 16, 14, 0.06),
    0 1px 2px rgba(13, 16, 14, 0.06),
    0 4px 10px -2px rgba(13, 16, 14, 0.10));
  transition:
    inset var(--hs-duration-fast) var(--hs-ease-standard),
    box-shadow var(--hs-duration-fast) var(--hs-ease-standard);
}

/* The figure centres in the pill; $ and /mo share a baseline inside a box that
   is itself centred. Baseline-aligning them against the pill pushes the number
   off centre vertically. */
.hs-billing-pricing .hs-pb-tabin {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.hs-billing-pricing .hs-pb-tabin b {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hs-billing-pricing .hs-pb-tabin i {
  font-style: normal;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-tertiary);
  line-height: 1;
}

/* The real input, transparent, inset to match the well so its native thumb
   travels exactly the distance the visible pill does. Keyboard, screen readers
   and click-to-jump keep working, and the grab point lands on the pill. */
.hs-billing-pricing .hs-pb-range {
  position: absolute;
  inset: var(--pb-inset);
  /* Above the fill, the ticks and the pill, so a later addition to the well
     cannot quietly steal the drag. */
  z-index: 2;
  width: calc(100% - 2 * var(--pb-inset));
  height: calc(100% - 2 * var(--pb-inset));
  margin: 0;
  opacity: 0;
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  /* Keyboard and assistive tech only. Every pointer gesture is handled on the
     well instead, because the native range maps finger-x to a value using its
     OWN thumb geometry while the visible pill has another — two mappings for one
     drag, which made it lock to a stop instead of following the finger. Focus is
     moved here by script on pointerdown so arrow keys still work after a tap. */
  pointer-events: none;
}

.hs-billing-pricing .hs-pb-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--pb-tabw);
  height: 100%;
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: transparent;
}

.hs-billing-pricing .hs-pb-range::-moz-range-thumb {
  width: var(--pb-tabw);
  height: 100%;
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: transparent;
}

/* The input is invisible, so its focus ring and pressed state are worn by the
   pill instead. Pressed spreads the lift — the gesture this page's own thumb
   makes when you pick a tab. */
.hs-billing-pricing .hs-pb-well:has(.hs-pb-range:focus-visible) .hs-pb-tab::before,
.hs-billing-pricing .hs-pb-well.is-focus .hs-pb-tab::before {
  box-shadow:
    0 0 0 var(--hs-size-focus-ring) var(--hs-border-focus),
    0 4px 10px -2px rgba(13, 16, 14, 0.10);
}

.hs-billing-pricing .hs-pb-well.is-dragging .hs-pb-tab::before {
  inset: calc(-1 * var(--pb-lift) - 1px);
  box-shadow:
    0 0 0 0.5px rgba(13, 16, 14, 0.06),
    0 2px 4px rgba(13, 16, 14, 0.08),
    0 8px 18px -4px rgba(13, 16, 14, 0.14);
}

/* The shimmer is the affordance, so it is the one thing worth keeping when
   motion is reduced — as a static, legible tick row rather than nothing. */
@media (prefers-reduced-motion: reduce) {
  .hs-billing-pricing .hs-pb-wave i { animation: none; opacity: 0.45; }
}
.hs-billing-volume__out {
  margin: var(--hs-space-1) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  line-height: var(--hs-leading-normal);
  color: var(--hs-fg-secondary);
  font-variant-numeric: tabular-nums;
}

.hs-billing-volume__note {
  margin: var(--hs-space-2) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-2xs);
  line-height: var(--hs-leading-normal);
  color: var(--hs-fg-secondary);
  text-wrap: pretty;
}

/* ---- what the selected amount buys ----
   Lifted from the lander's `.est` block so the two screens answer "is it
   enough?" the same way. Three maxima joined by "or": each figure is the whole
   balance spent on that one thing, which is what makes the "or" load-bearing —
   without it the numbers read as things you get at the same time. */
.hs-billing-est {
  border: var(--hs-size-hairline) solid var(--hs-border-accent);
  background: var(--hs-accent-subtle);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-4) var(--hs-space-5);
  margin: var(--hs-space-1) 0 var(--hs-space-4);
}

.hs-billing-est__k {
  display: block;
  margin: 0 0 var(--hs-space-4);
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-2xs);
  font-weight: var(--hs-weight-semibold);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  color: var(--hs-accent-ink);
  font-variant-numeric: tabular-nums;
}

/* Each "or" gets its own track, so the separators fall at even intervals
   rather than wherever the previous label happens to end. */
.hs-billing-est__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: baseline;
  gap: var(--hs-space-3);
}

.hs-billing-est__cell {
  display: flex;
  flex-direction: column;
  /* Left, not centred. Centred cells of unequal width put the figures at
     arbitrary intervals; a common left edge lines each number up with its own
     label and reads as a row you scan. Matches the lander's .pb-cell. */
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: left;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-secondary);
  line-height: var(--hs-leading-snug);
}

.hs-billing-est__cell b {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  line-height: var(--hs-leading-none);
  color: var(--hs-fg-primary);
  font-variant-numeric: tabular-nums;
}

/* Sits on the numbers' baseline: centring it floated the word against the
   middle of a two-line cell, which reads as a gap rather than a joint. */
.hs-billing-est__or {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-disabled);
  padding-inline: var(--hs-space-1);
}

.hs-billing-est__fine {
  margin: var(--hs-space-4) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-2xs);
  line-height: var(--hs-leading-normal);
  color: var(--hs-fg-secondary);
}

/* One column below the card's narrowest comfortable width: three figures plus
   two separators across a phone put one word per line. */
@media (max-width: 420px) {
  .hs-billing-est__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hs-space-3);
  }

  /* Kept, not hidden. It used to be safe to drop the "or" when the row stacked,
     because "Or any mix of the three — it's one balance." sat underneath and
     said the same thing. That line is gone, so the "or" is now the only thing
     stopping three figures reading as a total. */
  .hs-billing-est__or {
    padding-inline: 0;
  }

  .hs-billing-est__cell {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--hs-space-3);
    text-align: left;
  }

  /* A fixed box with the figure left-aligned inside it: the numbers share a
     left edge and so do the labels. */
  .hs-billing-est__cell b {
    min-width: 5ch;
  }
}

/* Surface owned by the design system (glass-sunken); this is the box only. */
.hs-billing-pricing .v2-pp-howto {
  margin: 0 0 var(--hs-space-3);
  border: var(--hs-size-hairline) solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-md);
  overflow: hidden;
}

.hs-billing-pricing .v2-pp-howto > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-2);
  padding: var(--hs-space-3) var(--hs-space-4);
}

.hs-billing-pricing .v2-pp-howto > summary::-webkit-details-marker {
  display: none;
}

.hs-billing-pricing .v2-pp-howto > summary:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: -2px;
}

.hs-billing-pricing .v2-pp-howto-title {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
}

.hs-billing-pricing .v2-pp-howto-more {
  display: inline-flex;
  color: var(--hs-accent-ink);
  transition: transform var(--hs-duration-base) var(--hs-ease-standard);
}

.hs-billing-pricing .v2-pp-howto[open] .v2-pp-howto-more {
  transform: rotate(180deg);
}

.hs-billing-pricing .v2-pp-howto-body {
  padding: 0 var(--hs-space-4) var(--hs-space-3);
}

/* Colour comes from the design system, which pins fg-secondary for AA. */
.hs-billing-pricing .v2-pp-howto-intro {
  margin: 0 0 var(--hs-space-3);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  line-height: var(--hs-leading-normal);
}

.hs-billing-pricing .v2-pp-howto-lead {
  margin: 0 0 var(--hs-space-2);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
}

.hs-billing-pricing .v2-pp-howto-note {
  margin: var(--hs-space-3) 0 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-2xs);
  line-height: var(--hs-leading-normal);
  color: var(--hs-fg-secondary);
}

.hs-billing-pricing .v2-pp-howto-rows {
  display: grid;
  gap: var(--hs-space-2);
}

.hs-billing-pricing .v2-pp-howto-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hs-space-2);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-secondary);
}

.hs-billing-pricing .v2-pp-howto-row strong {
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-fg-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The design system owns this button's fill, rim, height and type. Only its
   block layout and its two dead states are stated here. */
.hs-billing-pricing .v2-pp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.hs-billing-pricing .v2-pp-cta:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 2px;
}

.hs-billing-pricing .v2-pp-cta:disabled,
.hs-billing-pricing .v2-pp-cta.is-current-plan {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

.hs-billing-usage {
  margin-top: var(--hs-space-1);
}

.hs-billing-usage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  margin-bottom: var(--hs-space-3);
}

.hs-billing-usage__title {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
}

.hs-billing-table--ledger .hs-billing-credits-delta--add {
  color: var(--hs-accent-ink);
  font-weight: var(--hs-weight-bold);
}

.hs-billing-table--ledger .hs-billing-credits-delta--use {
  color: var(--hs-fg-primary);
  font-weight: var(--hs-weight-semibold);
}

@media (max-width: 520px) {
  .hs-billing-pricing .v2-pp-tier-picks {
    gap: var(--hs-space-2);
  }

  .hs-billing-pricing .v2-pp-tier-picks--duo,
  .hs-billing-pricing .v2-pp-tier-picks--plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hs-billing-credits-details {
  padding: 0;
}

.hs-billing-section-card__body .hs-billing-rates {
  margin-top: 14px;
}

.hs-billing-section-head--usage {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 12px;
}

.hs-billing-section-head--usage .sub {
  margin: 0;
  flex: 1 1 auto;
}

.hs-billing-overview {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hs-billing-overview__hero {
  margin-bottom: 4px;
}

.hs-billing-overview__plan {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hs-neutral-500);
}

.hs-billing-overview__value {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hs-neutral-800);
}

.hs-billing-overview__value b {
  color: var(--hs-everglade-600);
  font-weight: 800;
}

.hs-billing-overview__meta {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.hs-billing-overview__plan-note {
  margin: 4px 0 10px;
  font-size: 14px;
  line-height: 1.45;
}

.hs-billing-overview .progress {
  height: 9px;
  margin-top: 14px;
  border-radius: 360px;
  background: var(--hs-neutral-150);
  overflow: hidden;
}

.hs-billing-overview .progress > div {
  height: 100%;
  border-radius: 360px;
  background: linear-gradient(90deg, var(--hs-aqua), #36d196);
}

.hs-billing-overview__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hs-neutral-200);
}

.hs-billing-overview__facts > div {
  min-width: 0;
}

.hs-billing-overview__facts dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hs-neutral-500);
}

.hs-billing-overview__facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--hs-neutral-800);
}

.hs-billing-overview__note {
  margin: 12px 0 0;
}

.hs-billing-overview__addons {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hs-neutral-200);
  scroll-margin-top: 88px;
}

.hs-billing-overview__addons-head {
  margin-bottom: 12px;
}

.hs-billing-overview__addons-head h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hs-neutral-800);
}

.hs-billing-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hs-billing-section-head h3 {
  margin: 0 0 4px;
}

.hs-billing-activity-scroll {
  max-height: min(420px, 50vh);
  overflow: auto;
  margin: 0 -4px;
  padding: 0 4px;
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-md);
  background: var(--hs-bg-raised);
  -webkit-overflow-scrolling: touch;
}

.hs-billing-table {
  width: 100%;
  /* separate — collapse lets scrolled cells paint through sticky th */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
}

.hs-billing-table th,
.hs-billing-table td {
  text-align: left;
  padding: var(--hs-space-2) var(--hs-space-4);
  border-bottom: var(--hs-size-hairline) solid var(--hs-border-subtle);
  vertical-align: top;
}

.hs-billing-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: var(--hs-text-2xs);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  color: var(--hs-fg-tertiary);
  background: var(--hs-bg-raised);
  background-clip: padding-box;
  box-shadow: 0 1px 0 var(--hs-border-default);
}

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

.hs-billing-table td:last-child,
.hs-billing-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.hs-billing-activity-foot {
  margin: 10px 0 0;
  font-size: 13px;
}

@media (max-width: 640px) {
  .hs-billing-overview__facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.hs-billing-topups {
  scroll-margin-top: 88px;
}

.hs-billing-addons {
  scroll-margin-top: 88px;
}

.hs-billing-addon-grid {
  display: grid;
  gap: var(--hs-space-4);
  margin-top: var(--hs-space-4);
}

@media (min-width: 640px) {
  .hs-billing-addon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hs-billing-fair-use {
  margin-top: var(--hs-space-4);
}

.hs-billing-addon-card {
  padding: var(--hs-space-4);
  border: 1px solid var(--hs-neutral-200);
  border-radius: 12px;
  background: var(--hs-bg-elev);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hs-billing-addon-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hs-billing-addon-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
}

.hs-billing-addon-card__price {
  margin: 0;
  font-size: 14px;
  color: var(--hs-neutral-600);
  white-space: nowrap;
}

.hs-boost-confetti {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.hs-boost-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(67, 229, 164, 0.45);
  background: linear-gradient(135deg, #f9faf2 0%, #eef9f3 100%);
  box-shadow:
    0 12px 40px rgba(14, 27, 17, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.hs-boost-toast[hidden] {
  display: none !important;
}

.hs-boost-toast--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hs-boost-toast--out {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

.hs-boost-toast__emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.hs-boost-toast__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hs-neutral-900, #0e1b11);
}

.hs-boost-toast__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.hs-billing-rates {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 14px;
  line-height: 1.6;
}

.hs-billing-examples {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hs-border-subtle, rgba(0, 0, 0, 0.08));
}

.hs-billing-examples__title {
  margin: 0 0 var(--hs-space-2);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-fg-primary);
}

.hs-billing-recurring {
  margin-top: var(--hs-space-5);
  padding-top: var(--hs-space-4);
  border-top: var(--hs-size-hairline) solid var(--hs-border-subtle);
}

.hs-billing-recurring .hs-billing-examples__title {
  margin-bottom: var(--hs-space-1);
}

.hs-billing-recurring > .sub {
  margin: 0 0 var(--hs-space-3);
}

.hs-billing-examples__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 14px;
  line-height: 1.6;
}

.progress--unlimited > div {
  width: 100% !important;
  opacity: 0.35;
}

.hs-conv-filter-wrap {
  margin-top: 4px;
  margin-bottom: 6px;
}

.hs-conv-filter__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  flex-wrap: nowrap;
  width: 100%;
}

.hs-conv-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.hs-conv-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ink-3, var(--hs-neutral-500));
  pointer-events: none;
  z-index: 1;
}

.hs-conv-search input {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 40px 0 42px;
  font-family: var(--font, var(--hs-font-ui));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink, var(--hs-neutral-800));
  background: var(--panel, var(--hs-bg));
  border: 1px solid var(--hair-2, var(--hs-neutral-300));
  border-radius: var(--r-md, 12px);
  transition: border-color 0.14s, box-shadow 0.14s;
  appearance: none;
  -webkit-appearance: none;
}

.hs-conv-search input::-webkit-search-decoration,
.hs-conv-search input::-webkit-search-cancel-button {
  display: none;
}

.hs-conv-search input::placeholder {
  color: var(--ink-3, var(--hs-neutral-500));
}

.hs-conv-search input:focus {
  outline: none;
  border-color: var(--accent-2, var(--hs-aqua-deep));
  box-shadow: 0 0 0 3px var(--accent-tint, #e6fbf1);
}

.hs-conv-search__clr {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: var(--ink-3, var(--hs-neutral-500));
  padding: 0;
  border: none;
  background: transparent;
  z-index: 1;
}

.hs-conv-search__clr svg {
  width: 14px;
  height: 14px;
  position: static;
  transform: none;
}

.hs-conv-search__clr:hover {
  background: var(--panel-3, var(--hs-bg-sunken));
  color: var(--ink, var(--hs-neutral-800));
}

.hs-conv-search.has .hs-conv-search__clr {
  display: grid;
}

.hs-conv-sheet {
  display: none;
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
  /* Fixed so the panel is not clipped by portal overflow:hidden */
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 80;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 14px;
  /* Solid card — backdrop stays faded; sheet must not read as glass */
  background: #fff;
  border: 1px solid var(--hair-2, var(--hs-neutral-300));
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(8, 30, 18, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hs-conv-sheet.open {
  display: flex;
}

.hs-conv-sheet__head,
.hs-conv-sheet__foot {
  display: flex;
}

.hs-conv-sheet__head {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hs-conv-sheet__ttl {
  font-size: 15px;
  font-weight: 700;
}

.hs-conv-sheet__close {
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-3, var(--hs-neutral-500));
}

.hs-conv-sheet__foot {
  gap: 8px;
  margin-top: 4px;
}

.hs-conv-sheet__btn {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hair-2, var(--hs-neutral-300));
  background: var(--panel, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Apply was everglade-600 at desktop and aqua on mobile — the same button,
   two different colours depending on viewport width. It is primary. */
.hs-conv-sheet__btn--apply {
  background: var(--ink, #0e1b11);
  border-color: transparent;
  color: #fff;
}

.hs-conv-ff {
  position: relative;
}

.hs-conv-ff__trigger {
  height: 44px;
  padding: 0 14px 0 14px;
  border-radius: var(--r-md, 12px);
  background: var(--panel, var(--hs-bg));
  border: 1px solid var(--hair-2, var(--hs-neutral-300));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font, var(--hs-font-ui));
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, var(--hs-neutral-800));
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.hs-conv-ff__ic {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--ink-2, var(--hs-neutral-600));
}

.hs-conv-ff__ttl,
.hs-conv-ff__label {
  min-width: 0;
}

.hs-conv-ff__mut {
  color: var(--ink-3, var(--hs-neutral-500));
  font-weight: 500;
}

.hs-conv-ff__chev {
  width: 15px;
  height: 15px;
  color: var(--ink-3, var(--hs-neutral-500));
  transition: transform 0.18s;
  margin-left: 2px;
}

.hs-conv-ff.open .hs-conv-ff__chev {
  transform: rotate(180deg);
}

.hs-conv-ff__trigger:hover {
  border-color: var(--hair-2, var(--hs-neutral-300));
  background: var(--panel-2, var(--hs-bg-sunken));
}

.hs-conv-ff__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill, 999px);
  background: var(--accent-2, var(--hs-aqua-deep));
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

.hs-conv-ff__count[hidden] {
  display: none;
}

.hs-conv-ff.has .hs-conv-ff__trigger {
  border-color: var(--accent-2, var(--hs-aqua-deep));
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-ink, #0c2418);
}

.hs-conv-ff.has .hs-conv-ff__ic,
.hs-conv-ff.has .hs-conv-ff__chev {
  color: var(--accent-2, var(--hs-aqua-deep));
}

.hs-conv-ff__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 244px;
  background: #fff;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--shadow, 0 18px 44px rgba(8, 40, 24, 0.07));
  padding: var(--sp-2, 8px);
  display: none;
}

.hs-conv-ff.open .hs-conv-ff__pop {
  display: block;
  animation: hs-conv-pop 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes hs-conv-pop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hs-conv-ff__pophead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-neutral-500));
  padding: 6px 10px 8px;
}

.hs-conv-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm, 8px);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, var(--hs-neutral-800));
  cursor: pointer;
  user-select: none;
}

.hs-conv-opt:hover {
  background: var(--panel-2, var(--hs-bg-sunken));
}

.hs-conv-opt__box {
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px solid var(--hair-2, var(--hs-neutral-300));
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.12s, border-color 0.12s, border-width 0.12s;
  box-sizing: border-box;
}

.hs-conv-opt__box--round {
  border-radius: 50%;
}

.hs-conv-opt__box svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.12s;
}

.hs-conv-opt__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-2, var(--hs-aqua-deep));
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.12s, transform 0.12s;
}

/* Checkboxes fill; radios keep a ring with a center dot */
.hs-conv-opt.sel .hs-conv-opt__box:not(.hs-conv-opt__box--round) {
  background: var(--accent-2, var(--hs-aqua-deep));
  border-color: var(--accent-2, var(--hs-aqua-deep));
}

.hs-conv-opt.sel .hs-conv-opt__box--round {
  background: transparent;
  border-color: var(--accent-2, var(--hs-aqua-deep));
  border-width: 2px;
}

.hs-conv-opt.sel .hs-conv-opt__box svg {
  opacity: 1;
}

.hs-conv-opt.sel .hs-conv-opt__dot {
  opacity: 1;
  transform: scale(1);
}

.hs-conv-opt__ic {
  width: 16px;
  height: 16px;
  color: var(--ink-2, var(--hs-neutral-600));
  margin-left: -2px;
}

.hs-conv-opt__cnt {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3, var(--hs-neutral-500));
  font-variant-numeric: tabular-nums;
}

.hs-conv-pop-sep {
  height: 1px;
  background: var(--hair, var(--hs-neutral-200));
  margin: 6px 4px;
}

.hs-conv-daterow {
  display: flex;
  gap: 8px;
  padding: 6px 6px 8px;
}

.hs-conv-daterow label {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, var(--hs-neutral-500));
  display: block;
}

.hs-conv-daterow input {
  width: 100%;
  margin-top: 5px;
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink, var(--hs-neutral-800));
  background: var(--panel-2, var(--hs-bg-sunken));
  border: 1px solid var(--hair-2, var(--hs-neutral-300));
  border-radius: var(--r-sm, 8px);
}

.hs-conv-daterow input:focus {
  outline: none;
  border-color: var(--accent-2, var(--hs-aqua-deep));
}

.hs-conv-filters-toggle {
  display: inline-flex;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: var(--r-md, 12px);
  background: transparent;
  border: none;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, var(--hs-neutral-800));
  cursor: pointer;
}

.hs-conv-filters-toggle:hover,
.hs-conv-filters-toggle:focus-visible {
  background: var(--accent-tint, #f4faf8);
  outline: none;
}

/* Icon-only. Square, on the control scale, so it matches the notifications
   button beside it at every width. */
.hs-conv-filters-toggle--icon {
  padding: 0;
  width: 44px;
}

.hs-conv-filters-toggle svg {
  width: 16px;
  height: 16px;
}

.hs-conv-page {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hs-conv-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 16px;
  padding: 16px 0;
  border-bottom: none;
  background: transparent;
}

@media (min-width: 900px) {
  /* Web: titles scroll with the page — plain text, no sticky wash band */
  .hs-portal-section__head,
  .hs-conv-head {
    position: static;
    background: transparent;
    background-image: none;
  }
}

.hs-conv-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  width: 100%;
  min-height: 44px;
}

/* Was centred with a 52px gutter while every other page in the product was
   left-aligned — and the asymmetric gutter left it visibly off-centre anyway. */
.hs-conv-head__row .hs-portal-section__title {
  margin: 0;
  text-align: left;
  padding: 0;
  flex: 1 1 auto;
}

/* Was position:absolute, which is why the title needed a 116px reserved
   gutter to avoid printing through the bell. It is a flex sibling now, so the
   row separates them and no measurement has to be kept in sync. */
.hs-conv-head__actions {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  flex: none;
  /* Avoid transform here — it breaks position:fixed on the filter sheet/backdrop. */
  pointer-events: auto;
}

.hs-conv-head__actions .hs-conv-notif-btn {
  position: static;
  top: auto;
  right: auto;
  transform: none;
}

.hs-conv-head__sub {
  margin: 2px 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-3, #6b776f);
}

.hs-conv-head__idrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.hs-conv-head__id {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--hs-surface-2, #f4f7f5);
  border: 1px solid var(--hs-hair, #e7edea);
  color: var(--ink-2, #4a554e);
  word-break: break-all;
}

.hs-conv-page--detail .hs-conv-head {
  margin-bottom: 8px;
}

.hs-conv-page--detail .hs-conv-head__row > .hs-portal-back,
.hs-conv-detail-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  margin: 0;
}

.hs-conv-page--detail .hs-portal-section__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 72px;
  padding-right: 96px;
}

.hs-conv-page--detail #ws-activity-detail-facts:not([hidden]) {
  margin-top: 6px;
  text-align: center;
}

.hs-conv-filter-wrap {
  margin: 0;
  flex-shrink: 0;
}

.hs-conv-filter__bar--icon-only {
  display: flex;
  justify-content: flex-end;
  position: static;
}

.hs-conv-empty {
  padding: 2.5rem 1.25rem 2.75rem;
  text-align: center;
}

.hs-conv-empty__inner {
  max-width: 26rem;
  margin: 0 auto;
}

.hs-conv-empty__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3, #6b776f);
}

.hs-conv-empty__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink, #1a2421);
}

.hs-conv-empty__copy {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-2, #3d4a42);
}

.hs-conv-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.hs-portal-section__head-row--conv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.hs-portal-section__head-row--conv .hs-conv-filter-wrap {
  margin: 0;
  flex-shrink: 0;
}

.hs-conv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(14, 27, 17, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.hs-conv-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hs-conv-active {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  margin-top: 10px;
  min-height: 0;
}

.hs-conv-active:empty {
  display: none;
}

.hs-conv-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 5px 0 12px;
  border-radius: var(--r-pill, 999px);
  background: var(--accent-tint, #e6fbf1);
  border: 1px solid var(--accent-tint-2, #d2f6e4);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink, #0c2418);
}

.hs-conv-fchip__k {
  color: var(--ink-3, var(--hs-neutral-500));
  font-weight: 500;
}

.hs-conv-fchip button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent-2, var(--hs-aqua-deep));
  padding: 0;
  border: none;
  background: transparent;
}

.hs-conv-fchip button:hover {
  background: var(--accent-tint-2, #d2f6e4);
}

.hs-conv-fchip button svg {
  width: 14px;
  height: 14px;
}

.hs-conv-clear-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-neutral-600));
  padding: 6px 8px;
  border-radius: var(--r-sm, 8px);
  border: none;
  background: transparent;
}

.hs-conv-clear-all:hover {
  color: var(--ink, var(--hs-neutral-800));
  background: var(--panel-3, var(--hs-bg-sunken));
}

@media (max-width: 760px) {
  .hs-conv-filter__bar {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .hs-conv-search {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .hs-conv-filters-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

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

  .hs-conv-sheet {
    position: fixed;
    left: 0;
    right: 0;
    /* Below Handshake topbar + Conversations title — never under browser chrome */
    top: var(
      --ws-conv-sheet-top,
      calc(
        var(--ws-browser-chrome-top, 0px) + var(--ws-mobile-topbar-h, 52px) + 56px + 6px
      )
    );
    bottom: auto;
    z-index: 80;
    width: 100%;
    max-height: min(
      72dvh,
      calc(100dvh - var(--ws-conv-sheet-top, 108px) - 88px - env(safe-area-inset-bottom, 0px))
    );
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-radius: 0 0 var(--r-2xl, 28px) var(--r-2xl, 28px);
    box-shadow: 0 16px 50px rgba(8, 30, 18, 0.22);
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
    /* Avoid opacity fade — it makes the white card look glass over the scrim */
    transform: translateY(-16px);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hs-conv-sheet.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .hs-conv-sheet .hs-conv-search {
    margin: 0 20px 14px;
  }

  .hs-conv-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }

  .hs-conv-sheet__ttl {
    font-size: 17px;
    font-weight: 800;
  }

  .hs-conv-sheet__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--panel-3, var(--hs-bg-sunken));
    display: grid;
    place-items: center;
    color: var(--ink-2, var(--hs-neutral-600));
    padding: 0;
    border: none;
  }

  .hs-conv-sheet__close svg {
    width: 16px;
    height: 16px;
  }

  .hs-conv-sheet__foot {
    display: flex;
    gap: var(--sp-3, 12px);
    padding: var(--sp-4, 16px) var(--sp-5, 20px) var(--sp-5, 20px);
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--hair, var(--hs-neutral-200));
  }

  .hs-conv-sheet__btn {
    flex: 1;
    height: 48px;
    border-radius: var(--r-md, 12px);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
  }

  .hs-conv-sheet__btn--apply {
    background: var(--ink, #0e1b11);
    color: #fff;
  }

  .hs-conv-sheet__btn--ghost {
    background: var(--panel-3, var(--hs-bg-sunken));
    color: var(--ink, var(--hs-neutral-800));
  }

  .hs-conv-ff {
    border-top: 1px solid var(--hair, var(--hs-neutral-200));
  }

  .hs-conv-ff:first-of-type {
    border-top: none;
  }

  .hs-conv-ff__trigger {
    width: 100%;
    height: auto;
    padding: var(--sp-4, 16px) var(--sp-5, 20px);
    border: none;
    border-radius: 0;
    background: transparent !important;
    color: var(--ink, var(--hs-neutral-800)) !important;
    justify-content: flex-start;
    gap: 12px;
  }

  .hs-conv-ff.has .hs-conv-ff__trigger {
    color: var(--ink, var(--hs-neutral-800)) !important;
  }

  .hs-conv-ff__trigger .hs-conv-ff__ic {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .hs-conv-ff__trigger .hs-conv-ff__ttl,
  .hs-conv-ff__trigger .hs-conv-ff__label {
    flex: 1 1 auto;
    text-align: left;
  }

  .hs-conv-ff__trigger .hs-conv-ff__chev {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .hs-conv-ff__pop {
    position: static;
    display: none;
    min-width: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 var(--sp-4, 16px) var(--sp-4, 16px);
    animation: none;
  }

  .hs-conv-ff.open .hs-conv-ff__pop {
    display: block;
  }
}

.hs-activity-inbox-card__lede {
  margin: 8px 0 12px;
}

@media (max-width: 899px) {
  .hs-activity-tbl {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }

  .hs-activity-tbl__frame,
  .hs-activity-daygroup {
    min-width: 0;
  }

  .hs-activity-tbl__head {
    display: none;
  }

  .hs-activity-row {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 3px;
  }

  .hs-activity-row__top {
    grid-template-columns: 18px 5.25rem minmax(0, 1fr) auto;
    gap: 6px 8px;
  }

  .hs-activity-row__ico {
    width: 18px;
    height: 18px;
  }

  .hs-activity-row__ico svg,
  .hs-activity-row__ico-mask {
    width: 16px;
    height: 16px;
  }

  .hs-activity-row__title,
  .hs-activity-row__time {
    font-size: 14px;
  }

  .hs-activity-row__sum {
    font-size: 12px;
    padding-left: calc(18px + 8px + 5.25rem + 8px);
    -webkit-line-clamp: 1;
  }

  .hs-activity-tag {
    font-size: 10px;
    padding: 3px 7px;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Billing usage stays table-layout so sticky column headers keep covering
     scrolled rows; horizontal overflow is owned by .hs-billing-activity-scroll. */
  .hs-portal-data-table,
  .hs-connectors-table,
  table.hs-table,
  .hs-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.hs-activity-tbl {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hs-activity-tbl__frame {
  min-width: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.hs-activity-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background: transparent;
}

.hs-activity-tbl__head {
  display: none;
}

.hs-activity-tbl__h {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--hs-neutral-500);
}

.hs-activity-daygroup {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1.15rem 4px 0.45rem;
  min-width: 0;
  background: transparent;
  border-bottom: none;
}

.hs-activity-daygroup:first-child {
  padding-top: 0.25rem;
}

.hs-activity-daygroup__day {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, #6b776f);
}

.hs-activity-daygroup__date {
  font-size: 12px;
  font-weight: 500;
  color: var(--hs-neutral-400);
}

/* Foot of the paged feed. Hidden by the renderer when the server says the feed
   has no older page, so this never shows an inert button. */
.hs-activity-more {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

.hs-activity-more[hidden] {
  display: none;
}

.hs-activity-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  width: 100%;
  text-align: left;
  border: 1px solid var(--hair, #e7edea);
  background: var(--panel, #fff);
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font, var(--hs-font));
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.hs-activity-row + .hs-activity-row {
  margin-top: 0;
}

.hs-activity-rows > .hs-activity-row:last-child,
.hs-activity-daygroup .hs-activity-row:last-child {
  border-bottom-color: var(--hair, #e7edea);
}

/* Soft wash kept for hover/selected; base tile is already white */
.hs-activity-row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  z-index: -1;
  pointer-events: none;
  transition: background 0.18s ease;
}

.hs-activity-row:hover,
.hs-activity-row:focus-visible,
.hs-activity-row--selected {
  background: var(--panel, #fff);
  z-index: 1;
  outline: none;
}

.hs-activity-row:hover::before,
.hs-activity-row:focus-visible::before,
.hs-activity-row--selected::before {
  background: rgba(15, 61, 46, 0.045);
  background: color-mix(in srgb, var(--accent-tint, #f4faf8) 70%, transparent);
}

.hs-activity-row:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--hs-aqua)) 28%, transparent);
}

.hs-activity-row__top {
  display: grid;
  /* Fixed time column keeps titles (phones / types) on one vertical line */
  grid-template-columns: 22px 5.25rem minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.hs-activity-row__ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--hs-everglade-600);
  line-height: 0;
  flex-shrink: 0;
}

.hs-activity-row__ico svg {
  width: 20px;
  height: 20px;
  display: block;
}

.hs-activity-row__ico-mask {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.hs-activity-row__ico-mask--inbound {
  -webkit-mask-image: url('/assets/nav-icons/workspace/phone-inbound.png');
  mask-image: url('/assets/nav-icons/workspace/phone-inbound.png');
}

.hs-activity-row__ico-mask--outbound {
  -webkit-mask-image: url('/assets/nav-icons/workspace/phone-outbound.png');
  mask-image: url('/assets/nav-icons/workspace/phone-outbound.png');
}

.hs-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 7px;
  background: var(--hs-neutral-150);
  border-radius: 360px;
  width: fit-content;
}

.hs-activity-chip--icon {
  padding: 6px;
  justify-content: center;
  justify-self: center;
  background: transparent;
}

.hs-activity-chip__ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--hs-everglade-600);
  line-height: 0;
}

.hs-activity-chip__ico svg {
  width: 20px;
  height: 20px;
}

.hs-activity-chip__lbl {
  font-size: 14px;
  font-weight: 700;
  color: var(--hs-neutral-700);
}

.hs-activity-row:hover .hs-activity-row__title,
.hs-activity-row--selected .hs-activity-row__title {
  color: var(--ink, var(--hs-neutral-900));
}

.hs-activity-row__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hs-neutral-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.hs-activity-row__sum {
  font-size: 13px;
  line-height: 1.35;
  color: var(--hs-neutral-500);
  margin: 0;
  padding-left: calc(22px + 10px + 5.25rem + 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-activity-row__time {
  font-size: 14px;
  color: var(--hs-neutral-500);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-activity-row__time-col {
  font-size: 12px;
  color: var(--hs-neutral-500);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  justify-self: start;
  padding-top: 0;
  line-height: 1.2;
}

.hs-activity-row .hs-activity-tag {
  justify-self: end;
  align-self: center;
  max-width: 100%;
  margin-top: 0;
  flex-shrink: 0;
}

.hs-activity-row__dot {
  margin: 0 7px;
  color: var(--hs-neutral-300);
}

.hs-activity-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 360px;
  white-space: nowrap;
}

.hs-activity-tag--green {
  background: var(--pass-tint, var(--hs-everglade-100));
  color: var(--pass, var(--hs-everglade-600));
}

.hs-activity-tag--purple {
  background: var(--hs-purple-100);
  color: var(--hs-purple-600);
}

.hs-activity-tag--blue {
  background: var(--hs-tag-blue-bg);
  color: var(--hs-tag-blue-fg);
}

.hs-activity-tag--neutral {
  background: var(--hs-neutral-150);
  color: var(--hs-neutral-600);
}

.hs-activity-tag--warn {
  background: var(--fail-tint, var(--hs-tag-warn-bg));
  color: var(--fail, var(--hs-tag-warn-fg));
}


.hs-activity-inbox-stage {
  position: relative;
  min-width: 0;
}

/* The conversation sheet's host. It is mounted on <body>, never inside the
   list, so it is positioned against the viewport.

   It is only opened below 900px, where the rules further down make it
   full-bleed. These are the wide-screen fallback, and they exist so that a
   sheet still open when the viewport widens becomes a centred modal instead of
   vanishing — the correctness of the breakpoint listeners must not be the only
   thing standing between the owner and a conversation they cannot see. */
.hs-activity-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hs-activity-inbox-stage:has(.hs-activity-detail-overlay) {
  min-height: min(72vh, 720px);
}

.hs-activity-detail-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 27, 17, 0.45);
}

.hs-activity-detail-overlay__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: min(88vh, 880px);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--hs-bg-raised, #fff);
  border: 1px solid var(--hair, #e7edea);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(14, 27, 17, 0.12);
  overflow: hidden;
}

.hs-activity-detail-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--hs-bg-raised, #fff);
}

/* Identity row: who called, then the ways to act on it. The action used to own
   a row above the caller's name, so the card announced "review something"
   before it announced whose call it was. */
.hs-activity-detail-card__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hs-border-default, var(--hair, #e7edea));
  background: var(--hs-bg-raised, #fff);
}

.hs-activity-detail-card__back,
.hs-activity-detail-card__more {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--hs-radius-circle, 50%);
  background: transparent;
  color: var(--ink-2, #3d4a43);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hs-activity-detail-card__back:hover,
.hs-activity-detail-card__more:hover {
  background: var(--hs-bg-sunken, #eff1ee);
}

.hs-activity-detail-card__back svg {
  width: 22px;
  height: 22px;
}

.hs-activity-detail-card__more svg {
  width: 20px;
  height: 20px;
}

.hs-activity-detail-card__more {
  margin-left: auto;
  color: var(--ink-3, #6b776f);
}

/* The card is already inside the row you clicked on a wide screen — there is
   nothing to go back from. Only the narrow sheet covers its own way out. */
@media (min-width: 900px) {
  .hs-activity-detail-card__back {
    display: none;
  }
}

.hs-activity-detail-card__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--hs-radius-circle, 50%);
  background: var(--hs-accent-muted, #d2fbea);
  color: var(--hs-accent-ink, #0b7350);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hs-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hs-activity-detail-card__avatar svg {
  width: 17px;
  height: 17px;
}

.hs-activity-detail-card__titles {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hs-activity-detail-card__title {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #0e1b11);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-activity-detail-card__meta {
  margin: 0;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--ink-3, #6b776f);
  line-height: 1.4;
}

/* Call context, directly under the transport it describes. Labelled cells
   because the values answer different questions — a dot-separated run made the
   reader parse "Booked" to find the duration. */
.hs-activity-detail-card .hs-activity-detail__facts {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--hair, #e7edea);
}

.hs-activity-facts__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hs-activity-facts__cell--wide {
  grid-column: 1 / -1;
}

/* Two columns: an odd last cell takes the whole row rather than leaving a hole
   beside it. With three cells, "Number" sat alone next to dead space. Scoped to
   this breakpoint — the wide grid is auto-fit and has no fixed parity. */
@media (max-width: 899px) {
  .hs-activity-detail-card .hs-activity-detail__facts
    .hs-activity-facts__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.hs-activity-facts__label {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-3, #6b776f);
}

.hs-activity-facts__value {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink, #0e1b11);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-activity-facts__cell--num .hs-activity-facts__value {
  font-variant-numeric: tabular-nums;
}

/* auto-fit, not a fixed four: the cell list varies by channel — a call has a
   number, a web chat has a page url instead — and a fixed track count left one
   cell stranded on a second row with three empty columns beside it. */
@media (min-width: 900px) {
  .hs-activity-detail-card .hs-activity-detail__facts {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

.hs-activity-detail-card__player {
  flex-shrink: 0;
  padding: 12px 16px 0;
}

.hs-activity-detail-card__player:empty {
  display: none;
}

/* The pinned action bar. On a narrow screen it is the floor of the sheet; on a
   wide one the trigger lives on the identity row instead and this collapses. */
.hs-activity-detail-card__foot {
  flex-shrink: 0;
  position: relative;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hs-border-default, var(--hair, #e7edea));
  background: var(--hs-bg-raised, #fff);
}

/* Height comes from .hs-btn-lg (44px) in the bridge, not from here. */
.hs-activity-actions__trigger--foot {
  width: 100%;
  border-radius: var(--hs-radius-pill, 999px);
  justify-content: center;
}

.hs-activity-actions__trigger--head {
  display: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--hs-radius-pill, 999px);
  font-size: 13px;
}

/* Opens upward: the trigger is the floor of the screen, so its options stack
   above it rather than off the bottom edge. */
.hs-activity-actions__panel--foot {
  margin: 0 0 8px;
  max-width: none;
}

/* Head and overflow menus hang under the identity row, inside the card's
   gutter, and track the trailing edge like the trigger they belong to. */
.hs-activity-detail-card > .hs-activity-actions__panel {
  width: auto;
  margin: 8px 16px 0 auto;
}

@media (min-width: 900px) {
  .hs-activity-detail-card__foot {
    display: none;
  }

  .hs-activity-actions__trigger--head {
    display: inline-flex;
    flex: 0 0 auto;
  }
}

/* The beat between clicking a card and it expanding: we are fetching the
   transcript so the row can animate straight to its final height. Paint only —
   any geometry here would reintroduce the jump it exists to prevent. */
.hs-activity-row--opening {
  background-color: #f7f9f8;
}

/* Conversation details — greyscale, trailing corner, quiet until asked.
   This is reference data for a support thread, not something to read on the
   way past, so it carries no colour and no fill of its own. */
.hs-activity-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 0 2px;
}

.hs-activity-meta__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hs-neutral-400, #9aa39e);
  cursor: pointer;
}

.hs-activity-meta__toggle::after {
  content: '›';
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform var(--hs-duration-fast, 140ms) ease;
}

.hs-activity-meta__toggle.is-open::after {
  transform: rotate(-90deg);
}

.hs-activity-meta__toggle:hover,
.hs-activity-meta__toggle:focus-visible {
  color: var(--ink-3, #6b776f);
}

.hs-activity-meta__panel {
  display: grid;
  gap: 8px;
  justify-items: end;
  width: 100%;
  max-width: 340px;
  padding: 10px 12px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 10px;
  background: var(--hs-neutral-50, #f7f9f8);
}

.hs-activity-meta__panel[hidden] {
  display: none;
}

.hs-activity-meta__row {
  display: grid;
  justify-items: end;
  gap: 1px;
  width: 100%;
  text-align: right;
}

.hs-activity-meta__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hs-neutral-400, #9aa39e);
}

/* The value is the copy target: a whole tap area, not a fiddly icon. */
.hs-activity-meta__val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-family: var(--hs-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--ink-2, #40514a);
  cursor: pointer;
}

.hs-activity-meta__valtext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-activity-meta__val:hover,
.hs-activity-meta__val:focus-visible {
  background: #fff;
  color: var(--ink, #1d2b24);
}

.hs-activity-meta__val--empty {
  cursor: default;
  color: var(--hs-neutral-400, #9aa39e);
}

.hs-activity-meta__copyic {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.55;
}

.hs-activity-meta__copied {
  display: none;
  font-family: var(--hs-font-ui, inherit);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hs-activity-meta__val.is-copied {
  background: var(--pass-tint, #e6f2ea);
  color: var(--pass, #2f6b4a);
}

.hs-activity-meta__val.is-copied .hs-activity-meta__copyic {
  display: none;
}

.hs-activity-meta__val.is-copied .hs-activity-meta__copied {
  display: inline;
}

.hs-activity-meta__hint {
  font-size: 11px;
  line-height: 1.35;
  color: var(--hs-neutral-400, #9aa39e);
}

.hs-activity-meta__copyall {
  justify-self: end;
  margin-top: 2px;
  padding: 4px 8px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, #6b776f);
  cursor: pointer;
}

.hs-activity-meta__copyall:hover,
.hs-activity-meta__copyall:focus-visible {
  color: var(--ink, #1d2b24);
  border-color: var(--hair-2, #cfdad4);
}

.hs-activity-meta__copyall.is-copied {
  background: var(--pass-tint, #e6f2ea);
  color: var(--pass, #2f6b4a);
  border-color: transparent;
}

/* Config drift note — what the owner changed after this conversation.
   Informational, not a warning: the point is "this was correct then", so it
   reads in the accent tint rather than in an error colour. */
.hs-activity-drift {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--hs-accent2-ring, #d8e6de);
  border-radius: 10px;
  background: var(--hs-accent2-muted, #f2f8f5);
}

.hs-activity-drift__lead {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hs-accent2-ink, #2f5c48);
}

.hs-activity-drift__list {
  margin: 6px 0 0;
  padding: 0 0 0 2px;
  list-style: none;
  display: grid;
  gap: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3, #6b776f);
}

.hs-activity-drift__when {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hs-accent2-ink, #2f5c48);
}

.hs-activity-drift__detail {
  color: var(--hs-neutral-500, #8a938e);
}

.hs-report-modal__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3, #6b776f);
}

/* Review menu — one pill that expands its choices in flow.
   Not a popover: the wallet card clips its body to animate open/close, so an
   absolutely positioned menu would be cut off at the card edge. */
/* The one action on this card worth making obvious — everything else here is
   a badge or a menu item. Uses the system's primary ink rather than a bespoke
   black so it stays in the button family. */
.hs-activity-actions__trigger .hs-activity-actions__glyph {
  opacity: 0.85;
}

.hs-activity-actions__glyph {
  flex-shrink: 0;
}

.hs-activity-actions__chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--hs-duration-fast, 140ms) ease;
}

.hs-activity-actions__trigger.is-open .hs-activity-actions__chev {
  transform: rotate(180deg);
}

/* Held to a menu's width rather than the card's — a full-bleed panel under a
   small pill reads as a new section of the card, not as that pill's options. */
.hs-activity-actions__panel {
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 380px;
  /* Hangs off the trigger, so it tracks it to the trailing edge. */
  margin-left: auto;
  padding: 6px;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 12px;
  /* --hs-bg-inset, not --hs-neutral-50: the ramp stop is a fixed light hex, so
     in dark theme this panel stayed pale under near-white item titles. */
  background: var(--hs-bg-inset, #f7f9f8);
}

.hs-activity-actions__panel[hidden] {
  display: none;
}

.hs-activity-actions__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink, var(--hs-neutral-800));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hs-activity-actions__item:hover,
.hs-activity-actions__item:focus-visible {
  background: var(--hs-bg-raised, #fff);
}

.hs-activity-actions__ic {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--hs-accent-ink, #3f6d59);
}

.hs-activity-actions__ic svg {
  width: 17px;
  height: 17px;
}

.hs-activity-actions__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.hs-activity-actions__title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.hs-activity-actions__sub {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3, #6b776f);
}

/* Reporting is the exit from the review loop, not part of it — tinted so it
   does not read as a third way to talk to Julia. */
.hs-activity-actions__item--danger .hs-activity-actions__ic {
  color: var(--fail, var(--hs-tag-warn-fg, #a8462d));
}

.hs-activity-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.35rem;
}

.hs-activity-detail__head-main {
  min-width: 0;
}

.hs-activity-detail__head-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.hs-activity-detail h3 {
  margin: 0 0 0.15rem;
}

.hs-activity-detail__phone {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 0;
  background: var(--hs-neutral-100);
  font-variant-numeric: tabular-nums;
}

.hs-activity-detail #ws-activity-detail-meta {
  margin: 0;
}

.hs-activity-detail__facts {
  margin: 0;
  font-size: 13px;
}

.hs-activity-detail {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--hs-bg-raised, #fff);
}

.hs-activity-detail__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  max-height: none;
  overflow-y: auto;
  padding: 12px 16px 16px;
  -webkit-overflow-scrolling: touch;
}

.hs-activity-detail__body--phone {
  max-height: none;
  padding-top: 12px;
}

@media (max-width: 899px) {
  body.hs-activity-detail-open .hs-portal-footer-nav,
  body.hs-activity-detail-open .ws-mobile-topbar {
    visibility: hidden;
    pointer-events: none;
  }

  .hs-activity-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    min-height: 0;
    padding: 0;
  }

  .hs-activity-inbox-stage:has(.hs-activity-detail-overlay) {
    min-height: 0;
  }

  .hs-activity-detail-overlay__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(14, 27, 17, 0.45);
  }

  .hs-activity-detail-overlay__card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
  }

  .hs-activity-detail-card__head {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The safe-area inset moved to the pinned action bar below this, which is
     what now actually touches the bottom of the screen. */
  .hs-activity-detail__body {
    padding-bottom: 16px;
  }

  /* Detail card is a real surface — do not flatten it on mobile.
     --hs-bg-canvas, not #fff and not --hs-bg-raised. #fff put light dark-theme
     text on a white page. And the bridge remaps --hs-bg-raised to
     --hs-glass-card, which is translucent by design: correct for a card
     floating over the photo canvas, wrong for a sheet that *is* the screen —
     the list underneath showed through the caller's name. This sheet is the
     page, so it takes the page's own opaque colour. */
  #ws-activity-detail-overlay .hs-activity-detail-overlay__card,
  #ws-activity-detail-overlay .hs-activity-detail-card,
  #ws-activity-detail-overlay .hs-activity-detail,
  #ws-activity-detail-overlay .hs-activity-detail-card__head,
  #ws-activity-detail-overlay .hs-activity-detail-card__foot {
    background: var(--hs-bg-canvas, #fff) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

.hs-activity-notifications {
  margin: 0 0 1rem;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hs-neutral-50, #f8faf9);
  border: 1px solid var(--hs-neutral-150, #e8eeeb);
}

.hs-activity-notifications__title {
  margin: 0 0 0.65rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-neutral-500, #6b7c75);
}

.hs-activity-notifications__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.hs-activity-notifications__item {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: var(--hs-surface, #fff);
  border: 1px solid var(--hs-neutral-150, #e8eeeb);
}

.hs-activity-notifications__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.hs-activity-notifications__channel {
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-neutral-700, #3d4f48);
}

.hs-activity-notifications__to {
  font-size: 13px;
  color: var(--hs-neutral-800, #1a2420);
  word-break: break-all;
}

.hs-activity-notifications__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-size: 12px;
  color: var(--hs-neutral-500, #6b7c75);
}

.hs-activity-notifications__status {
  font-weight: 600;
}

.hs-activity-notifications__item--sent .hs-activity-notifications__status {
  color: var(--accent-2, #27ae60);
}

.hs-activity-notifications__item--failed .hs-activity-notifications__status {
  color: #c0392b;
}

.hs-activity-notifications__item--skipped .hs-activity-notifications__status {
  color: var(--hs-neutral-500, #6b7c75);
}

.hs-activity-notifications__error {
  width: 100%;
  font-size: 11px;
  color: #c0392b;
}

.hs-conversation-identifiers {
  display: grid;
  gap: 8px 16px;
  margin: 0 0 1rem;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hs-neutral-50, #f8faf9);
  border: 1px solid var(--hs-neutral-150, #e8eeeb);
}

@media (min-width: 520px) {
  .hs-conversation-identifiers {
    grid-template-columns: 1fr 1fr;
  }
}

.hs-conversation-identifiers__row {
  margin: 0;
  min-width: 0;
}

.hs-conversation-identifiers dt {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--hs-neutral-500, #6b7c75);
}

.hs-conversation-identifiers dd {
  margin: 2px 0 0;
  font-size: 13px;
  word-break: break-all;
  color: var(--hs-neutral-800, #1a2420);
}

.hs-activity-row__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

.hs-voicemail-detail {
  margin: 0 0 1rem;
}

.hs-voicemail-detail__label {
  margin: 0 0 0.35rem;
}

.hs-voicemail-player {
  width: 100%;
  max-width: 420px;
  margin-top: 0.5rem;
}

.hs-voice-playback__audio {
  display: none;
}

.hs-voice-playback__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.hs-voice-playback__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

button.hs-voice-playback__icon-btn,
a.hs-voice-playback__icon-btn {
  width: 2.125rem;
  height: 2.125rem;
  min-width: 2.125rem;
  border: 1px solid var(--hs-border-default, #e2e5e1);
  border-radius: var(--hs-radius-circle, 50%);
  background: var(--hs-bg-raised, #fff);
  color: var(--hs-fg-secondary, #565e58);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: none;
}

/* Download and share are labelled rows in the overflow menu on a narrow
   screen, and icons on the transport row where there is width for them. One or
   the other, never both. */
@media (max-width: 899px) {
  .hs-voice-playback__actions {
    display: none;
  }
}

@media (min-width: 900px) {
  .hs-voice-playback__menu-item--media {
    display: none;
  }
}

.hs-voice-playback__icon-btn svg {
  width: 16px;
  height: 16px;
}

.hs-voice-playback__icon-btn:hover {
  background: var(--hs-bg-sunken, #f4f7f5);
}

.hs-voice-playback__icon-btn.is-ok {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

a.hs-voice-playback__download {
  text-decoration: none;
}

/* Aqua, round, and 40px: the one thing on the card you are most likely to
   reach for. It used to be a 32px hard-cornered square nested inside a 16px
   card, which read as a rendering fault rather than a button. */
.hs-voice-playback__play {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--hs-radius-circle, 50%);
  background: var(--hs-accent-solid, #43e5a4);
  color: var(--hs-fg-on-accent, #0e1b11);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hs-voice-playback__play:hover {
  background: var(--hs-accent-solid-hover, #7df1c6);
}

.hs-voice-playback__play-ic {
  display: none;
  line-height: 0;
}

.hs-voice-playback__play-ic svg {
  width: 20px;
  height: 20px;
}

.hs-voice-playback__play .hs-voice-playback__play-ic--play,
.hs-voice-playback__play.is-playing .hs-voice-playback__play-ic--pause {
  display: inline-flex;
}

.hs-voice-playback__play.is-playing .hs-voice-playback__play-ic--play {
  display: none;
}

.hs-voice-playback__scrub {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 1.75rem;
  display: flex;
  align-items: center;
}

.hs-voice-playback__wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hs-voice-playback__wave-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Clipped, not resized. Setting a width here would relayout all 40 bars on
   every timeupdate; an inset clip repaints and nothing moves. */
.hs-voice-playback__wave-layer--played {
  clip-path: inset(0 100% 0 0);
}

/* The bar count is measured from the width in JS, so each one lands near 3px.
   max-width is the floor under a browser with no ResizeObserver: bars stay
   bars instead of stretching into lozenges. */
.hs-voice-playback__bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: 4px;
  border-radius: var(--hs-radius-pill, 999px);
  background: var(--hs-border-strong, #c2d6cc);
}

.hs-voice-playback__wave-layer--played .hs-voice-playback__bar {
  background: var(--hs-accent-solid-active, #22c286);
}

.hs-voice-playback__range {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  height: 1.75rem;
}

.hs-voice-playback__time {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--hs-text-muted, #6b7280);
  min-width: 5.25rem;
  text-align: right;
  white-space: nowrap;
}

.hs-voice-playback-turn-wrap {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 12px;
}

.hs-voice-playback-turn-wrap--inbound {
  justify-content: flex-start;
}

.hs-voice-playback-turn-wrap--outbound {
  justify-content: flex-end;
}

.hs-voice-playback-turn-wrap .hs-voice-playback-turn {
  margin-bottom: 0;
}

.hs-voice-playback-feedback {
  position: absolute;
  top: 0.15rem;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--hs-border, #e8e8ec);
  border-radius: 6px;
  background: var(--hs-surface, #fff);
  color: var(--hs-text-muted, #6b7280);
  font-size: 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hs-voice-playback-turn-wrap:hover .hs-voice-playback-feedback,
.hs-voice-playback-feedback.has-feedback,
.hs-voice-playback-feedback:focus-visible {
  opacity: 1;
}

.hs-voice-playback-feedback.has-feedback {
  color: #0f766e;
  border-color: #99f6e4;
  background: #f0fdfa;
}

.hs-voice-playback-turn-wrap:has(.outbound) .hs-voice-playback-feedback {
  right: auto;
  left: 0;
}

.hs-voice-playback__player-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.6rem 0.7rem;
  background: var(--hs-bg-sunken, #eff1ee);
  border: 1px solid transparent;
  border-radius: var(--hs-radius-md, 12px);
  margin-bottom: 0.65rem;
}

.hs-activity-detail__body--phone .hs-voice-playback__player-wrap {
  margin: 0 0 0.65rem;
}

/* In the conversation card the transport has its own slot outside the scroller,
   so it needs neither the sticky nor the trailing gap. */
.hs-activity-detail-card__player .hs-voice-playback__player-wrap {
  position: static;
  margin: 0;
}

/* On a phone the clock drops under the bars instead of sitting beside them.
   Held to one row, the fixed-width time block took 84px of a 340px card and
   left the scrub target at 179px — half the row, and the half you aim at. */
@media (max-width: 899px) {
  .hs-activity-detail-card__player .hs-voice-playback__controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "play scrub"
      "play time";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
  }

  .hs-activity-detail-card__player .hs-voice-playback__play {
    grid-area: play;
    align-self: center;
  }

  .hs-activity-detail-card__player .hs-voice-playback__scrub {
    grid-area: scrub;
  }

  .hs-activity-detail-card__player .hs-voice-playback__time {
    grid-area: time;
    min-width: 0;
    text-align: left;
  }
}

.hs-voice-playback__transcript {
  padding-top: 0.35rem;
}

.hs-activity-detail__recording .hs-voicemail-player {
  max-width: none;
  margin-top: 0;
}

.hs-conv-transcript-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hs-conv-transcript-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--hs-surface, #fff);
}

.hs-voice-playback__transcript-panel .hs-conv-transcript-toolbar {
  padding-top: 10px;
}

.hs-conv-transcript-thread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--hs-bg-sunken, #f4f7f5);
  padding: 16px 14px 20px;
  min-height: 12rem;
  border-radius: 12px;
}

.hs-conv-transcript-thread .hs-chat-msg {
  margin-bottom: 12px;
  max-width: min(88%, 340px);
  width: fit-content;
}

.hs-conv-transcript-thread .hs-chat-msg.inbound {
  align-self: flex-start;
  margin-right: auto;
  margin-left: 0;
}

.hs-conv-transcript-thread .hs-chat-msg.outbound {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.hs-conv-transcript-thread .hs-chat-bubble {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.hs-conv-transcript-thread .hs-chat-msg.inbound .hs-chat-bubble {
  background: var(--hs-bg-raised, #fff);
  color: var(--hs-fg-primary, #0e1b11);
  border: 2px solid var(--hs-aqua, #43e5a4);
  box-shadow: 0 1px 3px rgba(67, 229, 164, 0.14);
  border-bottom-left-radius: 5px;
}

.hs-conv-transcript-thread .hs-chat-msg.outbound .hs-chat-bubble {
  background: var(--hs-aqua, #43e5a4);
  color: var(--hs-fg-on-accent, #0e1b11);
  border: none;
  border-bottom-right-radius: 5px;
}

.hs-conv-transcript-thread .hs-chat-bubble__block + .hs-chat-bubble__block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(26, 36, 32, 0.1);
}

.hs-conv-transcript-thread .hs-chat-msg.outbound .hs-chat-bubble__block + .hs-chat-bubble__block {
  border-top-color: rgba(26, 36, 32, 0.14);
}

.hs-conv-transcript-thread .hs-chat-bubble__lang {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

.hs-conv-transcript-thread .hs-chat-msg.outbound .hs-chat-bubble__lang {
  color: rgba(26, 36, 32, 0.62);
}

.hs-conv-transcript-thread .hs-chat-bubble__block--translation {
  color: var(--hs-text-muted);
  font-size: 13px;
}

.hs-conv-transcript-thread .hs-chat-msg.outbound .hs-chat-bubble__block--translation {
  color: rgba(26, 36, 32, 0.78);
}

.hs-conv-transcript-thread .hs-chat-time {
  font-size: 12px;
  color: var(--hs-text-muted);
  margin-top: 3px;
}

.hs-voice-playback__transcript.hs-conv-transcript-thread {
  padding-top: 0.75rem;
}

.hs-voice-playback-turn {
  display: block;
  width: auto;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.hs-voice-playback-turn.is-active .hs-chat-bubble {
  outline: 2px solid var(--hs-accent, #4f6ef7);
  outline-offset: 2px;
}

.hs-activity-ai-detail {
  display: grid;
  gap: 12px 20px;
  margin: 0;
  padding: 0.5rem 0;
}

@media (min-width: 520px) {
  .hs-activity-ai-detail {
    grid-template-columns: 1fr 1fr;
  }
}

.hs-activity-ai-detail > div {
  margin: 0;
}

.hs-activity-ai-detail dt {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--hs-text-muted);
  margin: 0 0 4px;
}

.hs-activity-ai-detail dd {
  margin: 0;
  font-weight: 600;
}

.hs-activity-ai-detail__wide {
  grid-column: 1 / -1;
}

.hs-activity-ai-detail--compact {
  display: block;
  margin: 0;
  padding: 0;
}

.hs-activity-ai-detail--compact .hs-activity-ai-detail__line {
  margin: 0;
}

.hs-activity-ai-detail--compact .hs-activity-ai-detail__line dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--hs-neutral-600);
  line-height: 1.5;
}

.hs-activity-ai-detail--compact .hs-activity-ai-detail__wide {
  margin-top: 12px;
}

/* Portal — buttons, forms, links */
.hs-portal-page .hs-btn {
  font-family: var(--hs-font-ui);
}

.hs-portal-page .hs-activity-row {
  background: var(--panel, #fff);
  color: var(--hs-neutral-800);
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  box-shadow: none;
}

.hs-portal-page .hs-activity-rows > .hs-activity-row:last-child,
.hs-portal-page .hs-activity-daygroup .hs-activity-row:last-child {
  border-bottom-color: var(--hair, #e7edea);
}

.hs-portal-page .hs-activity-row:hover,
.hs-portal-page .hs-activity-row:focus-visible,
.hs-portal-page .hs-activity-row--selected {
  background: var(--panel, #fff);
  color: var(--hs-neutral-800);
}

.hs-portal-page .hs-activity-row:hover::before,
.hs-portal-page .hs-activity-row:focus-visible::before,
.hs-portal-page .hs-activity-row--selected::before {
  background: rgba(15, 61, 46, 0.045);
  background: color-mix(in srgb, var(--accent-tint, #f4faf8) 70%, transparent);
}

.hs-portal-page .hs-conv-search input {
  padding: 0 40px 0 42px;
  min-height: 44px;
  height: 44px;
  font-size: 14px;
  border-radius: var(--r-md, 12px);
}

.hs-portal-page .hs-input,
.hs-portal-page .hs-select,
.hs-portal-page .hs-textarea,
.hs-portal-page select.hs-input {
  font-family: var(--hs-font-ui);
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hs-neutral-250);
  border-radius: 10px;
  color: var(--hs-neutral-800);
}

/* `padding: 0 14px` above is correct for an input — it centres inside the 44px
   min-height. On a TEXTAREA there is nothing to centre: text starts at the
   content box, which is flush against the border, and the first line reads as
   clipped. Every multi-line field wearing .hs-input had this ("When to use
   (for Julia)", the phone skill fields, the scenario bodies). Textareas get
   real vertical padding and a line-height that leaves room for descenders. */
.hs-portal-page textarea.hs-input {
  padding: 11px 14px;
  line-height: 1.5;
}

.hs-portal-page .hs-input[type="search"],
.hs-portal-page input.hs-input:not([type]) {
  font-weight: 500;
}

.hs-portal-page .hs-input::placeholder {
  color: var(--hs-neutral-400);
  font-weight: 500;
}

.hs-portal-page .hs-input:focus,
.hs-portal-page .hs-select:focus,
.hs-portal-page .hs-textarea:focus {
  outline: none;
  border-color: var(--hs-aqua);
  box-shadow: 0 0 0 3px rgba(67, 229, 164, 0.2);
}

.hs-portal-page .hs-textarea {
  min-height: 120px;
  padding: 14px 18px;
}

.hs-portal-page a.hs-link {
  border-bottom: none;
}

/* Agent enabled switch */
.hs-agent-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0.5rem;
}

.hs-agent-card-head h3 {
  margin: 0;
}

.hs-agent-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.hs-agent-switch.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.hs-agent-switch__track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8e0dc;
  border: 1px solid #c5cfc9;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.hs-agent-switch__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.hs-agent-switch.is-on .hs-agent-switch__track {
  background: var(--hs-aqua, #43e5a4);
  border-color: var(--hs-aqua, #43e5a4);
}

.hs-agent-switch.is-on .hs-agent-switch__thumb {
  transform: translateY(-50%) translateX(18px);
}

.hs-agent-switch__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hs-text-muted);
  min-width: 1.5rem;
}

.hs-agent-switch.is-on .hs-agent-switch__label {
  color: var(--hs-ink, #0e1b11);
}

.hs-agent-switch:focus-within .hs-agent-switch__track {
  outline: 2px solid var(--hs-aqua, #43e5a4);
  outline-offset: 2px;
}

.hs-phone-skills-card {
  margin-top: 1rem;
}

.hs-phone-skills-card__head {
  margin-bottom: 0.25rem;
}

.hs-phone-skills-card__head h3 {
  margin: 0 0 0.35rem;
}

.hs-phone-skills-card__head .sub {
  margin: 0;
}

.hs-phone-skills-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.75rem;
}

.hs-phone-skill-card {
  border: none;
  border-bottom: 1px solid var(--hair, #e7edea);
  border-radius: 0;
  padding: 0.95rem 0;
  background: transparent;
  box-shadow: none;
}

.hs-phone-skill-card:last-child {
  border-bottom-color: transparent;
}

.hs-phone-skill-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hs-phone-skill-card__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
}

.hs-phone-skill-card__title--expandable {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}

.hs-phone-skill-card__title--expandable .hs-phone-skill-card__lead {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-phone-skill-card__action {
  flex: 0 0 auto;
  align-self: center;
}

.hs-phone-skill-card__lead {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  row-gap: 0.06rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.hs-phone-skill-card__lead > .hs-phone-skill-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.hs-phone-skill-card__lead > .hs-phone-skill-card__copy {
  display: contents;
}

.hs-phone-skill-card__lead h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: center;
}

.hs-phone-skill-card__lead .hs-phone-skill-card__desc,
.hs-phone-skill-card__lead .hs-phone-skill-card__summary,
.hs-phone-skill-card__lead .sub {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.hs-phone-skill-card__title--expandable:not(:disabled):hover {
  background: rgba(16, 36, 28, 0.03);
}

.hs-phone-skill-card__title--expandable:disabled {
  cursor: default;
}

.hs-phone-skill-card__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7a8a82;
  transition: transform 0.18s ease;
}

.hs-phone-skill-card--collapsible.is-expanded .hs-phone-skill-card__chevron {
  transform: rotate(180deg);
}

.hs-phone-skill-card__body {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eef2ef;
}

.hs-phone-skill-card__body .hs-phone-skill-config--multilingual {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.hs-phone-skill-card__control {
  flex: 0 0 auto;
  max-width: 11.5rem;
  min-width: 8.5rem;
}

.hs-phone-skill-card__head > .hs-agent-switch,
.hs-phone-skill-card__action .hs-agent-switch {
  flex: 0 0 auto;
}

.hs-phone-skill-card--transfer {
  border-color: #d8ebe3;
}

.hs-phone-skill-card--sms {
  border-color: #dfe8f5;
}

.hs-phone-skill-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: #eef6f1;
  color: #1b6b42;
}

.hs-phone-skill-icon--focus {
  background: #eef5fb;
  color: #1a5f8a;
}

.hs-phone-skill-icon--web {
  background: #edf3fb;
  color: #245ea8;
}

.hs-phone-skill-card--focus {
  border-color: #dce8f0;
}

.hs-phone-skill-card--web {
  border-color: #dfe8f5;
}

.hs-phone-skill-icon--transfer {
  background: #e8f5ef;
  color: #157a4a;
}

.hs-phone-skill-icon--sms {
  background: #edf3fb;
  color: #245ea8;
}

.hs-phone-skill-icon--record {
  background: #f3eef8;
  color: #6b4c9a;
}

.hs-phone-skill-card--record {
  border-color: #e8dff0;
}

.hs-phone-skill-field__hint {
  margin: 0.2rem 0 0.45rem;
}

.hs-sms-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.hs-sms-links-list--sub {
  margin-top: 0.35rem;
  padding-left: 0.15rem;
}

.hs-sms-link-item {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.hs-sms-link-item > summary,
.hs-sms-link-item__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2, #4a5c52);
  background: transparent;
  border: none;
}

.hs-sms-link-item > summary::-webkit-details-marker {
  display: none;
}

.hs-sms-link-item > summary::before,
.hs-sms-link-item__summary::before {
  content: "▸";
  color: #8a9a91;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.hs-sms-link-item[open] > summary::before,
.hs-sms-link-item.is-open .hs-sms-link-item__summary::before {
  transform: rotate(90deg);
}

/* Each link carries its own on/off switch — the card no longer has a master toggle. */
.hs-sms-link-item__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hs-sms-link-item__bar .hs-sms-link-item__summary {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.hs-sms-link-item__body {
  display: none;
}

.hs-sms-link-item.is-open > .hs-sms-link-item__body {
  display: block;
}

.hs-sms-link-item.is-off .hs-sms-link-item__summary,
.hs-sms-link-item.is-off .hs-sms-link-item__body {
  opacity: 0.55;
}

.hs-sms-link-item__label {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.hs-sms-link-item__body {
  padding: 0.55rem 0 0.35rem;
  border-top: none;
  margin-top: 0.25rem;
}

.hs-sms-link-item__actions,
.hs-sms-link-compose__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.hs-sms-link-compose {
  margin-top: var(--hs-space-3, 12px);
  padding-top: var(--hs-space-3, 12px);
  border-top: 1px solid var(--hs-border-subtle, #e2e8e4);
}

.hs-sms-link-add-row {
  margin-top: var(--hs-space-4, 16px);
  padding-top: var(--hs-space-4, 16px);
  border-top: 1px solid var(--hs-border-subtle, #e2e8e4);
}

.hs-sms-link-add-row[hidden] {
  display: none;
}

.hs-sms-link-add {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #c5d4cc;
  border-radius: 10px;
  background: #fbfdfc;
  color: #2f4a3b;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hs-sms-link-add:hover {
  border-color: var(--hs-aqua, #43e5a4);
  background: #f3fbf7;
  color: #124c2f;
}

.hs-sms-link-add__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #e8f5ef;
  color: #157a4a;
  font-size: 1rem;
  line-height: 1;
}

.hs-sms-link-body-hint {
  margin: 0.3rem 0 0;
  font-size: 12px;
}

/* Sits under the configured links: an extra mode, not a replacement for them. */
.hs-sms-auto-offer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-3, 12px);
  margin-top: var(--hs-space-4, 16px);
  padding-top: var(--hs-space-4, 16px);
  border-top: 1px solid var(--hs-neutral-200);
}

.hs-sms-auto-offer__text {
  display: grid;
  gap: 0.15rem;
}

.hs-sms-auto-offer__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-neutral-900);
}

.hs-sms-auto-offer__desc {
  font-size: 12px;
  max-width: 46ch;
}

/* No wrapper box: the tool fold already frames this content, and a bordered
   box holding two more bordered boxes read as a card in a card in a card.
   The option rows below keep the only border this section needs. */
.hs-midcall-sms-mode {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2, 8px);
  margin: var(--hs-space-3, 12px) 0 var(--hs-space-4, 16px);
}

.hs-midcall-sms-mode__label {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #17241c);
}

.hs-midcall-sms-mode__option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hs-neutral-250, #d8ddd4);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hs-midcall-sms-mode__option.is-selected {
  border-color: var(--accent-2, #43e5a4);
  background: var(--accent-tint, #e6fbf1);
  box-shadow: inset 0 0 0 1px var(--accent-2, #43e5a4);
}

/* The dial from the design-system bridge replaces the bare native radio —
   which rendered blue on this row, the one native control on the page. The
   input stays in the tree (1px, clipped) so keyboard focus and the label's
   click wiring keep working. */
.hs-midcall-sms-mode__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.hs-midcall-sms-mode__option:has(input:focus-visible) {
  outline: 2px solid var(--hs-border-focus, #0b7350);
  outline-offset: 2px;
}

/* Title + badge share a row; the badge hugs its text instead of stretching
   to the column width. */
.hs-midcall-sms-mode__head {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hs-midcall-sms-mode__head .hs-badge {
  flex: none;
}

/* Direct child only: as a descendant selector this also caught the title
   row and the sub, turning the head into a centred flex column — which is
   what stretched the Recommended badge and floated the titles mid-row. */
.hs-midcall-sms-mode__option > span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
  min-width: 0;
}

.hs-midcall-sms-mode__option .sub {
  font-size: 0.8rem;
  color: #66756d;
  line-height: 1.35;
}

.hs-midcall-sms-mode__option.is-needs-setup {
  border-style: solid;
}

.hs-midcall-sms-setup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 2px;
}

.hs-midcall-sms-setup .sub {
  margin: 0;
  font-size: 0.8rem;
  color: #66756d;
  line-height: 1.35;
}

.hs-phone-skill-card--multilingual {
  border-color: #dce8f0;
}

.hs-phone-skill-icon--multilingual {
  background: #edf5fb;
  color: #1a5f8a;
}

.hs-phone-skill-icon--time {
  background: #f3f0fb;
  color: #5b4ba8;
}

.hs-phone-skill-icon--owner-auth {
  background: #eef6f1;
  color: #1b6b42;
}

.hs-phone-skill-icon--voice,
.hs-phone-skill-icon--greeting {
  background: #eef6f1;
  color: #1b6b42;
}

.hs-phone-tool-option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hs-phone-tool-option {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  background: #fff;
  color: #1a2e24;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.hs-phone-tool-option__ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(14, 27, 17, 0.05);
  color: #1a2420;
}

.hs-phone-tool-option__ic svg {
  width: 20px;
  height: 20px;
}

.hs-phone-tool-option:hover {
  border-color: #b8cfc2;
  background: #fbfdfc;
}

.hs-phone-tool-option.is-selected {
  border-color: #111;
  background: #fff;
  box-shadow: inset 0 0 0 1px #111;
}

.hs-phone-tool-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hs-phone-tool-option__label {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}

.hs-phone-tool-option__desc {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #5f6f68;
}

.hs-multilingual-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hs-multilingual-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hs-multilingual-lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid #d8e3de;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.2;
  user-select: none;
}

.hs-multilingual-lang-chip:has(.hs-multilingual-lang-chip__input:checked) {
  border-color: #1b6b42;
  background: #eef8f2;
}

.hs-multilingual-lang-chip__input {
  margin: 0;
}

.hs-phone-skill-config--multilingual {
  gap: 0.85rem;
}

.hs-phone-skill-card__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-phone-skill-card__copy h4,
.hs-phone-skill-card__lead h4 {
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 600;
}

.hs-phone-skill-card__desc,
.hs-phone-skill-card__summary {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #5f6f68;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-phone-skill-card__copy p {
  margin: 0;
}

.hs-phone-skill-hint {
  margin: 0.75rem 0 0;
}

.hs-phone-skill-hint--ok {
  color: #1b6b42;
}

.hs-phone-skill-config {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eef2ef;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hs-phone-skill-config__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid #eef2ef;
}

.hs-phone-skill-config__actions[hidden] {
  display: none !important;
}

.hs-phone-skill-config--transfer .hs-phone-skill-config__actions {
  margin-top: 0.5rem;
}

.hs-phone-skill-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hs-phone-skill-field label,
.hs-call-transfer-field__label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--hs-neutral-800, #1a2e24);
  margin: 0;
}

.hs-phone-skills-card .hs-input,
.hs-phone-skills-card textarea.hs-input {
  width: 100%;
  box-sizing: border-box;
}

.hs-phone-skills-card textarea.hs-input {
  min-height: 88px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.hs-phone-skill-config--transfer {
  gap: 0;
}

.hs-phone-skill-card--transfer .hs-phone-skill-card__body {
  padding: 1rem 1.1rem 1.15rem;
}

.hs-call-transfer-setup {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.hs-call-transfer-section {
  padding: 1.1rem 1.15rem;
  border: 1px solid #e8efeb;
  border-radius: 12px;
  background: #fff;
}

.hs-call-transfer-section__head {
  margin-bottom: 0.85rem;
}

.hs-call-transfer-section__head h5 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.hs-call-transfer-section__head .sub {
  margin: 0;
}

.hs-call-transfer-section__head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.hs-call-transfer-default__top,
.hs-call-transfer-row__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hs-call-transfer-row__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.hs-call-transfer-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #eef2ef;
}

.hs-call-transfer-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Per-line switch bar — replaces the card-level on/off toggle. */
.hs-call-transfer-row__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hs-call-transfer-row__bar-label {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #7a8680;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hs-call-transfer-row.is-off .hs-call-transfer-row__fields,
.hs-call-transfer-row.is-off .hs-call-transfer-row__meta,
.hs-call-transfer-row.is-off .hs-call-transfer-field--when {
  opacity: 0.55;
}

.hs-time-window-row.is-off .hs-time-window-row__summary,
.hs-time-window-row.is-off .hs-time-window-row__details {
  opacity: 0.55;
}

/* Switch for a single row inside a tool card — sizing comes from the panel styles. */
.hs-agent-switch--row {
  gap: 6px;
  flex: none;
}

.hs-call-transfer-field--when {
  width: 100%;
}

.hs-call-transfer-field__hint {
  display: block;
  margin: -0.15rem 0 0.35rem;
  font-size: 0.82rem;
}

.hs-call-transfer-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.hs-phone-skills-card .hs-call-transfer-field .hs-input,
.hs-phone-skills-card .hs-call-transfer-field select.hs-input {
  min-height: 42px;
  padding: 0.65rem 0.75rem;
  font-size: 0.92rem;
}

.hs-call-transfer-field--grow {
  grid-column: span 1;
}

.hs-call-transfer-field__label {
  font-size: 0.88rem;
}

.hs-call-transfer-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: #7a8680;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  white-space: nowrap;
  align-self: end;
}

.hs-call-transfer-remove:hover {
  color: #b42318;
  background: #fff7f6;
}

.hs-call-transfer-add {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid #c5d4cc;
  border-radius: 10px;
  background: #fbfdfc;
  color: #2f4a3b;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hs-call-transfer-add:hover {
  border-color: var(--hs-aqua, #43e5a4);
  background: #f3fbf7;
  color: #124c2f;
}

.hs-call-transfer-add__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #e8f5ef;
  color: #157a4a;
  font-size: 1rem;
  line-height: 1;
}

/* Web search card body — what the tool does, plus the topic and behaviour settings. */
.hs-web-search-config {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.hs-web-search-about .sub {
  margin: 0 0 0.5rem;
}

.hs-web-search-about__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-2, #4a5c52);
}

.hs-web-search-section {
  padding: 0.85rem 1rem;
  border: 1px solid #e8efeb;
  border-radius: 12px;
  background: #fff;
}

.hs-web-search-section h5 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.hs-web-search-section > .sub {
  margin: 0 0 0.7rem;
}

.hs-web-search-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

.hs-web-search-topic {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid #e2eae5;
  border-radius: 10px;
  background: #fbfdfc;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hs-web-search-topic.is-on {
  border-color: color-mix(in srgb, var(--hs-aqua, #43e5a4) 55%, #e2eae5);
  background: #f3fbf7;
}

.hs-web-search-topic__input {
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--hs-aqua, #43e5a4);
}

.hs-web-search-topic__txt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hs-web-search-topic__label {
  font-size: 0.88rem;
  font-weight: 600;
}

.hs-web-search-topic__hint {
  font-size: 0.78rem;
}

.hs-web-search-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid #eef2ef;
}

.hs-web-search-opt:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.hs-web-search-opt__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hs-web-search-opt__label {
  font-size: 0.88rem;
  font-weight: 600;
}

.hs-web-search-opt__hint {
  font-size: 0.78rem;
}

.hs-phone-skill-config--time-windows {
  gap: 0;
}

.hs-time-windows-setup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hs-time-windows-section {
  padding: 0.95rem 1rem;
  border: 1px solid #e8efeb;
  border-radius: 12px;
  background: #fff;
}

.hs-time-windows-section__head {
  margin-bottom: 0.85rem;
}

.hs-time-windows-section__head h5 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.hs-time-windows-section__head .sub {
  margin: 0;
}

.hs-time-window-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid #eef2ef;
}

.hs-time-window-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.hs-time-window-row--collapsible {
  gap: 0;
}

.hs-time-window-row__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hs-time-window-row__summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  background: #f7faf8;
}

.hs-time-window-row__summary:hover {
  background: #f0f6f2;
}

.hs-time-window-row__summary .hs-ptool__chev {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: #7a8680;
  transition: transform 0.2s ease;
}

.hs-time-window-row.is-open .hs-time-window-row__summary .hs-ptool__chev {
  transform: rotate(180deg);
}

.hs-time-window-row__summary-txt {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.hs-time-window-row__summary-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f3428;
}

.hs-time-window-row__summary-meta {
  font-size: 0.8rem;
  color: #6f7d76;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-time-window-row__summary-behaviours {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hs-time-window-row__summary-behaviour {
  font-size: 0.8rem;
  color: #4a5c52;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hs-time-window-row__summary-behaviour-label {
  font-weight: 600;
  color: #3d5246;
}

.hs-time-window-row__summary-behaviour--off {
  color: #6f7d76;
}

.hs-time-window-row__summary-behaviour.is-empty {
  color: #9aa8a0;
  font-style: italic;
  -webkit-line-clamp: unset;
  display: block;
}

.hs-time-window-row__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.hs-time-window-row.is-open .hs-time-window-row__details {
  grid-template-rows: 1fr;
}

.hs-time-window-row__details-in {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.hs-time-window-row__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(12rem, auto);
  gap: 0.85rem;
  align-items: end;
}

.hs-time-window-row__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.hs-time-window-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.hs-time-window-field__label {
  font-size: 0.88rem;
}

.hs-time-window-field__hint {
  display: block;
  margin: -0.15rem 0 0.35rem;
  font-size: 0.82rem;
}

.hs-time-window-field--schedule .hs-skill-sgc {
  width: 100%;
  max-width: 18rem;
  min-height: 44px;
}

.hs-time-window-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hs-time-window-day {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #dbe5df;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
}

.hs-time-window-day.is-on {
  border-color: var(--hs-aqua, #43e5a4);
  background: #f3fbf7;
  color: #124c2f;
}

.hs-time-window-day__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hs-time-window-remove,
.hs-time-window-edit,
.hs-time-window-add {
  appearance: none;
  border: 0;
  background: transparent;
  color: #7a8680;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  white-space: nowrap;
  align-self: center;
}

.hs-time-window-edit {
  color: #2f4a3b;
}

.hs-time-window-edit:hover {
  color: #124c2f;
  background: #f3fbf7;
}

.hs-time-window-remove:hover {
  color: #b42318;
  background: #fff7f6;
}

.hs-time-window-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid #c5d4cc;
  border-radius: 10px;
  background: #fbfdfc;
  color: #2f4a3b;
  font-size: 0.9rem;
}

.hs-time-window-add:hover {
  border-color: var(--hs-aqua, #43e5a4);
  background: #f3fbf7;
  color: #124c2f;
}

.hs-call-transfer-field--mode .hs-skill-sgc,
.hs-call-transfer-field--toggle .hs-skill-sgc {
  width: 100%;
  max-width: 16rem;
  min-height: 44px;
  box-sizing: border-box;
  align-self: stretch;
}

.hs-call-transfer-row__meta .hs-call-transfer-field--mode {
  flex: 1 1 14rem;
  min-width: 0;
}

.hs-call-transfer-field--mode .sgc button,
.hs-call-transfer-field--toggle .sgc button {
  flex: 1;
}

.hs-call-transfer-options {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

@media (max-width: 720px) {
  .hs-call-transfer-default__top,
  .hs-call-transfer-row__fields {
    grid-template-columns: 1fr;
  }

  .hs-call-transfer-row__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .hs-call-transfer-section__head--split {
    flex-direction: column;
    align-items: stretch;
  }

  .hs-call-transfer-remove {
    margin-top: 0;
    justify-self: flex-start;
  }
}

/* Connectors table */
.hs-connectors-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

.hs-connectors-table col.col-name {
  width: 36%;
}

.hs-connectors-table col.col-perm {
  width: 16%;
}

.hs-connectors-table col.col-account {
  width: 32%;
}

.hs-connectors-table col.col-action {
  width: 16%;
}

.hs-connectors-table th,
.hs-connectors-table td {
  padding: 14px 14px;
  text-align: left;
  border-bottom: 1px solid #E7EDEA;
  vertical-align: middle;
}

.hs-connectors-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hs-text-muted);
}

.hs-connectors-table tbody tr:last-child td {
  border-bottom: none;
}

.hs-connectors-table thead th {
  border-bottom: 1px solid #E7EDEA;
}

.hs-connectors-section + .hs-connectors-section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #E7EDEA;
}

/*
 * Connectors desktop grid — must stay behind min-width:900px.
 * Unscoped `display: contents` on rows overrides the mobile card layout
 * later in the cascade and breaks tap targets (esp. Safari).
 */
@media (min-width: 900px) {
  .hs-connectors-layout {
    display: grid;
    grid-template-columns: minmax(148px, 1.1fr) minmax(108px, 0.85fr) minmax(160px, 1.15fr) minmax(88px, auto);
    margin-top: 8px;
    padding-bottom: 6px;
  }

  .hs-connectors-layout__header,
  .hs-connectors-layout__row:not(.hs-cw-card) {
    display: contents;
  }

  .hs-connectors-layout__header > span {
    padding: 0 14px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hs-text-muted);
    border-bottom: 1px solid #E7EDEA;
  }

  .hs-connectors-layout__row:not(.hs-cw-card) > * {
    padding: 14px 14px;
    border-bottom: 1px solid #E7EDEA;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: center;
  }

  .hs-connectors-layout__row:not(.hs-cw-card) .hs-connector-name {
    align-items: flex-start;
  }

  .hs-connectors-layout__row:not(.hs-cw-card):has(+ .hs-connectors-layout__section) > * {
    border-bottom: none;
  }

  .hs-connectors-layout__section {
    grid-column: 1 / -1;
    padding: 0 14px 10px;
    font-family: var(--hs-font-ui);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hs-neutral-800);
  }

  .hs-connectors-layout__section:first-of-type {
    margin-top: 0.5rem;
  }

  .hs-connectors-layout__section:not(:first-of-type) {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #E7EDEA;
  }

  .hs-connectors-layout__empty {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-bottom: 1px solid #E7EDEA;
  }

  .hs-connectors-layout__empty:has(+ .hs-connectors-layout__section) {
    border-bottom: none;
  }
}

/* Shared connectors chrome (all breakpoints) */
.hs-connectors-layout__section {
  font-family: var(--hs-font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hs-neutral-800);
}

.hs-connector-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow: visible;
}

.hs-connector-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.hs-connectors-layout .hs-btn,
.hs-connectors-layout .hs-btn.hs-btn-sm,
.hs-connectors-table .hs-btn {
  min-height: 36px;
  padding: 0 14px;
  line-height: 1.2;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.hs-connector-limit {
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-text-muted);
  white-space: nowrap;
}

.hs-connectors-section h4 {
  margin: 0 0 4px;
  font-family: var(--hs-font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hs-neutral-800);
}

.hs-connectors-section > .sub {
  margin: 0 0 14px;
}

.hs-connector-account {
  font-size: 13px;
  color: var(--hs-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-connector-perm {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-connectors-add {
  margin-top: 0;
}

.hs-connector-name {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  min-width: 0;
}

.hs-connector-name > span,
.hs-connector-name__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.hs-connector-name:has(.hs-connector-caps) > span,
.hs-connector-name:has(.hs-connector-caps) .hs-connector-name__text {
  white-space: normal;
  text-overflow: unset;
}

.hs-connector-name .hs-connector-logo,
.hs-connector-name .hs-connector-logo--kb {
  margin-top: 2px;
}

.hs-connector-caps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--hs-text-muted, #5c6b63);
}

.hs-connector-caps li {
  position: relative;
  padding-left: 12px;
}

.hs-connector-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.hs-cs-unlocks {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.hs-cs-unlocks li {
  position: relative;
  padding: 10px 12px 10px 28px;
  border: 1px solid var(--neutral-200, #eff0f6);
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--neutral-700, #404040);
}

.hs-cs-unlocks li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--aquamarine, #43e5a4);
}

.hs-connector-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: contain;
  background: var(--hs-neutral-150);
}

.hs-connector-logo--meta {
  background: #0a0a0a;
  padding: 3px;
  box-sizing: border-box;
}

.hs-connector-logo--stripe {
  background: #0a0a0a;
  padding: 4px 2px;
  box-sizing: border-box;
}

.hs-connectors-table .hs-btn {
  box-sizing: border-box;
}

.hs-connectors-table td:last-child,
.hs-connectors-table th:last-child {
  text-align: right;
}

/* Phone agent preview — lander callcard styling */
.hs-phone-preview {
  margin-top: 1.25rem;
}

.hs-phone-procure {
  margin: 0 0 var(--hs-space-3, 1rem);
}

.hs-phone-procure-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-top: 0.85rem;
}

.hs-phone-claim-cost {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--ink-2, #4a5c52);
}

.hs-phone-claim-cost strong {
  color: var(--ink, #0e1b11);
  font-weight: 700;
}

.hs-phone-secure-card {
  margin: 0;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--hs-border, #d8dee6);
  border-radius: 12px;
  background: #fff;
}

.hs-phone-secure-card__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink, #0e1b11);
}

.hs-phone-provision {
  margin-bottom: 0.75rem;
}

.hs-phone-provision-fee {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
}

.hs-phone-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.85rem;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.hs-phone-search-form--compact .hs-phone-search-form__field--country {
  flex: 0 0 auto;
  width: 7.5rem;
  max-width: 7.5rem;
}

.hs-phone-search-form--compact .hs-phone-search-form__field--country-hint {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  align-self: flex-start;
  margin-bottom: -0.25rem;
}

.hs-phone-country-hint {
  font-size: 0.85rem;
  color: var(--ink-2, #4a5c52);
}

.hs-phone-country-change,
.hs-cf-country-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.hs-phone-address-nudge {
  margin: 0 0 0.65rem;
}

.hs-phone-search-form--secure {
  align-items: flex-end;
  flex-wrap: nowrap;
}

.hs-phone-search-form--secure .hs-phone-search-form__field--area-select,
.hs-phone-search-form--secure .hs-phone-search-form__field--area-custom {
  flex: 0 1 14rem;
  width: 14rem;
  min-width: 8rem;
  max-width: 18rem;
}

.hs-phone-search-form--secure .hs-phone-search-form__field--number {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 22rem;
}

.hs-phone-area-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.hs-phone-area-label-row label {
  margin-bottom: 0;
}

.hs-phone-area-back {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hs-accent, #1a7f4b);
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

.hs-phone-area-back:hover {
  text-decoration: underline;
}

.hs-phone-search-form__field--area-custom .hs-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-align: center;
}

.hs-phone-credits-gate__body {
  margin: 0 0 0.85rem;
}

.hs-phone-credits-gate__packs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
}

.hs-phone-credits-gate__packs .hs-billing-topup-btn {
  flex: 1 1 140px;
  max-width: 180px;
}

.hs-phone-credits-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.hs-phone-search-form__field {
  flex: 0 1 auto;
  min-width: 0;
}

.hs-phone-search-form__field--area {
  flex: 0 0 auto;
  width: 5.5rem;
  max-width: 5.5rem;
}

.hs-phone-search-form__field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--ink-2, #4a5c52);
}

.hs-phone-search-form__field .hs-input,
.hs-phone-search-form__field select.hs-input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  line-height: 1.25;
  padding: 0 12px;
}

.hs-phone-search-form__field select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.hs-phone-search-form__action {
  flex: 0 0 auto;
}

.hs-phone-search-form__action .hs-btn {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}

.hs-phone-search-form__action .hs-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hs-phone-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}

.hs-phone-area-chip {
  border: 1px solid var(--hs-border, #d8dee6);
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.hs-phone-area-chip.is-selected {
  border-color: var(--hs-accent, #1a7f4b);
  background: rgba(26, 127, 75, 0.08);
  font-weight: 600;
}

.hs-phone-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.hs-phone-preview-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  border: 1px solid var(--hs-border, #d8dee6);
  background: #fff;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  font-size: 0.875rem;
  width: 100%;
}

.hs-phone-preview-item__number {
  font-weight: 600;
  font-size: 0.9375rem;
}

.hs-phone-preview-item__meta {
  font-size: 0.8125rem;
  color: var(--hs-text-muted, #666);
}

.hs-phone-preview-item.is-selected {
  border-color: var(--hs-accent, #1a7f4b);
  background: rgba(26, 127, 75, 0.08);
  box-shadow: inset 0 0 0 1px var(--hs-accent, #1a7f4b);
}

@media (max-width: 720px) {
  .hs-phone-search-form--secure {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .hs-phone-search-form--compact {
    flex-direction: column;
    align-items: stretch;
  }

  .hs-phone-search-form--compact .hs-phone-search-form__field--country,
  .hs-phone-search-form--compact .hs-phone-search-form__field--area,
  .hs-phone-search-form--secure .hs-phone-search-form__field--area-select,
  .hs-phone-search-form--secure .hs-phone-search-form__field--area-custom,
  .hs-phone-search-form--secure .hs-phone-search-form__field--number {
    width: 100%;
    max-width: none;
  }

  .hs-phone-credits-gate__packs .hs-billing-topup-btn {
    max-width: none;
  }

  .hs-phone-search-form__action .hs-btn {
    width: 100%;
  }
}

.hs-phone-greeting-field {
  margin-top: 1rem;
}

.hs-phone-settings-tab .hs-phone-skill-field textarea.hs-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.hs-phone-greeting-field .hs-btn {
  align-self: flex-start;
  margin-top: 0.35rem;
}

.hs-callcard {
  background: var(--hs-everglade-900, #0e1b11);
  border-radius: 24px;
  padding: 24px 24px 26px;
  color: #f9faf2;
  box-shadow: 0 26px 64px rgba(8, 15, 52, 0.2);
  border: 1px solid #1c2c24;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.hs-callcard .call-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.hs-callcard .call-tag {
  color: #9fb3a9;
  font-weight: 600;
}

.hs-callcard .call-timer {
  color: #9fb3a9;
  font-variant-numeric: tabular-nums;
}

.hs-callcard .call-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0 14px;
}

.hs-callcard .call-id .ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #16261c;
  border: 2px solid rgba(67, 229, 164, 0.4);
}

.hs-callcard .call-id .ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.hs-callcard .call-id b {
  font-size: 18px;
  font-weight: 700;
}

.hs-callcard .call-id span {
  font-size: 13px;
  color: #9fb3a9;
}

.hs-callcard .call-id #hs-voice-call-sub.ok,
.hs-callcard .call-id #hs-voice-call-sub.err {
  min-height: 1.25rem;
}

.hs-callcard .call-id #hs-voice-call-sub.ok {
  color: var(--pass, var(--hs-success, #43e5a4));
}

.hs-callcard .call-id #hs-voice-call-sub.err {
  color: var(--fail, var(--hs-danger, #ff6b6b));
}

.hs-callcard--voice-embed #hs-voice-status {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.hs-callcard--voice-embed.hs-callcard--sub-status .call-action-wrap {
  margin-top: auto;
}

.hs-callcard--voice-embed .call-tx {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
  margin-bottom: 8px;
  min-height: 120px;
  max-height: 220px;
  overflow-y: auto;
  padding-bottom: 14px;
}

.hs-callcard .call-tx .b {
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 13px;
  border-radius: 13px;
  max-width: 86%;
}

.hs-callcard .call-tx .b.them {
  background: #1c2c24;
  color: #cfe0d8;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.hs-callcard .call-tx .b.julia {
  background: var(--hs-aqua, #43e5a4);
  color: var(--hs-everglade-900, #0e1b11);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

/* Voice connect/end buttons — see voice-call-action.css */

.hs-callcard.live .call-id span:last-child {
  color: var(--hs-aqua, #43e5a4);
}

.hs-callcard.live .call-id #hs-voice-call-sub.err {
  color: var(--fail, var(--hs-danger, #ff6b6b));
}

.hs-callcard.live .call-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hs-aqua, #43e5a4);
  font-weight: 700;
}

.hs-callcard.live .call-live .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hs-aqua, #43e5a4);
  animation: hs-call-pulse 1.4s infinite;
}

/* Phone agent preview — light studio surface */
.hs-callcard.hs-callcard--light {
  background: var(--panel, #fff);
  color: var(--ink, #17241c);
  border: 1px solid var(--hair, #e6eae3);
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px rgba(8, 40, 24, 0.07));
}

.hs-callcard.hs-callcard--light .call-tag,
.hs-callcard.hs-callcard--light .call-timer {
  color: var(--ink-3, #8b948c);
}

.hs-callcard.hs-callcard--light .call-id span {
  color: var(--ink-2, #5c675f);
}

.hs-callcard.hs-callcard--light .call-id #hs-voice-call-sub.ok {
  color: var(--pass, #1e9e63);
}

.hs-callcard.hs-callcard--light .call-id #hs-voice-call-sub.err {
  color: var(--fail, #c62828);
}

.hs-callcard.hs-callcard--light .call-id .ring {
  background: var(--panel-3, #eef2ec);
  border-color: color-mix(in srgb, var(--accent, #43e5a4) 42%, var(--hair, #e6eae3));
}

.hs-callcard.hs-callcard--light .call-tx .b.them {
  background: var(--panel-3, #eef2ec);
  color: var(--ink, #17241c);
  border: 1px solid var(--hair, #e6eae3);
}

.hs-callcard.hs-callcard--light .call-tx .b.julia {
  background: var(--accent, #43e5a4);
  color: var(--accent-ink, #0c2418);
}

.hs-callcard.hs-callcard--light .hs-status {
  color: var(--ink-3, #8b948c);
}

.hs-callcard.hs-callcard--light .hs-status.ok {
  color: var(--pass, #1e9e63);
}

.hs-callcard.hs-callcard--light .hs-status.err {
  color: var(--fail, #d9534f);
}

.hs-callcard.hs-callcard--light.live .call-id span:last-child {
  color: var(--pass, #1e9e63);
}

@keyframes hs-call-pulse {
  0% { box-shadow: 0 0 0 0 rgba(67, 229, 164, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(67, 229, 164, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 229, 164, 0); }
}

/* Social media agent */
.hs-social-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
}

.hs-social-badge--meta {
  background: linear-gradient(135deg, #1877f2, #e1306c);
}

.hs-social-badge--tiktok {
  background: #010101;
}

.hs-social-page-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.hs-social-preview-head h2 {
  margin: 0;
  color: var(--ink, #17241c);
  font-family: var(--font-ui, inherit);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.hs-social-preview-head .sub {
  margin: 4px 0 0;
  font-size: 0.875rem;
}

.hs-social-preview-card {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.hs-connectors-picker-modal__card {
  width: min(520px, 100%);
  padding: 1rem 1.1rem 0.9rem;
}

/* The heading and lead otherwise carry default UA margins, which stack into
   ~85px of empty space above a two-row list. */
.hs-connectors-picker-modal__card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.hs-connectors-picker-modal__card > .sub {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.hs-connectors-picker-modal__card .hs-feedback-modal__actions {
  margin-top: 0.75rem;
}

.hs-connectors-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.hs-connectors-picker__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hair, rgba(14, 27, 17, 0.12));
  border-radius: 12px;
  background: var(--panel, #fff);
}

.hs-connectors-picker__name {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.hs-connectors-picker__name strong {
  display: block;
  font-size: 0.92rem;
  color: var(--ink, #17241c);
}

.hs-connectors-picker__name .sub {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.hs-connectors-picker__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  min-width: 0;
  text-align: end;
}

.hs-connectors-picker__status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2, #3d5248);
}

.hs-connectors-picker__status.is-on {
  color: #1f6b45;
}

.hs-connectors-picker__account {
  font-size: 0.75rem;
  color: var(--ink-2, #3d5248);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hs-connectors-picker__action {
  flex-shrink: 0;
}

@media (max-width: 559px) {
  .hs-connectors-picker__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hs-connectors-picker__meta {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: start;
    order: 3;
  }

  .hs-connectors-picker__action {
    align-self: start;
  }
}

.hs-social-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.hs-social-preview-mount {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hs-social-preview-card--coming-soon .hs-social-thread--sample {
  opacity: 0.92;
}

.hs-social-thread {
  border: 1px solid #e7edea;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fafcfb;
}

.hs-social-thread__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.hs-social-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}

.hs-social-type--inquiry {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.hs-social-type--praise {
  background: rgba(67, 229, 164, 0.2);
  color: #0d5c3f;
}

.hs-social-type--complaint {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.hs-social-thread__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-social-bubble {
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 92%;
}

.hs-social-bubble__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.75;
}

.hs-social-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.hs-social-bubble--them {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e7edea;
}

.hs-social-bubble--julia {
  align-self: flex-end;
  background: var(--hs-aqua-soft, rgba(67, 229, 164, 0.18));
  border: 1px solid rgba(67, 229, 164, 0.35);
}

.hs-social-improve,
.hs-chat-improve {
  margin-top: 6px;
  font-size: 12px;
}

/* Agent Training */
.hs-training-intro {
  margin-bottom: 0;
}

.hs-training-intro__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.hs-training-intro__copy {
  flex: 1 1 16rem;
  min-width: 0;
}

.hs-training-intro__settings {
  flex-shrink: 0;
  align-self: center;
}

.hs-training-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}

.hs-training-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 360px;
  background: var(--hs-neutral-150);
  color: var(--hs-neutral-600);
}

.hs-training-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
}

.hs-training-accordion__section {
  border: 1px solid #e7edea;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.hs-training-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: var(--hs-bg);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--hs-ink);
  transition: background 0.15s;
}

.hs-training-accordion__trigger:hover,
.hs-training-accordion__trigger:focus-visible {
  background: rgba(14, 27, 17, 0.04);
}

.hs-training-accordion__section.is-open > .hs-training-accordion__trigger {
  background: transparent;
}

[data-theme="dark"] .hs-training-accordion__trigger:hover,
[data-theme="dark"] .hs-training-accordion__trigger:focus-visible,
.dark .hs-training-accordion__trigger:hover,
.dark .hs-training-accordion__trigger:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.hs-training-accordion__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Collapsed sections still have to say something, so the trigger carries a
   short summary — a count, a city, "Not set" — pushed to the right. */
.hs-training-accordion__meta {
  margin-left: auto;
  flex: 0 1 auto;
  color: var(--hs-neutral-500, #6b7f73);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-training-accordion__trigger svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.hs-training-accordion__section.is-open .hs-training-accordion__trigger svg {
  transform: rotate(180deg);
}

.hs-training-accordion__body {
  display: none;
  padding: 0 16px 16px;
}

.hs-training-accordion__section.is-open .hs-training-accordion__body {
  display: block;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) label {
  margin: 0;
}

/* 2026-08 audit (UI-002): these fields were the workspace's one underline-only
   form — a side-label grid over borderless inputs, invisible as fields and
   with a focus change of one grey step. They take the system field shell
   (label above, boxed input, token focus ring) so Business info stops being
   its own form language. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
  padding: 10px 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hs-neutral-800);
}

/* Admin-client only: prompt token appears on hover of the field title.
   Click copies {{variable}} for pasting into a prompt. */
.hs-admin-prompt-var {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--hs-radius-sm, 4px);
  background: var(--hs-bg-sunken, #f3f5f3);
  color: var(--hs-neutral-500, #6b7f73);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  text-transform: none;
  vertical-align: middle;
  cursor: copy;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s ease, color 0.12s ease;
}

.hs-admin-prompt-var + .hs-admin-prompt-var {
  margin-left: 4px;
}

.hs-training-field:hover .hs-admin-prompt-var,
.hs-training-field:focus-within .hs-admin-prompt-var,
.hs-biz-subfield:hover > .hs-biz-subfield__title .hs-admin-prompt-var,
.hs-biz-subfield__title:hover .hs-admin-prompt-var,
.hs-admin-prompt-var:focus-visible,
.hs-admin-prompt-var.is-copied {
  opacity: 1;
  transform: none;
}

.hs-admin-prompt-var:hover,
.hs-admin-prompt-var:focus-visible {
  background: var(--hs-neutral-200, #e3ebe6);
  color: var(--hs-neutral-800);
}

.hs-admin-prompt-var:active {
  transform: scale(0.97);
}

@media (hover: none) {
  .hs-admin-prompt-var {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-admin-prompt-var {
    transition: none;
  }
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-input,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) input.hs-training-input,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) textarea.hs-training-input {
  width: 100%;
  font-family: var(--hs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  padding: 8px 12px;
  min-height: 38px;
  height: auto;
  /* .surface-user maps --hs-border-strong to --hair-2, which nothing defines.
     An unresolved var makes the whole shorthand invalid, so this read as
     `0px none` and 51 fields on the page rendered as plain text with no box.
     The fallback chain is the fix here; the blank token is app-wide. */
  border: 1px solid var(--hs-border-strong, var(--hs-neutral-300, #cbd1c9));
  border-radius: var(--hs-radius-md);
  background: var(--hs-bg-raised);
  box-shadow: none;
  color: var(--hs-neutral-800);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-input:focus,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) input.hs-training-input:focus,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) textarea.hs-training-input:focus {
  outline: none;
  border-color: var(--hs-border-accent);
  box-shadow: 0 0 0 var(--hs-size-focus-ring) var(--hs-accent-ring);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-input::placeholder {
  color: var(--hs-neutral-400);
  font-weight: 400;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-input[readonly] {
  color: var(--hs-neutral-600);
  background: var(--hs-bg-sunken);
  border-color: var(--hs-border-subtle);
  cursor: default;
}

/* Same side padding as the input above it. At `6px 0` a textarea's text sat
   flush on its own rounded edge while every input beside it was inset 12px,
   so a label and its value did not share a left edge (2026-08 audit). */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) textarea.hs-training-input {
  min-height: 56px;
  padding: 8px 12px;
  resize: vertical;
  align-self: start;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-field--textarea {
  align-items: start;
}

#ws-panel-agent-settings .hs-what-we-do__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 4px;
}

#ws-panel-agent-settings .hs-what-we-do__bar .hs-biz-behavior-setting__row {
  flex: 1 1 220px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-kb-field-value {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-kb-needs-review {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--hs-amber, #b8801c);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-kb-field-source {
  margin: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-kb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-kb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hs-neutral-200);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-kb-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-kb-pending {
  margin-bottom: 1rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-kb-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hs-neutral-200);
}

/* Compact for a table cell, but the side padding stays — these carry the same
   border as every other field now, and text on the border reads as clipped. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-staff-table .hs-training-input {
  min-width: 88px;
  font-size: 13px;
  padding: 2px 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-business-group {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-business-group:first-of-type {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-business-group h4 {
  margin: 0 0 4px;
  padding: 12px 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-neutral-500);
  border-bottom: 1px solid var(--hs-neutral-200);
}

.hs-staff-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 699px) {
  .hs-faq-table-wrap {
    overflow-x: visible;
  }

  .hs-faq-table thead {
    display: none;
  }

  .hs-faq-table,
  .hs-faq-table tbody,
  .hs-faq-table tr,
  .hs-faq-table td {
    display: block;
    width: 100%;
  }

  .hs-faq-table tr {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--hs-neutral-200, #e7edea);
  }

  .hs-faq-table tr:last-child {
    border-bottom: none;
  }

  .hs-faq-table td {
    padding: 0.35rem 0;
    border-bottom: none;
  }

  .hs-faq-table td[data-faq-label]::before {
    content: attr(data-faq-label);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hs-text-muted, #6b7c72);
  }

  .hs-faq-table td:last-child {
    padding-top: 0.5rem;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-faq-table .hs-training-input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

.hs-training-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.hs-training-row-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--hs-text-muted, #6b7c72);
  cursor: pointer;
}

.hs-training-row-x svg {
  width: 14px;
  height: 14px;
}

.hs-training-row-x:hover:not(:disabled) {
  background: rgba(23, 36, 28, 0.06);
  color: var(--ink, #17241c);
}

.hs-training-row-x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 229, 164, 0.35);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-location-card {
  border: 1px solid var(--hs-neutral-250, #d8ddd7);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 0.85rem;
  background: rgba(255, 255, 255, 0.55);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-location-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-location-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-social-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-social-links-grid .hs-training-field {
  padding: 6px 0;
}

@media (max-width: 639px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-social-links-grid {
    grid-template-columns: 1fr;
  }
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-field--full {
  grid-column: 1 / -1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-address-suggest__control {
  position: relative;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-address-suggest__list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--hs-neutral-250);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 36, 28, 0.12);
  max-height: 14rem;
  overflow: auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-address-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.9rem;
  color: #17241c;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-address-suggest__item:hover,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-address-suggest__item:focus-visible {
  background: rgba(23, 36, 28, 0.06);
  outline: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-address-suggest__hint {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--hs-neutral-500);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-block {
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--hs-neutral-200);
  border-radius: 12px;
  background: #fff;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__rows {
  display: grid;
  gap: 0.2rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  font-size: 0.88rem;
  line-height: 1.35;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__row--date {
  color: var(--hs-neutral-700);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__day {
  font-weight: 650;
  color: #17241c;
  font-variant-numeric: tabular-nums;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__time {
  color: #3d4a42;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__time.is-closed {
  color: var(--hs-neutral-500);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__overrides {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(45, 55, 48, 0.08);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__more,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-compact__notes {
  margin: 0;
  font-size: 0.8rem;
  color: var(--hs-neutral-600);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-editor {
  display: grid;
  gap: 0.85rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-editor__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-help {
  margin: 0;
  font-size: 13px;
  color: var(--hs-neutral-600);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-mode {
  display: grid;
  gap: 0.4rem;
  margin: 0.65rem 0 0.85rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-mode__option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--hs-neutral-200);
  border-radius: var(--hs-radius-md, 10px);
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-mode__option.is-selected {
  border-color: var(--hs-brand-500);
  background: var(--hs-brand-50);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-mode__text {
  display: grid;
  gap: 0.1rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-mode__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-neutral-900);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-mode__desc {
  font-size: 12px;
  color: var(--hs-neutral-600);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-days {
  display: grid;
  gap: 0.55rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-overrides {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.25rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-overrides__intro {
  display: grid;
  gap: 0.2rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-overrides__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #17241c;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-overrides__list {
  display: grid;
  gap: 0.55rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-overrides__empty {
  margin: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override {
  border: 1px solid var(--hs-neutral-200);
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem 0.85rem;
  display: grid;
  gap: 0.55rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__date,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__note {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__date {
  flex: 1 1 10rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__note {
  width: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-neutral-600);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-override__date-input {
  max-width: 12rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-day {
  border: 1px solid var(--hs-neutral-200);
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem 0.85rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-day.is-closed {
  background: rgba(45, 55, 48, 0.03);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-day__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #17241c;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-closed {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 13px;
  white-space: nowrap;
  color: var(--hs-neutral-700);
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-day__windows {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-time {
  min-width: 7.5rem;
  width: auto;
  border: 1px solid var(--hs-neutral-250) !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 0.4rem 0.55rem !important;
  box-shadow: none !important;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-time:focus {
  border-color: var(--hs-neutral-500) !important;
  outline: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-dash {
  font-size: 13px;
  color: var(--hs-neutral-500);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-add,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-remove {
  border: 0;
  background: transparent;
  color: var(--hs-neutral-600);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
  border-radius: 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-add:hover,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-remove:hover {
  background: rgba(23, 36, 28, 0.06);
  color: #17241c;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-hours-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hs-rule-card__toggle {
  margin-left: auto;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Agent Training — Rules tab (mockup-aligned) */
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-intro__ic {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, #1a7f4b);
  display: grid;
  place-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-intro__ic svg {
  width: 16px;
  height: 16px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-intro h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-intro p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-2, var(--hs-text-muted));
  line-height: 1.55;
  max-width: 620px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer {
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 16px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
  overflow: visible;
  margin-bottom: 20px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__body {
  padding: 20px 20px 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
  margin-bottom: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__input {
  width: 100%;
  border: none;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink, inherit);
  background: transparent;
  min-height: 56px;
  padding: 0;
  outline: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__input::placeholder {
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--hair, var(--hs-neutral-200));
  background: var(--panel-2, #f6f8f5);
  border-radius: 0 0 16px 16px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__foot .hs-rules-seg2 {
  margin-right: auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-seg2 {
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: var(--panel-3, #eef2ec);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 999px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-seg2 > button {
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-text-muted));
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-seg2 > button:hover:not(.is-on) {
  color: var(--ink, inherit);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-seg2 > button.is-on {
  background: var(--panel, #fff);
  color: var(--ink, inherit);
  font-weight: 700;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-seg2.is-open [data-rules-mode="custom"] .hs-rules-chev {
  transform: rotate(180deg);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-chev {
  width: 14px;
  height: 14px;
  color: var(--ink-3, var(--hs-text-muted));
  transition: transform 0.18s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-cust-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-2, #1a7f4b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-cust-count[hidden] {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-cust-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 244px;
  /* Opaque — glass --panel makes channel labels unreadable over page content. */
  background: #fff;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 12px;
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px rgba(8, 40, 24, 0.07));
  padding: 8px;
  animation: hs-rules-pop 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-cust-pop[hidden] {
  display: none;
}

@keyframes hs-rules-pop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-cust-pop__head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
  padding: 6px 10px 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, inherit);
  cursor: pointer;
  user-select: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-opt:hover {
  background: var(--panel-2, #f6f8f5);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-opt__box {
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px solid var(--hair-2, #d7ddd3);
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.12s, border-color 0.12s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-opt.is-sel .hs-rules-opt__box {
  background: var(--accent-2, #1a7f4b);
  border-color: var(--accent-2, #1a7f4b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-opt__box svg {
  width: 14px;
  height: 14px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-opt__ic {
  width: 16px;
  height: 16px;
  color: var(--ink-2, var(--hs-text-muted));
  margin-left: -2px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-channel-hint {
  display: block;
  font-size: 12px;
  color: var(--ink-3, var(--hs-text-muted));
  padding: 4px 10px 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-channel-hint[hidden] {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  background: var(--ink, #0e1b11);
  color: #fff;
  transition: background 0.12s, filter 0.12s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-add-btn svg {
  width: 16px;
  height: 16px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-add-btn:hover:not(:disabled) {
  background: var(--hs-everglade-800, #122920);
  color: #fff;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-add-btn:disabled {
  opacity: 1;
  color: var(--ink-3, #6c7e73);
  background: var(--panel-2, #f6f8f5);
  cursor: not-allowed;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-panel {
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: 16px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair, var(--hs-neutral-200));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-panel__title {
  font-size: 14px;
  font-weight: 700;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-panel__title span {
  color: var(--ink-3, var(--hs-text-muted));
  font-weight: 600;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-panel__sort {
  font-size: 12.5px;
  color: var(--ink-3, var(--hs-text-muted));
  font-weight: 600;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--hair, var(--hs-neutral-200));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row:last-child {
  border-bottom: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row.is-off {
  opacity: 0.55;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__num {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--panel-3, #eef2ec);
  color: var(--ink-3, var(--hs-text-muted));
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__main {
  flex: 1;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__text {
  width: 100%;
  border: none;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink, inherit);
  font-weight: 500;
  background: transparent;
  padding: 0;
  min-height: 24px;
  outline: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__text:focus {
  background: var(--panel-2, #f6f8f5);
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-tag svg {
  width: 14px;
  height: 14px;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-tag--all {
  background: var(--accent-tint, #e6fbf1);
  border-color: var(--accent-tint-2, #d2f6e4);
  color: var(--accent-ink, #0c2418);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-tag--all svg {
  color: var(--accent-2, #1a7f4b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__edit-ch {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, var(--hs-text-muted));
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__edit-ch:hover {
  color: var(--ink, inherit);
  background: var(--panel-2, #f6f8f5);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__source {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-switch {
  position: relative;
  flex: none;
  width: 42px;
  height: 25px;
  border-radius: 999px;
  background: var(--panel-3, #eef2ec);
  border: 1px solid var(--hair-2, #d7ddd3);
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-switch__knob {
  position: absolute;
  top: 50%;
  left: 2px;
  /* translate(), not translateY(), so the on-state below interpolates function
     to function. Mixing the two makes the browser fall back to matrix maths for
     what is a straight slide. */
  transform: translate(0, -50%);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  /* The knob travels on transform, not on `left`. Same 18px of movement, but off
     the main thread — a toggle is pressed, so it is the one place a dropped
     frame is guaranteed to be noticed. */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-switch.is-on {
  background: var(--accent-2, #1a7f4b);
  border-color: transparent;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-switch.is-on .hs-rules-switch__knob {
  transform: translate(18px, -50%);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-iconbtn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink-3, var(--hs-text-muted));
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-iconbtn svg {
  width: 16px;
  height: 16px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-iconbtn:hover {
  background: var(--panel-3, #eef2ec);
  color: var(--ink, inherit);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-iconbtn--danger:hover {
  background: var(--fail-tint, #fbe9e8);
  color: var(--fail, #d9534f);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-empty {
  padding: 52px 24px;
  text-align: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-empty__ic {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  display: grid;
  place-items: center;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-empty__ic svg {
  width: 24px;
  height: 24px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-empty h3 {
  margin: 16px 0 4px;
  font-size: 16px;
  font-weight: 700;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-empty p {
  margin: 0 auto;
  font-size: 14px;
  color: var(--ink-3, var(--hs-text-muted));
  max-width: 360px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__foot {
    flex-wrap: wrap;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-composer__foot .hs-rules-seg2 {
    margin-right: 0;
    width: 100%;
  }
}

.hs-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.hs-feedback-modal[hidden] {
  display: none;
}

.hs-feedback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 64, 50, 0.45);
}

.hs-feedback-modal__card {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  background: #fff;
  background-color: #fff;
  opacity: 1;
  border-radius: 16px;
  border: 1px solid var(--hair, #e7edea);
  padding: 20px;
  box-shadow: 0 16px 48px rgba(29, 64, 50, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hs-feedback-modal__card label {
  display: block;
  margin-top: 0.75rem;
  font-size: 13px;
  font-weight: 600;
}

.hs-feedback-modal__id {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-3, #6b776f);
}

.hs-feedback-modal__id code {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 2px 6px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 0;
  background: #f4f7f5;
  font-size: 0.72rem;
  word-break: break-all;
}

.hs-feedback-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1rem;
}

#ws-report-modal .hs-feedback-modal__card {
  background: #fff !important;
  background-color: #fff !important;
  opacity: 1 !important;
}

.hs-connectors-skills__heading {
  margin: 1.25rem 0 0.75rem;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
}

.hs-connectors-skills__heading:first-of-type {
  margin-top: 0.5rem;
}

.hs-connectors-skills-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.25rem;
}

.hs-connectors-skills-card__top h3 {
  margin: 0;
}

.hs-connectors-request {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: none;
}

.hs-connectors-request__btn {
  display: inline-flex;
  width: auto;
  justify-content: center;
}

.hs-st-tools-section {
  margin-top: 0;
}

.hs-st-ptool-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.hs-st-ptool-list .hs-st-task-card {
  border: 1px solid var(--hair, #e7edea);
  border-radius: 16px;
  background: var(--panel, #fff);
  box-shadow: none;
  margin: 0;
  overflow: hidden;
}

.hs-st-ptool-list .hs-st-task-card:last-child {
  border-bottom: 1px solid var(--hair, #e7edea);
}

.hs-st-empty-row,
.hs-st-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.hs-st-typeahead {
  margin: 0 0 1rem;
}

.hs-st-typeahead__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2, #3d4a42);
  margin: 0 0 6px;
}

.hs-st-typeahead__input {
  width: 100%;
}

/* Routines Typeform composer — flat, inline sentence (no drop shadows) */
.hs-st-composer {
  --st-accent: #1a7f4b;
  --st-accent-soft: #e6fbf1;
  --st-needed: #7c3aed;
  --st-needed-soft: #f3e8ff;
  --st-optional-bg: #f3f5f4;
  --st-optional-border: rgba(16, 24, 40, 0.1);
  --st-ink: #17241c;
  --st-muted: #6b776f;
  --st-border: rgba(16, 24, 40, 0.12);
  --st-pill-h: 44px;
  --st-control-radius: 12px;
  margin: 0 0 1.5rem;
  max-width: 900px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.hs-st-composer--typeform {
  position: relative;
}

.hs-st-composer button,
.hs-st-composer__sheet,
.hs-st-composer__menu,
.hs-st-composer__pill,
.hs-st-composer__token,
.hs-st-composer__recipe {
  box-shadow: none !important;
  filter: none;
}

.hs-st-composer__sheet {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 0;
  padding: 1.35rem 1.5rem 1.15rem;
  border: 1px solid var(--st-border);
  border-radius: 18px;
  background: #fff;
}

.hs-st-composer.is-menu-open .hs-st-composer__sheet {
  border-color: rgba(26, 127, 75, 0.28);
}

.hs-st-composer__heading {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--st-muted);
}

.hs-st-composer__sentence {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--st-ink);
}

.hs-st-composer__row {
  display: grid;
  grid-template-columns: minmax(6.75rem, 8.75rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.hs-st-composer__row--lead {
  align-items: center;
}

.hs-st-composer__row--lead .hs-st-composer__label {
  color: var(--st-ink);
  font-weight: 600;
}

.hs-st-composer__label {
  color: var(--st-muted);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
}

.hs-st-composer__control {
  display: flex;
  min-width: 0;
  width: 100%;
}

.hs-st-composer__control > .hs-st-composer__pill,
.hs-st-composer__control > .hs-st-composer__token {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hs-st-composer__plain {
  color: inherit;
  white-space: nowrap;
}

.hs-st-composer__end {
  white-space: nowrap;
  margin-left: -0.2rem;
}

/* Shared editable control chrome — pills + text tokens */
.hs-st-composer__pill,
.hs-st-composer__token {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--st-pill-h);
  min-height: var(--st-pill-h);
  padding: 0 0.8rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-control-radius);
  background: #fff;
  color: var(--st-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.2;
  vertical-align: middle;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hs-st-composer__pill {
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-right: 0.7rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-st-composer__pill:hover,
.hs-st-composer__token:hover {
  filter: brightness(0.99);
}

.hs-st-composer__pill:focus-visible,
.hs-st-composer__token:focus-visible {
  outline: none;
  border-color: var(--hs-border-accent);
  box-shadow: 0 0 0 var(--hs-size-focus-ring) var(--hs-accent-ring);
}

.hs-st-composer__pill.is-open {
  outline: 2px solid rgba(26, 127, 75, 0.28);
  outline-offset: 1px;
}

/* Fill states (2026-08 audit, UI-002): the semantics stay — required-unset,
   required-set, optional — but they moved from full-body purple/green fills to
   the leading icon, so the fields themselves stay in the one system shell. */
.hs-st-composer__pill.is-fill-needed,
.hs-st-composer__token.is-fill-needed {
  background: #fff;
  border-color: var(--st-border);
  color: var(--st-ink);
}

.hs-st-composer__pill.is-fill-needed .hs-st-composer__pill-ic {
  color: var(--st-needed);
}

.hs-st-composer__pill.is-fill-needed .hs-st-composer__pill-chev {
  color: var(--st-muted);
}

.hs-st-composer__pill.is-fill-set,
.hs-st-composer__token.is-fill-set {
  background: #fff;
  border-color: var(--st-border);
  color: var(--st-ink);
}

.hs-st-composer__pill.is-fill-set .hs-st-composer__pill-ic {
  color: var(--st-accent);
}

.hs-st-composer__pill.is-fill-set .hs-st-composer__pill-chev {
  color: var(--st-muted);
}

.hs-st-composer__pill.is-fill-optional,
.hs-st-composer__token.is-fill-optional {
  background: #fff;
  border-color: var(--st-border);
  color: var(--st-muted);
}

.hs-st-composer__pill.is-fill-optional .hs-st-composer__pill-ic,
.hs-st-composer__pill.is-fill-optional .hs-st-composer__pill-chev {
  color: #8a968e;
}

.hs-st-composer__pill.is-placeholder .hs-st-composer__pill-label,
.hs-st-composer__token.is-placeholder::placeholder {
  color: inherit;
  opacity: 0.85;
  font-weight: 500;
}

.hs-st-composer__pill.is-pulse.is-fill-needed {
  animation: hs-st-needed-pulse 1.6s ease-in-out infinite;
}

.hs-st-composer__pill.is-locked-error,
.hs-st-composer__token.is-locked-error {
  border-color: rgba(185, 28, 28, 0.4);
  background: #fef2f2;
  color: #9b2c2c;
}

.hs-st-composer__pill.is-checking,
.hs-st-composer__token.is-checking {
  opacity: 0.8;
}

.hs-st-composer__pill-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.hs-st-composer__pill-ic svg {
  width: 16px;
  height: 16px;
  display: block;
}

.hs-st-composer__pill-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.hs-st-composer__pill-chev {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.hs-st-composer__pill.is-open .hs-st-composer__pill-chev {
  transform: rotate(180deg);
}

@keyframes hs-st-needed-pulse {
  0%,
  100% {
    border-color: rgba(124, 58, 237, 0.35);
    background: var(--st-needed-soft);
  }
  50% {
    border-color: rgba(124, 58, 237, 0.65);
    background: #ebe0ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-st-composer__pill.is-pulse {
    animation: none;
  }
}

/* Text-like input tokens */
.hs-st-composer__token {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  field-sizing: content;
}

.hs-st-composer__token--url {
  min-width: 0;
  max-width: 100%;
}

.hs-st-composer__token--prompt,
.hs-st-composer__token--detail {
  min-width: 0;
  max-width: 100%;
  font-weight: 500;
}

.hs-st-composer__token--tool {
  min-width: 0;
  max-width: 100%;
}

.hs-st-composer__token--num {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  text-align: center;
  field-sizing: fixed;
}

/* Must stay :not(:focus-visible). Plain `:focus` has the same specificity as
   the :focus-visible ring declared above and loses only by source order —
   as written it silently removed the keyboard focus ring. */
.hs-st-composer__token:focus:not(:focus-visible) {
  outline: none;
}

.hs-st-composer__custom-days {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hs-st-composer__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 0.15rem;
}

.hs-st-composer__actions-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.hs-st-composer__clear {
  min-height: auto;
  padding: 0.2rem 0.15rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--st-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-st-composer__clear:hover {
  color: var(--st-ink);
  background: transparent;
}

/* 44px, matching control-lg and the Tasks composer beside it — these two
   submit discs were 48px and 42px, six pixels apart doing the same job. */
.hs-st-composer__submit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: var(--ink, #0e1b11);
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.hs-st-composer__submit:hover:not(:disabled) {
  background: #14663c;
}

.hs-st-composer__submit:active:not(:disabled) {
  transform: translateY(1px);
}

.hs-st-composer__submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hs-st-composer__submit:focus-visible {
  outline: 2px solid rgba(26, 127, 75, 0.45);
  outline-offset: 3px;
}

/* Portaled popovers (appended to body) */
.hs-st-composer-portal {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 12rem;
  width: max-content;
  max-width: min(22rem, calc(100vw - 24px));
  max-height: min(320px, 50vh);
  padding: 0.45rem;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: #fff;
  overflow: auto;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  transform-origin: top left;
  animation: hs-st-popover-in 0.16s ease;
}

.hs-st-composer-portal.is-anchor-morph {
  animation: none;
  will-change: transform, opacity;
}

.hs-st-composer-portal.is-above {
  transform-origin: bottom left;
  animation-name: hs-st-popover-in-above;
}

.hs-st-composer-portal.is-above.is-anchor-morph {
  animation: none;
}

.hs-st-composer-portal__search {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  min-height: 2.5rem;
  margin: 0 0 0.25rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--st-border);
  border-radius: 10px;
  background: #f7f9f8;
  color: var(--st-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  outline: none;
  box-sizing: border-box;
}

.hs-st-composer-portal__search:focus {
  border-color: var(--st-accent);
  background: #fff;
}

.hs-st-composer-portal__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.hs-st-composer-portal--mobile {
  max-width: none;
  max-height: min(60vh, 420px);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.18);
}

.hs-st-composer-portal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: rgba(16, 24, 40, 0.35);
  animation: hs-st-fade-in 0.16s ease;
}

@keyframes hs-st-popover-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hs-st-popover-in-above {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


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

@media (prefers-reduced-motion: reduce) {
  .hs-st-composer-portal,
  .hs-st-composer-portal-backdrop,
  .hs-st-composer-portal--mobile {
    animation: none;
  }
}

/* Legacy class aliases used by older menu HTML helpers */
.hs-st-composer__menu {
  /* menus are portaled; keep as no-op for safety */
  display: none;
}

.hs-st-composer__option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-st-composer__option:hover,
.hs-st-composer__option:focus-visible,
.hs-st-composer__option.is-on {
  background: var(--st-accent-soft);
  outline: none;
}

.hs-st-composer__option--compact {
  align-items: center;
  padding: 0.55rem 0.65rem;
}

.hs-st-composer__option--else {
  margin-top: 0.2rem;
  border-top: 1px solid var(--hair, #e7edea);
  border-radius: 0 0 10px 10px;
  padding-top: 0.75rem;
}

.hs-st-composer__option-ic {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0.05rem;
  border-radius: 8px;
  background: #f1f4f2;
  color: var(--st-accent);
  flex: none;
}

.hs-st-composer__option-ic svg {
  width: 16px;
  height: 16px;
}

.hs-st-composer__option-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.hs-st-composer__option-label {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--st-ink);
}

.hs-st-composer__option-desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--st-muted);
}

.hs-tasks-page .hs-portal-section__body {
  position: relative;
  z-index: 0;
  display: grid;
  gap: 1.25rem;
}

.hs-tasks-page.is-detail .hs-portal-section__body {
  gap: 0;
}

.hs-tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0.15rem 0 0.35rem;
  min-height: 2.5rem;
}

.hs-tasks-toolbar__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hs-tasks-selection {
  margin: 0;
  color: var(--ink, #17241c);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hs-tasks-selection__count {
  display: inline-grid;
  min-width: 1.5rem;
  min-height: 1.5rem;
  place-items: center;
  border-radius: 999px;
  background: #eef3ef;
  color: var(--ink-2, #45594c);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 7px;
  flex-shrink: 0;
}

.hs-tasks-filter-wrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 30;
}

.hs-tasks-filter-wrap.is-open {
  z-index: 120;
}

/* Keep the open menu above the Add-a-task card; drop the glass fade so the
   dropdown is not masked/transparent over the composer. */
.hs-tasks-page .hs-portal-section__head:has(.hs-tasks-filter-wrap.is-open) {
  z-index: 80;
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}

@media (min-width: 900px) {
  .hs-tasks-page .hs-portal-section__head:has(.hs-tasks-filter-wrap.is-open) {
    position: relative;
  }
}

.hs-tasks-toolbar .hs-tasks-filter-wrap {
  margin-left: auto;
}

.hs-portal-section__head-actions .hs-tasks-filter-wrap {
  margin-left: 0;
}

.hs-tasks-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2, #45594c);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: none;
  filter: none;
}

.hs-tasks-filter-button.is-active {
  border-color: rgba(26, 127, 75, 0.3);
  background: #eef9f3;
  color: #176542;
}

.hs-tasks-filter-menu {
  position: absolute;
  z-index: 130;
  right: 0;
  top: calc(100% + 8px);
  width: min(240px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  max-height: min(360px, 60vh);
  overflow: auto;
  transform-origin: top right;
  animation: hs-st-popover-in 0.2s ease;
  filter: none;
  pointer-events: auto;
}

.hs-tasks-filter-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-tasks-filter-menu__option:hover,
.hs-tasks-filter-menu__option:focus-visible,
.hs-tasks-filter-menu__option.is-on {
  background: var(--accent-tint, #e6fbf1);
  outline: none;
}

.hs-tasks-filter-menu__option-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hs-tasks-filter-menu__option-label {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink, #17241c);
}

.hs-tasks-filter-menu__emoji {
  display: block;
  width: 1.1rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1;
}

.hs-tasks-filter-menu__svg {
  display: block;
  flex-shrink: 0;
  color: var(--ink-2, #45594c);
}

.hs-tasks-filter-menu__count {
  display: inline-grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.07);
  color: var(--ink-3, #6b776f);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 5px;
  flex-shrink: 0;
}

.hs-tasks-filter-menu__option.is-on .hs-tasks-filter-menu__count {
  background: rgba(26, 127, 75, 0.14);
  color: #176542;
}

.hs-tasks-filter-menu__sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(16, 24, 40, 0.1);
}

/* Tasks composer — mirrors Routines typeform sheet */
.hs-tasks-composer {
  margin: 0;
  box-shadow: none;
  filter: none;
}

.hs-tasks-composer button,
.hs-tasks-composer__sheet {
  box-shadow: none !important;
  filter: none;
}

.hs-tasks-composer__sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 14px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 18px;
  background: #fff;
}

.hs-tasks-composer__sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink, #17241c);
}

.hs-tasks-composer__prefix {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.hs-tasks-composer.is-tag-open .hs-tasks-composer__sheet {
  border-color: rgba(26, 127, 75, 0.35);
  outline: 3px solid rgba(26, 127, 75, 0.1);
  outline-offset: 0;
}

.hs-tasks-composer__title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 180px;
  min-width: min(100%, 160px);
}

.hs-tasks-composer__title {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 11px;
  background: #f7f9f8;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 550;
}

.hs-tasks-composer__tag-wrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
}

.hs-tasks-composer__tag-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Match .hs-tasks-composer__title height (38px), box-sizing so border is
     included and the pair sits on one baseline. */
  box-sizing: border-box;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--hair-2, rgba(16, 24, 40, 0.1));
  border-radius: 11px;
  background: #fff;
  color: var(--ink-2, #45594c);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.hs-tasks-composer__tag-trigger:hover,
.hs-tasks-composer__tag-trigger:focus-visible {
  border-color: var(--accent-2, #1a7f4b);
  outline: none;
}

.hs-tasks-composer__tag-trigger.has-tag {
  color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #e6fbf1);
  border-color: rgba(26, 127, 75, 0.22);
}

.hs-tasks-composer__tag-trigger.is-open {
  border-color: var(--accent-2, #1a7f4b);
  background: #fff;
}

.hs-tasks-composer__tag-icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

/* Admin owner glyph — slightly larger than the tag PNG so the person mark
   reads at the same visual weight in the taller 38px control. */
#task-composer-owner-trigger .hs-tasks-composer__tag-icon {
  width: 20px;
  height: 20px;
}

.hs-tasks-composer__tag-trigger-label,
.hs-tasks-composer__tag-chev {
  display: none;
}

.hs-tasks-composer__tag-chev {
  flex: none;
  opacity: 0.65;
}

.hs-tasks-composer__tag-trigger.is-open .hs-tasks-composer__tag-chev {
  transform: rotate(180deg);
}

.hs-tasks-composer__tag-menu {
  position: absolute;
  z-index: 40;
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  width: min(220px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: #fff;
  max-height: min(280px, 50vh);
  overflow: auto;
  transform-origin: top right;
  animation: hs-st-popover-in 0.2s ease;
}

.hs-tasks-composer__tag-menu.is-above {
  transform-origin: bottom right;
  animation-name: hs-st-popover-in-above;
}

.hs-tasks-composer__tag-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-tasks-composer__tag-option:hover,
.hs-tasks-composer__tag-option:focus-visible,
.hs-tasks-composer__tag-option.is-on {
  background: var(--accent-tint, #e6fbf1);
  outline: none;
}

.hs-tasks-composer__tag-option-label {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink, #17241c);
}

.hs-tasks-composer__tag-option-desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-3, #6b776f);
}

@media (min-width: 700px) {
  /* Above 700px the label appears; height stays on the base rule so it keeps
     matching the Add-a-task field. */
  .hs-tasks-composer__tag-trigger {
    min-width: 0;
    padding: 0 10px;
    font-size: 0.82rem;
  }

  .hs-tasks-composer__tag-trigger-label,
  .hs-tasks-composer__tag-chev {
    display: inline;
  }
}

.hs-tasks-composer__title:focus,
.hs-tasks-composer__due:focus {
  outline: none;
  border-color: var(--accent-2, #1a7f4b);
  background: #fff;
}

.hs-tasks-composer__due-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: hs-tasks-due-in 0.22s ease;
}

@keyframes hs-tasks-due-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.hs-tasks-composer__plain {
  color: var(--ink-2, #45594c);
  font-size: 0.95rem;
}

.hs-tasks-composer__due {
  min-height: 38px;
  min-width: 12ch;
  max-width: min(28ch, 100%);
  padding: 6px 10px;
  border: 1px solid rgba(26, 127, 75, 0.28);
  border-radius: 11px;
  background: var(--accent-tint, #e6fbf1);
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  field-sizing: content;
}

.hs-tasks-composer__due.is-locked-ok {
  color: var(--accent-2, #1a7f4b);
  background: #f0faf5;
  border-color: rgba(26, 127, 75, 0.28);
}

.hs-tasks-composer__due.is-locked-error {
  color: #9b2c2c;
  background: #fef2f2;
  border-color: rgba(185, 28, 28, 0.28);
}

.hs-tasks-composer__due.is-checking {
  color: var(--ink-3, #6b776f);
  background: #f3f5f4;
  border-color: rgba(16, 24, 40, 0.14);
  opacity: 0.85;
}

.hs-tasks-composer__due-clear {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #eef2ef;
  color: var(--ink-3, #6b776f);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

.hs-tasks-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hs-tasks-composer__hint {
  color: var(--ink-3, #6b776f);
  font-size: 0.8rem;
  line-height: 1.4;
}

.hs-tasks-composer__submit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  /* #3d4a42 was a grey-green one-off, two steps lighter than the primary ink
     it sat next to and reachable by no token. */
  background: var(--ink, #0e1b11);
  color: #fff;
  cursor: pointer;
  appearance: none;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.hs-tasks-composer__submit:hover:not(:disabled) {
  background: #17241c;
}

.hs-tasks-composer__submit:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.hs-tasks-edit label,
.hs-tasks-draft label {
  display: grid;
  gap: 0.4rem;
  color: var(--ink-2, #32483b);
  font-size: 0.78rem;
  font-weight: 650;
}

.hs-tasks-edit label span {
  color: var(--ink-3, #6b776f);
  font-weight: 400;
}

.hs-tasks-edit .hs-input,
.hs-tasks-draft .hs-input {
  width: 100%;
  box-sizing: border-box;
}

.hs-tasks-source-link:focus-visible,
.hs-tasks-check:focus-visible,
.hs-tasks-modal__close:focus-visible,
.hs-tasks-composer__submit:focus-visible,
.hs-tasks-filter-button:focus-visible,
.hs-tasks-filter-menu__option:focus-visible,
.hs-tasks-card__pan:focus-visible,
.hs-tasks-detail__back:focus-visible {
  outline: 3px solid rgba(26, 127, 75, 0.35);
  outline-offset: 2px;
}

.hs-tasks-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-tasks-card {
  position: relative;
  padding: 0;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  filter: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.hs-tasks-card__reveal {
  display: none;
}

.hs-tasks-card__pan {
  position: relative;
  z-index: 1;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.15s ease;
  will-change: transform;
  touch-action: pan-y;
}

.hs-tasks-card__pan:hover {
  background: #f7f9f8;
}

.hs-tasks-card.is-setup .hs-tasks-card__pan,
.hs-tasks-card.is-auto .hs-tasks-card__pan,
.hs-tasks-card.is-completed .hs-tasks-card__pan,
.hs-tasks-card.is-completing .hs-tasks-card__pan {
  background: inherit;
}

.hs-tasks-card.is-setup .hs-tasks-card__pan:hover {
  background: #f7f9f8;
}

.hs-tasks-card.is-auto .hs-tasks-card__pan:hover {
  background: #eaf1f9;
}

.hs-tasks-card.is-setup {
  border-color: rgba(26, 127, 75, 0.18);
  background: #fff;
}

.hs-tasks-card.is-auto {
  border-color: rgba(36, 99, 168, 0.22);
  background: #f3f7fc;
}

.hs-tasks-card.is-auto.is-completed {
  background: #f7f9fc;
}

.hs-tasks-card.is-completed {
  background: #fff;
  opacity: 0.88;
}

.hs-tasks-card.is-completing {
  border-color: rgba(26, 127, 75, 0.35);
  background: #eefbf4;
  transform: scale(0.985);
}

.hs-tasks-card.is-removing {
  pointer-events: none;
  transform: scale(0.98);
  transition:
    height 0.28s ease,
    opacity 0.22s ease,
    margin 0.28s ease,
    padding 0.28s ease,
    border-width 0.28s ease,
    transform 0.22s ease;
}

.hs-tasks-card.is-completing .hs-tasks-card__pan {
  background: #eefbf4;
}

.hs-tasks-card.is-completing h2 {
  color: var(--ink-3, #6b776f);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(26, 127, 75, 0.65);
  animation: hs-tasks-strike 0.35s ease forwards;
}

@keyframes hs-tasks-strike {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: rgba(26, 127, 75, 0.65); }
}

.hs-tasks-card__main {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.hs-tasks-check-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.hs-tasks-check {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.hs-tasks-check-ui {
  width: 1.2rem;
  height: 1.2rem;
  border: 1.5px solid rgba(16, 24, 40, 0.22);
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.2s ease;
}

.hs-tasks-check:checked + .hs-tasks-check-ui,
.hs-tasks-card.is-completing .hs-tasks-check-ui {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-2, #1a7f4b);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.08);
}

.hs-tasks-check:disabled {
  cursor: default;
}

.hs-tasks-card__content {
  min-width: 0;
  flex: 1;
}

.hs-tasks-card__title-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}

.hs-tasks-card__aside {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  max-width: 42%;
}

.hs-tasks-card__aside .hs-tasks-due {
  font-size: 0.72rem;
  color: var(--ink-3, #6b776f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5rem;
}

.hs-tasks-card__aside .hs-tasks-pill {
  display: none;
}

.hs-tasks-card__aside .hs-tasks-pill--source {
  display: inline-flex;
}

.hs-tasks-card__actions,
.hs-tasks-detail__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}

.hs-tasks-card__edit,
.hs-tasks-card__delete {
  padding: 0.2rem 0.45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3, #6b776f);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  appearance: none;
}

.hs-tasks-card__edit:hover {
  background: #f1f4f2;
  color: var(--ink, #17241c);
}

.hs-tasks-card__delete:hover {
  background: rgba(194, 59, 59, 0.1);
  color: #a12828;
}

.hs-tasks-edit__delete {
  margin-right: auto;
  color: #a12828;
}

.hs-tasks-edit__delete:hover {
  color: #7f1d1d;
}

.hs-tasks-card h2,
.hs-tasks-detail__title,
.hs-tasks-draft h3,
.hs-tasks-empty h2,
.hs-tasks-modal h2 {
  margin: 0;
  color: var(--ink, #17241c);
}

.hs-tasks-card h2 {
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-tasks-card.is-completed h2 {
  color: var(--ink-3, #6b776f);
  text-decoration: line-through;
}

.hs-tasks-completed {
  margin-top: 0.5rem;
  border-top: 1px solid #ecede8;
  padding-top: 0.75rem;
}

.hs-tasks-completed__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0.65rem 0.15rem;
  border: none;
  background: transparent;
  color: var(--ink-2, #45594c);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  appearance: none;
  text-align: left;
}

.hs-tasks-completed__count {
  display: inline-grid;
  min-width: 1.4rem;
  min-height: 1.4rem;
  place-items: center;
  border-radius: 999px;
  background: #eef3ef;
  font-size: 0.72rem;
}

.hs-tasks-completed__chev {
  margin-left: auto;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.hs-tasks-completed__chev.is-open {
  transform: rotate(180deg);
}

.hs-tasks-completed__empty {
  margin: 0.25rem 0 0.5rem;
  color: var(--ink-3, #6b776f);
  font-size: 0.85rem;
}

.hs-tasks-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0.75rem;
}

.hs-tasks-pager__btn {
  min-height: 34px;
  padding: 0 0.85rem;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #17241c);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  appearance: none;
  box-shadow: none !important;
}

.hs-tasks-pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hs-tasks-pager__status {
  color: var(--ink-3, #6b776f);
  font-size: 0.78rem;
}

.hs-tasks-empty--soft {
  padding: 1.5rem 0.5rem;
}

.hs-tasks-card__description,
.hs-tasks-resolution {
  margin: 0.45rem 0 0;
  color: var(--ink-2, #45594c);
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hs-tasks-card__description--setup {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-3, #6b776f);
}

.hs-tasks-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  align-items: center;
  margin-top: 0.65rem;
  color: var(--ink-3, #6b776f);
  font-size: 0.75rem;
}

.hs-tasks-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #edf3ef;
  color: #355243;
  font-size: 0.7rem;
  font-weight: 650;
}

.hs-tasks-pill--actor {
  background: #e7f8f0;
  color: #176542;
}

.hs-tasks-pill--julia {
  background: #e6f8ef;
  color: #176542;
}

.hs-tasks-pill--setup {
  background: #e8f7ef;
  color: #176542;
}

.hs-tasks-pill--source {
  background: #e4eef9;
  color: #1f4f8a;
}

.hs-tasks-pill--tag {
  background: #eef3ef;
  color: #355243;
}

.hs-tasks-pill--thinking {
  background: #fff4e5;
  color: #9a5b12;
  animation: hs-tasks-thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes hs-tasks-thinking-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

.hs-tasks-pill--completed {
  background: #e5f7ed;
  color: #176542;
}

.hs-tasks-pill--age {
  background: #f1f3f2;
  color: #5b6b62;
  font-weight: 600;
}

/* Two weeks open without a due date is the signal worth a second glance. */
.hs-tasks-pill--age.is-stale {
  background: #fdf1e3;
  color: #8a5312;
}

.hs-tasks-pill--notes {
  gap: 0.25rem;
  background: #eef2f7;
  color: #40556d;
}

.hs-tasks-pill__ic {
  width: 0.82rem;
  height: 0.82rem;
  flex: 0 0 auto;
}

.hs-tasks-age {
  font-size: 0.72rem;
  color: var(--ink-3, #6b776f);
  white-space: nowrap;
}

.hs-tasks-age.is-stale {
  color: #8a5312;
  font-weight: 650;
}

.hs-tasks-pill--tag.is-editable {
  gap: 0.15rem;
  padding-right: 0.2rem;
}

.hs-tasks-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
}

.hs-tasks-pill__remove:hover,
.hs-tasks-pill__remove:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.hs-tasks-pill--addtag {
  border: 1px solid #c4d3ca;
  background: transparent;
  color: #4a6153;
  cursor: pointer;
}

.hs-tasks-pill--addtag:hover {
  border-color: #8fb7a0;
  background: #f2f8f4;
}

.hs-tasks-tagadd {
  display: inline-flex;
}

.hs-tasks-tagadd__input {
  min-height: 1.45rem;
  width: 7.5rem;
  padding: 0 0.55rem;
  border: 1px solid #c4d3ca;
  border-radius: 999px;
  background: #fff;
  color: #24352c;
  font-size: 0.7rem;
  font-weight: 650;
}

.hs-tasks-tagadd__input:focus {
  outline: none;
  border-color: #4f9e78;
  box-shadow: 0 0 0 2px rgba(79, 158, 120, 0.18);
}

.hs-tasks-comments {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e6ece8;
}

.hs-tasks-comments__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hs-tasks-comments__title {
  margin: 0;
  color: var(--ink-2, #45594c);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.hs-tasks-comments__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #40556d;
  font-size: 0.68rem;
  font-weight: 700;
}

.hs-tasks-comments__list {
  display: grid;
  gap: 0.55rem;
  margin: 0.6rem 0 0.75rem;
  padding: 0;
  list-style: none;
}

.hs-tasks-comment {
  padding: 0.5rem 0.65rem;
  border: 1px solid #e6ece8;
  border-radius: 0.7rem;
  background: #fafcfb;
}

.hs-tasks-comment.is-julia {
  border-color: #d6ecdf;
  background: #f4fbf7;
}

.hs-tasks-comment__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: var(--ink-3, #6b776f);
}

.hs-tasks-comment__author {
  color: var(--ink-2, #45594c);
  font-weight: 700;
}

.hs-tasks-comment__actions {
  display: inline-flex;
  gap: 0.15rem;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hs-tasks-comment:hover .hs-tasks-comment__actions,
.hs-tasks-comment:focus-within .hs-tasks-comment__actions {
  opacity: 1;
}

.hs-tasks-comment__action {
  padding: 0.1rem 0.35rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--ink-3, #6b776f);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}

.hs-tasks-comment__action:hover {
  background: #eef3ef;
  color: #24352c;
}

.hs-tasks-comment__body {
  margin: 0.3rem 0 0;
  color: var(--ink-2, #45594c);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hs-tasks-comment__edit {
  margin-top: 0.4rem;
}

.hs-tasks-comments__input {
  width: 100%;
  resize: vertical;
  font-size: 0.85rem;
}

.hs-tasks-comments__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* Task Edit/Delete sit left, Add note stays right. */
.hs-tasks-comments__form-actions--split {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Touch has no hover, so the row actions must simply be there. */
@media (hover: none) {
  .hs-tasks-comment__actions {
    opacity: 1;
  }
}

.hs-tasks-source-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.hs-tasks-source-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #176f4b;
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.hs-tasks-due.is-overdue {
  color: #b33b35;
  font-weight: 700;
}

.hs-tasks-edit {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.65fr);
  gap: 0.75rem;
}

.hs-tasks-edit__tags,
.hs-tasks-edit__details,
.hs-tasks-edit__actions {
  grid-column: 1 / -1;
}

.hs-tasks-edit__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.hs-tasks-draft {
  margin: 1rem 0 0 2.05rem;
  padding: 1rem;
  border: 1px solid #bfe7d3;
  border-radius: 13px;
  background: #f4fbf7;
}

.hs-tasks-draft__head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.hs-tasks-draft h3 {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.hs-tasks-draft__state {
  color: #406052;
  font-size: 0.72rem;
  font-weight: 650;
  text-align: right;
}

.hs-tasks-draft__state.is-error,
.hs-tasks-draft__error {
  color: #a52f2a;
}

.hs-tasks-draft__error,
.hs-tasks-draft__note {
  margin: 0.5rem 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.hs-tasks-draft__content {
  margin-top: 0.4rem;
  resize: vertical;
}

.hs-tasks-draft__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.hs-tasks-detail-wrap {
  min-height: min(70vh, 640px);
  animation: hs-tasks-detail-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hs-tasks-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hs-tasks-detail {
  display: grid;
  gap: 1rem;
  padding: 0.25rem 0 1.5rem;
  background: transparent;
  filter: none;
}

.hs-tasks-detail__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hs-tasks-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 0.35rem 0 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2, #45594c);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  appearance: none;
}

.hs-tasks-detail__back:hover {
  color: var(--ink, #17241c);
}

.hs-tasks-detail__body {
  padding: 1.25rem 1.35rem 1.4rem;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  filter: none;
}

.hs-tasks-detail.is-setup .hs-tasks-detail__body {
  border-color: rgba(26, 127, 75, 0.18);
}

.hs-tasks-detail.is-auto .hs-tasks-detail__body {
  border-color: rgba(36, 99, 168, 0.22);
  background: #f3f7fc;
}

.hs-tasks-detail.is-completing .hs-tasks-detail__body {
  border-color: rgba(26, 127, 75, 0.35);
  background: #eefbf4;
}

.hs-tasks-detail .hs-tasks-card__main {
  align-items: flex-start;
  gap: 0.95rem;
}

.hs-tasks-detail__title {
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: normal;
}

.hs-tasks-detail .hs-tasks-card__description {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.hs-tasks-detail__empty {
  margin: 0.75rem 0 0;
  color: var(--ink-3, #6b776f);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hs-tasks-detail .hs-tasks-card__meta {
  margin-top: 1rem;
  gap: 0.5rem 0.7rem;
  font-size: 0.8rem;
}

.hs-tasks-detail .hs-tasks-draft {
  margin: 1.25rem 0 0;
}

.hs-tasks-detail .hs-tasks-check-wrap {
  margin-top: 0.35rem;
}

.hs-tasks-empty,
.hs-tasks-state {
  padding: 2.75rem 1rem;
  text-align: center;
}

.hs-tasks-empty h2 {
  font-size: 1rem;
}

.hs-tasks-empty__copy,
.hs-tasks-state p {
  max-width: 520px;
  margin: 0.5rem auto 0;
  color: var(--ink-3, #6b776f);
  font-size: 0.9rem;
  line-height: 1.55;
}

.hs-tasks-state--error p {
  margin-bottom: 0.8rem;
  color: #a52f2a;
}

.hs-tasks-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.45rem;
  border: 2px solid #c9d8cf;
  border-top-color: #1d8f61;
  border-radius: 50%;
  vertical-align: -0.15rem;
  animation: hs-tasks-spin 0.7s linear infinite;
}

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

.hs-tasks-modal__card {
  width: min(520px, 100%);
}

.hs-tasks-modal__card > p {
  margin: 0.55rem 0 1rem;
  color: var(--ink-3, #6b776f);
  font-size: 0.875rem;
  line-height: 1.5;
}

.hs-tasks-modal__card textarea {
  width: 100%;
  margin-top: 0.45rem;
  box-sizing: border-box;
  resize: vertical;
}

.hs-tasks-modal__close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3, #6b776f);
  font-size: 1.4rem;
  cursor: pointer;
}

@media (min-width: 700px) {
  .hs-tasks-card__aside .hs-tasks-pill {
    display: inline-flex;
  }
}

@media (max-width: 699px) {
  .hs-tasks-selection {
    font-size: 1.2rem;
  }

  .hs-tasks-filter-button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 0.88rem;
  }

  .hs-tasks-filter-menu {
    width: min(260px, calc(100vw - 24px));
  }

  .hs-tasks-composer__sheet {
    padding: 16px 14px 12px;
    border-radius: 16px;
  }

  .hs-tasks-composer__sentence {
    font-size: 0.975rem;
  }

  .hs-tasks-card {
    padding: 0;
  }

  .hs-tasks-card__pan {
    padding: 0.7rem 0.8rem;
  }

  .hs-tasks-card__main {
    gap: 0.6rem;
  }

  .hs-tasks-detail__body {
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 14px;
  }

  .hs-tasks-detail__title {
    font-size: 1.2rem;
  }

  .hs-tasks-detail__nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* Gmail-style swipe-to-delete reveal — paint red only while open to avoid right-edge bleed */
  .hs-tasks-card__reveal {
    display: flex;
    position: absolute;
    inset: 0 0 0 auto;
    width: 88px;
    z-index: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
  }

  .hs-tasks-card.is-swipe-reveal .hs-tasks-card__reveal,
  .hs-tasks-card.is-swipe-open .hs-tasks-card__reveal {
    background: #c23b3b;
    opacity: 1;
    pointer-events: auto;
  }

  .hs-tasks-card__swipe-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    appearance: none;
  }

  .hs-tasks-card__swipe-delete:active {
    background: rgba(0, 0, 0, 0.08);
  }

  .hs-tasks-card.is-swipe-open .hs-tasks-card__pan {
    transform: translateX(-88px);
  }

  .hs-tasks-card.is-swiping .hs-tasks-card__pan {
    transition: none;
  }

  .hs-tasks-card.is-editing .hs-tasks-card__reveal {
    display: none;
  }

  /* Prefer swipe on phones; keep Delete in edit form */
  .hs-tasks-card__delete {
    display: none;
  }

  .hs-tasks-edit {
    grid-template-columns: 1fr;
  }

  .hs-tasks-edit__tags,
  .hs-tasks-edit__details,
  .hs-tasks-edit__actions {
    grid-column: 1;
  }

  .hs-tasks-draft {
    margin-left: 0;
  }

  .hs-tasks-draft__head {
    display: grid;
    gap: 0.5rem;
  }

  .hs-tasks-draft__state {
    text-align: left;
  }

  .hs-tasks-draft__actions {
    display: grid;
  }

  .hs-tasks-draft__actions .hs-btn {
    width: 100%;
  }

  .hs-tasks-modal {
    align-items: flex-end;
    padding: 0;
  }

  .hs-tasks-modal__card {
    max-height: calc(100dvh - 24px);
    overflow: auto;
    border-radius: 20px 20px 0 0;
    padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 699px) {
  .hs-st-composer {
    max-width: none;
  }

  .hs-st-composer__sheet {
    min-height: 0;
    padding: 1.1rem 1rem 1rem;
    border-radius: 16px;
  }

  .hs-st-composer__sentence {
    font-size: 0.975rem;
    gap: 0.65rem;
  }

  .hs-st-composer__row {
    grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
    gap: 0.5rem 0.65rem;
  }

  .hs-st-composer__label {
    white-space: normal;
    font-size: 0.94rem;
  }

  .hs-st-composer__plain {
    white-space: normal;
  }

  .hs-st-composer__pill-label {
    max-width: none;
  }

  .hs-st-composer__token--url,
  .hs-st-composer__token--prompt,
  .hs-st-composer__token--detail,
  .hs-st-composer__token--tool {
    max-width: 100%;
  }

  .hs-st-composer__submit {
    width: 46px;
    height: 46px;
  }
}

.hs-st-typeahead__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: #fff;
}

.hs-st-typeahead__suggestions {
  margin-top: 12px;
}

.hs-st-typeahead__suggestions-label {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, #6b776f);
}

.hs-st-popular-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px) {
  .hs-st-popular-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hs-st-popular-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 132px;
  padding: 14px 14px 16px;
  border: 1.5px solid var(--hair-2, #c8d0c8);
  border-radius: 16px;
  background: var(--panel, #fff);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(8, 40, 24, 0.05);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hs-st-popular-card:hover,
.hs-st-popular-card:focus-visible {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #e6fbf1);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(8, 40, 24, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.hs-st-popular-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.hs-st-popular-card__ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, var(--hs-everglade-600));
}

.hs-st-popular-card__ic svg {
  width: 20px;
  height: 20px;
}

.hs-st-popular-card__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #0e1b11);
}

.hs-st-popular-card__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3, #6b776f);
}

.hs-st-type-option-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hs-st-type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.hs-st-type-option:hover,
.hs-st-type-option:focus-visible {
  border-color: var(--accent-tint-border, #d4ebe4);
  background: var(--accent-tint, #f4faf8);
}

.hs-st-type-option__ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent-2, var(--hs-everglade-600));
}

.hs-st-type-option__ic svg {
  width: 20px;
  height: 20px;
}

.hs-st-type-option__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hs-st-type-option__txt strong {
  font-size: 15px;
  font-weight: 700;
}

.hs-st-type-option__txt .sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.hs-st-typeahead__hit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.hs-st-typeahead__hit:hover,
.hs-st-typeahead__hit:focus-visible {
  background: var(--accent-tint, var(--hs-everglade-100));
}

.hs-st-typeahead__hit-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent-2, var(--hs-everglade-600));
}

.hs-st-typeahead__hit-ic svg {
  width: 20px;
  height: 20px;
}

.hs-st-typeahead__hit-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hs-st-typeahead__hit-txt strong {
  font-size: 15px;
  font-weight: 700;
}

.hs-st-section-label {
  margin: 12px 0 6px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, #6b776f);
}

.hs-st-empty-copy {
  margin: 0;
  padding: 8px 4px 16px;
}

.hs-st-add-row {
  border-top: 1px solid #f1f2ed;
  justify-content: flex-start;
}

/* Refer page */
.hs-refer-page {
  gap: 16px;
}

.hs-refer-share-card,
.hs-refer-hero {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(14, 27, 17, 0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(14, 27, 17, 0.08) !important;
}

/* The texture is the header field, and it carries the headline.
   It used to be a 64–104px strip with nothing in it, which cropped a 780x1688
   mobile texture down to a smeared band pinned under the page title. Giving the
   artwork type to hold means it always has height to render at. */
.hs-refer-share-card__field {
  /* No z-index: the ambient confetti layer is appended after this block and must
     paint over the texture, exactly as it did over the old wash strip. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 1.5rem 1.7rem;
  background-color: #e6dff4;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.82) 100%),
    url("/assets/textures/desktop/7e-refer.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 32%;
  background-size: auto, cover;
}

@media (max-width: 720px) {
  .hs-refer-share-card__field {
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.85) 100%),
      url("/assets/textures/mobile/7e-refer.webp");
    background-position: center, center top;
  }
}

/* Legacy strip markup — kept renderable in case an older bundle is cached. */
.hs-refer-share-card__wash,
.hs-refer-share-card__hero {
  position: relative;
  overflow: hidden;
  height: clamp(72px, 12vw, 104px);
  background-color: #efeaf7;
  background-image: url("/assets/textures/desktop/7e-refer.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Type above the confetti, texture below it. The field itself stays z-index auto
   so the confetti layer still paints over the artwork; lifting only the text
   keeps a falling square from landing on the headline. */
.hs-refer-share-card__field > * {
  position: relative;
  z-index: 1;
}

.hs-refer-share-card__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #2f4a3b;
}

.hs-refer-share-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.35rem;
  background: #fff;
}

.hs-refer-share-card__title,
.hs-refer-share-card h2,
.hs-refer-hero h2 {
  margin: 0;
  max-width: 20em;
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--hs-everglade-900, #0e1b11);
  text-wrap: balance;
}

.hs-refer-share-card__sub {
  margin: 0;
  max-width: 34em;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #37483d;
  text-wrap: pretty;
}

.hs-refer-share-card__invite {
  display: flex;
  flex-wrap: wrap;
  /* Centred, not top-aligned: the QR column is taller than the link column, and
     flex-start left a visible hole under the buttons. */
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem 1.6rem;
}

.hs-refer-share-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  /* Capped: a link field stretched across a 1000px panel reads as an empty
     input, and the copy button ends up an inch from the text it copies. */
  flex: 1 1 260px;
  max-width: 32rem;
  min-width: 0;
}

.hs-refer-code-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-3, #6b776f);
}

/* The link itself, finally visible. One line, ellipsised — never wrapping to
   three lines and never pushing the buttons off the row. */
.hs-refer-link {
  display: block;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 10px;
  background: #f7faf8;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--ink, #0e1b11);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hs-refer-code-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hs-refer-code-row__controls .hs-btn {
  min-width: 5.5rem;
}

.hs-refer-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hs-refer-share-btn svg {
  flex-shrink: 0;
}

.hs-refer-qr {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.hs-refer-qr img {
  display: block;
  width: 118px;
  max-width: min(118px, 100%);
  height: auto;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--hair, #e7edea);
  padding: 8px;
  box-sizing: border-box;
}

/* Three facts under the share row: what the rate is, how long it runs, and the
   credit bonus. They also give the card a floor, which is what the dead space
   under the old terms link was missing. */
.hs-refer-facts {
  /* Packed left at natural width, not on an N-column grid: the fact count is
     whatever referral-routes.ts sends, and equal columns left two facts
     marooned at opposite ends of the card. */
  display: flex;
  flex-wrap: wrap;
  gap: 10px 2.75rem;
  margin: 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--hair, #e7edea);
  list-style: none;
}

.hs-refer-fact {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hs-refer-fact b {
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hs-everglade-900, #0e1b11);
}

.hs-refer-fact span {
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--ink-3, #6b776f);
  text-wrap: pretty;
}

.hs-refer-history-card h3,
.hs-refer-steps-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.hs-refer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0.75rem;
}

.hs-refer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: #fff;
}

.hs-refer-row__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hs-refer-row__status {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f2;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: #3f5147;
  white-space: nowrap;
}

.hs-refer-empty {
  margin: 0.65rem 0 0;
  max-width: 40em;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2, #445048);
  text-wrap: pretty;
}

.hs-refer-steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.hs-refer-step {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.hs-refer-step__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--hs-everglade-900, #0e1b11);
  color: #43e5a4;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.hs-refer-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hs-refer-step__text b {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}

.hs-refer-step__text .sub {
  font-size: 0.86rem;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Fine print, folded into the Your referrals card as its last block. The rule
   above it is what separates reference material from the owner's own list. */
.hs-refer-terms-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair, #e7edea);
}

.hs-refer-terms > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, #0e1b11);
}

.hs-refer-terms > summary::-webkit-details-marker {
  display: none;
}

.hs-refer-terms__chev {
  flex: 0 0 auto;
  color: var(--ink-3, #6b776f);
  transition: transform 0.18s ease;
}

.hs-refer-terms[open] .hs-refer-terms__chev {
  transform: rotate(180deg);
}

.hs-refer-terms > ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
}

.hs-refer-terms > ul li {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-2, #445048);
  text-wrap: pretty;
}

.hs-refer-terms__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.hs-refer-terms__links a {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-2, #445048);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hs-refer-terms__links a:hover {
  color: var(--ink, #0e1b11);
}

.hs-refer-confetti {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  contain: strict;
  transform: translateZ(0);
}

.hs-refer-confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.9;
  will-change: transform, opacity;
  animation: hs-refer-fall 1.8s linear forwards;
}

.hs-refer-confetti--ambient i {
  opacity: 0.55;
  animation-name: hs-refer-fall-loop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes hs-refer-fall {
  to {
    transform: translateY(240px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes hs-refer-fall-loop {
  0% {
    transform: translateY(-16px) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(280px) rotate(420deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-refer-confetti {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .hs-refer-share-card__wash,
  .hs-refer-share-card__hero {
    height: 64px;
  }

  /* Roomier on the small screen, not tighter: the texture needs height to read
     as artwork, and the headline needs air under the page title above it. */
  .hs-refer-share-card__field {
    gap: 0.35rem;
    padding: 1.5rem 1.15rem 1.55rem;
  }

  .hs-refer-share-card__body {
    gap: 1.15rem;
    padding: 1.15rem 1.15rem 1.25rem;
  }

  .hs-refer-share-card__title,
  .hs-refer-share-card h2,
  .hs-refer-hero h2 {
    max-width: none;
    font-size: 1.42rem;
  }

  .hs-refer-share-card__sub {
    font-size: 0.88rem;
  }

  /* The link gets the full width — it is the thing they came for, and beside a
     QR column it truncated to "handshake.app/?…". The QR turns into a short
     thumbnail row instead of a 190px centred block, which is what left all the
     empty card underneath it. */
  .hs-refer-share-card__invite {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.9rem;
  }

  .hs-refer-share-card__actions {
    flex: 1 1 auto;
    max-width: none;
  }

  .hs-refer-qr {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
  }

  .hs-refer-qr img {
    width: 72px;
    max-width: 72px;
    padding: 5px;
    border-radius: 10px;
  }

  .hs-refer-code-row__controls {
    flex-wrap: nowrap;
  }

  .hs-refer-code-row__controls .hs-btn {
    min-width: 0;
  }

  .hs-refer-code-row__controls #ws-refer-copy-link {
    flex: 1 1 auto;
  }

  .hs-refer-code {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hs-refer-share-btn span {
    display: none;
  }

  .hs-refer-share-btn {
    min-width: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Three columns at 375px wrapped "12 months" onto two lines and left the row
     ragged. One fact per line, value then label, reads in a glance and is
     shorter than the three-column version it replaces. */
  .hs-refer-facts {
    flex-direction: column;
    gap: 6px;
    padding-top: 0.95rem;
  }

  .hs-refer-fact {
    flex-direction: row;
    align-items: baseline;
    gap: 0.45rem;
  }

  .hs-refer-fact b {
    flex: 0 0 auto;
    font-size: 1.05rem;
  }

  .hs-refer-fact span {
    font-size: 0.78rem;
  }

  .hs-refer-row {
    align-items: flex-start;
    padding: 11px 12px;
  }

  .hs-refer-row__status {
    padding: 3px 8px;
    font-size: 0.67rem;
  }
}

.hs-business-page-intro {
  margin: 0 0 14px;
}

.hs-business-page-intro .sub {
  margin: 0;
}

.hs-st-request-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 0 8px;
  border-top: 1px solid #ecede8;
}

.hs-st-request-feature__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 1.35rem;
  width: 100%;
  max-width: 22rem;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: none !important;
  filter: none !important;
}

.hs-st-request-feature__btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hs-st-request-feature__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 36rem;
}

.hs-st-request-feature__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px 6px 8px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #17241c);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.hs-st-request-feature__chip:hover,
.hs-st-request-feature__chip:focus-visible {
  border-color: rgba(26, 127, 75, 0.4);
  background: var(--accent-tint, #e6fbf1);
  outline: none;
}

.hs-st-request-feature__chip img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  flex: none;
}

.hs-st-request-feature__chip--else {
  border-style: solid;
  color: var(--ink-3, #6b776f);
}

.hs-st-add-block.hs-st-tools-section {
  border: 1px solid #ecede8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.hs-st-add-block .hs-st-full-view__head {
  border-bottom: 1px solid #f1f2ed;
}

.hs-st-add-block .hs-st-add-grid {
  padding: 12px 14px 16px;
}

.hs-training-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.hs-training-sections__lede {
  margin: 0;
}

.hs-training-sections .hs-training-subtabs-wrap,
.hs-training-sections .hs-training-subtabs {
  width: 100%;
}

.hs-connector-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3ef;
  color: #2f5d45;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.hs-connector-tag--private {
  background: #f1f2ed;
  color: #5c6670;
}

/* Desktop keeps Private in its column; mobile stacks it under email. */
.hs-connector-account__tags .hs-connector-tag--private {
  display: none;
}

.hs-connector-account--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.hs-connector-account__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-connector-account__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hs-scheduled-tasks-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.25rem;
}

.hs-scheduled-tasks-card__top h3 {
  margin: 0;
}

.hs-scheduled-tasks-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.hs-scheduled-tasks-card h3 {
  margin: 0 0 0.25rem;
}

.hs-scheduled-tasks-card,
#ws-panel-scheduled-tasks .hs-scheduled-tasks-card {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.hs-scheduled-tasks-card > .sub {
  margin: 0 0 1rem;
}

.hs-scheduled-tasks {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

#ws-panel-scheduled-tasks .hs-st-tools-section,
#ws-panel-scheduled-tasks .hs-portal-section__body {
  overflow: visible;
}

.hs-scheduled-tasks__empty {
  margin: 0.75rem 0 0;
}

.hs-scheduled-tasks__scan-grid {
  margin-top: 0.75rem;
}

.hs-st-scan-cards {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-st-scan-card {
  border: 1px solid #e7edea;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafcfb;
}

.hs-st-scan-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
}

.hs-st-scan-card__info {
  flex: 1 1 160px;
  min-width: 0;
}

.hs-st-scan-card__title {
  font-weight: 600;
  font-size: 14px;
}

.hs-st-scan-card__meta {
  margin-top: 2px;
  font-size: 12px;
}

.hs-st-scan-card__status {
  margin-top: 4px;
  font-size: 13px;
  color: #3d4a44;
}

.hs-st-scan-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.hs-st-scan-card__history {
  margin-top: 10px;
  font-size: 12px;
}

.hs-st-scan-card__history summary {
  cursor: pointer;
  color: #5c6b64;
  font-weight: 500;
}

.hs-st-scan-history {
  margin: 8px 0 0;
  padding: 0 0 0 1rem;
  list-style: disc;
  color: #5c6b64;
}

.hs-st-scan-history__time {
  color: #8a9690;
}

.hs-st-scan-history__status {
  font-weight: 500;
}

.hs-st-scan-history__err {
  display: block;
  margin-top: 2px;
  color: #b45309;
  font-size: 11px;
}

.hs-scheduled-tasks__grid {
  margin-top: 0.75rem;
}

#ws-panel-scheduled-tasks .hs-st-section-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3, 12px);
  margin: var(--sp-8, 32px) 0 var(--sp-4, 16px);
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

#ws-panel-scheduled-tasks .hs-st-add-block .hs-st-section-label {
  margin-top: var(--sp-4, 16px);
}

#ws-panel-scheduled-tasks .hs-st-section-label h2 {
  margin: 0;
  font-family: var(--hs-font-ui, var(--font, inherit));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
  white-space: nowrap;
}

#ws-panel-scheduled-tasks .hs-st-section-label__rule {
  flex: 1;
  height: 1px;
  background: var(--hair, var(--hs-neutral-200));
}

#ws-panel-scheduled-tasks .hs-st-section-label__count {
  font-family: var(--hs-font-ui, var(--font, inherit));
  font-size: 12px;
  color: var(--ink-3, var(--hs-text-muted));
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#ws-panel-scheduled-tasks .hs-st-add-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4, 16px);
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 920px) {
  #ws-panel-scheduled-tasks .hs-st-add-grid {
    grid-template-columns: 1fr;
  }
}

#ws-panel-scheduled-tasks .hs-st-add-card {
  position: relative;
  display: block;
  text-align: left;
  background: var(--panel, #fff);
  border: 1.5px solid var(--hair-2, #c8d0c8);
  border-radius: var(--r-xl, 20px);
  padding: var(--sp-5, 20px);
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(8, 40, 24, 0.05);
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s, background 0.14s;
}

#ws-panel-scheduled-tasks .hs-st-add-card:hover {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #e6fbf1);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(8, 40, 24, 0.09);
  transform: translateY(-2px);
}

#ws-panel-scheduled-tasks .hs-st-add-card:active {
  transform: translateY(0);
}

#ws-panel-scheduled-tasks .hs-st-add-card--selected {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #e6fbf1);
  box-shadow: 0 0 0 1px var(--accent-2, #1a7f4b);
}

#ws-panel-scheduled-tasks .hs-st-add-card__ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md, 12px);
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, #1a7f4b);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-4, 16px);
}

#ws-panel-scheduled-tasks .hs-st-add-card__ic svg {
  width: 20px;
  height: 20px;
}

#ws-panel-scheduled-tasks .hs-st-add-card__label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

#ws-panel-scheduled-tasks .hs-st-add-card__desc {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--ink-2, var(--hs-text-muted));
  line-height: 1.5;
}

#ws-panel-scheduled-tasks .hs-st-add-card__plus {
  position: absolute;
  top: var(--sp-4, 16px);
  right: var(--sp-4, 16px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel-2, #f6f8f5);
  color: var(--ink-3, var(--hs-text-muted));
  display: grid;
  place-items: center;
  transition: background 0.14s, color 0.14s;
}

#ws-panel-scheduled-tasks .hs-st-add-card__plus svg {
  width: 16px;
  height: 16px;
}

#ws-panel-scheduled-tasks .hs-st-add-card:hover .hs-st-add-card__plus {
  background: var(--accent-2, #1a7f4b);
  color: #fff;
}

#ws-panel-scheduled-tasks .hs-st-assignments--after-block {
  margin-top: var(--sp-4, 16px);
  padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--hair, var(--hs-neutral-200));
}

.hs-scheduled-tasks {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#ws-panel-scheduled-tasks .hs-st-assignments {
  min-width: 0;
  max-width: 100%;
}

#ws-panel-scheduled-tasks .hs-st-task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4, 16px);
  min-width: 0;
  max-width: 100%;
}

#ws-panel-scheduled-tasks .hs-st-full-view {
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-xl, 20px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
  overflow: hidden;
}

#ws-panel-scheduled-tasks .hs-st-full-view__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  border-bottom: 1px solid var(--hair, var(--hs-neutral-200));
  background: var(--panel-2, #f6f8f5);
  position: relative;
}

#ws-panel-scheduled-tasks .hs-st-full-view__head .hs-portal-back {
  position: static;
  transform: none;
}

#ws-panel-scheduled-tasks .hs-st-full-view__head h4 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
}

#ws-panel-scheduled-tasks .hs-st-full-view__body {
  padding: var(--sp-5, 20px);
}

#ws-panel-scheduled-tasks .hs-st-full-view .hs-scheduled-tasks__form {
  margin-top: 0;
  max-width: 640px;
}

#ws-panel-scheduled-tasks .hs-st-full-view .hs-st-report-picker {
  padding: 0;
}

@media (max-width: 920px) {
  #ws-panel-scheduled-tasks .hs-st-task-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#ws-panel-scheduled-tasks .hs-st-task-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-xl, 20px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.06));
  transition: opacity 0.2s, box-shadow 0.14s, border-color 0.14s;
  cursor: pointer;
}

#ws-panel-scheduled-tasks .hs-st-task-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
  padding: var(--sp-5, 20px);
  min-width: 0;
}

#ws-panel-scheduled-tasks .hs-st-task-card.is-expanded {
  border-color: var(--accent-2, #1a7f4b);
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px rgba(8, 40, 24, 0.07));
}

#ws-panel-scheduled-tasks .hs-st-task-card:hover {
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px rgba(8, 40, 24, 0.07));
}

#ws-panel-scheduled-tasks .hs-st-task-card.is-off {
  opacity: 0.68;
}

#ws-panel-scheduled-tasks .hs-st-task-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
}

#ws-panel-scheduled-tasks .hs-st-task-card__ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-md, 12px);
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, #1a7f4b);
  display: grid;
  place-items: center;
}

#ws-panel-scheduled-tasks .hs-st-task-card__ic svg {
  width: 20px;
  height: 20px;
}

#ws-panel-scheduled-tasks .hs-st-task-card__ic-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

#ws-panel-scheduled-tasks .hs-st-task-card__titles {
  flex: 1;
  min-width: 0;
}

#ws-panel-scheduled-tasks .hs-st-task-card__type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-task-card__name {
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ws-panel-scheduled-tasks .hs-st-task-card .hs-st-switch {
  flex-shrink: 0;
}

#ws-panel-scheduled-tasks .hs-st-task-card .hs-st-switch .hs-agent-switch__label {
  display: none;
}

#ws-panel-scheduled-tasks .hs-st-task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
}

#ws-panel-scheduled-tasks .hs-st-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--r-pill, 999px);
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-pill__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ws-panel-scheduled-tasks .hs-st-pill svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-task-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, inherit);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#ws-panel-scheduled-tasks .hs-st-task-card__desc b {
  font-weight: 600;
}

#ws-panel-scheduled-tasks .hs-st-task-card__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--hair, var(--hs-neutral-200));
}

#ws-panel-scheduled-tasks .hs-st-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
  flex: 1 1 auto;
}

#ws-panel-scheduled-tasks .hs-st-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

#ws-panel-scheduled-tasks .hs-st-status--ok {
  color: var(--pass, #1e9e63);
}

#ws-panel-scheduled-tasks .hs-st-status--ok .hs-st-status__dot {
  background: var(--pass, #1e9e63);
}

#ws-panel-scheduled-tasks .hs-st-status--paused {
  color: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-status--paused .hs-st-status__dot {
  background: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-status--warn {
  color: #b7791f;
}

#ws-panel-scheduled-tasks .hs-st-status--warn .hs-st-status__dot {
  background: #b7791f;
}

#ws-panel-scheduled-tasks .hs-st-status__sub {
  color: var(--ink-3, var(--hs-text-muted));
  font-weight: 500;
}

#ws-panel-scheduled-tasks .hs-st-task-card__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

#ws-panel-scheduled-tasks .hs-st-task-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: none;
  border-radius: var(--r-pill, 999px);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-text-muted));
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

#ws-panel-scheduled-tasks .hs-st-task-btn svg {
  width: 16px;
  height: 16px;
}

#ws-panel-scheduled-tasks .hs-st-task-btn:hover {
  background: var(--panel-3, #eef2ec);
  color: var(--ink, inherit);
}

#ws-panel-scheduled-tasks .hs-st-task-btn--del:hover {
  background: var(--fail-tint, #fbe9e8);
  color: var(--fail, #d9534f);
}

#ws-panel-scheduled-tasks .hs-st-task-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#ws-panel-scheduled-tasks .hs-st-task-btn:disabled:hover {
  background: transparent;
  color: var(--ink-2, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-task-card__details {
  padding: 0 var(--sp-5, 20px) var(--sp-5, 20px);
  border-top: 1px solid var(--hair, var(--hs-neutral-200));
  cursor: default;
}

#ws-panel-scheduled-tasks .hs-st-task-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

#ws-panel-scheduled-tasks .hs-st-task-detail__label {
  font-weight: 700;
  color: var(--ink-3, var(--hs-text-muted));
  text-transform: uppercase;
  font-size: 11px;
}

#ws-panel-scheduled-tasks .hs-st-task-card__output {
  margin: 0 0 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-md, 12px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 240px;
  overflow-y: auto;
}

#ws-panel-scheduled-tasks .hs-st-task-card__output--err {
  background: var(--fail-tint, #fbe9e8);
  border-color: rgba(217, 83, 79, 0.25);
  color: var(--fail, #d9534f);
}

#ws-panel-scheduled-tasks .hs-st-task-card__details-empty,
#ws-panel-scheduled-tasks .hs-st-task-card__details-note,
#ws-panel-scheduled-tasks .hs-st-task-card__details-running {
  margin: 0 0 12px;
  font-size: 13px;
}

#ws-panel-scheduled-tasks .hs-st-task-run-btn {
  margin-top: 4px;
}

#ws-panel-scheduled-tasks .hs-st-task-results {
  margin: 12px 0;
}

#ws-panel-scheduled-tasks .hs-st-task-listing-table {
  width: 100%;
  min-width: 0;
}

#ws-panel-scheduled-tasks .hs-st-task-other-wrap {
  margin-top: 16px;
}

#ws-panel-scheduled-tasks .hs-st-task-other__section-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
}

#ws-panel-scheduled-tasks .hs-st-task-other__hint {
  margin: 0 0 10px;
}

#ws-panel-scheduled-tasks .hs-st-task-other__heading {
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-task-other__block {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-md, 12px);
  background: var(--panel-2, #f6f8f5);
}

#ws-panel-scheduled-tasks .hs-st-task-other__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

#ws-panel-scheduled-tasks .hs-st-task-other__row {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.45;
}

#ws-panel-scheduled-tasks .hs-st-task-other__key {
  flex: 0 0 88px;
  font-weight: 600;
  color: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-scheduled-tasks .hs-st-task-other__val {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

#ws-panel-scheduled-tasks .hs-st-task-card__summary {
  margin: 10px 0 0;
  font-size: 13px;
}

#ws-panel-scheduled-tasks .hs-st-pill--agent {
  background: rgba(45, 106, 79, 0.12);
  color: var(--everglade, #2d6a4f);
  font-weight: 600;
}

#ws-panel-scheduled-tasks .hs-st-pill--silent {
  background: rgba(90, 90, 90, 0.1);
  color: var(--hs-neutral-600, #5a5a5a);
  font-weight: 600;
}

#ws-panel-scheduled-tasks .hs-st-agent-share {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-md, 12px);
  background: var(--panel-2, #f6f8f5);
}

#ws-panel-scheduled-tasks .hs-st-agent-share--form {
  margin-top: 14px;
  padding: 0;
  border: none;
  background: transparent;
  align-items: center;
}

#ws-panel-scheduled-tasks .hs-st-agent-share__hint {
  margin: 6px 0 0;
  max-width: 480px;
}

#ws-panel-scheduled-tasks .hs-st-agent-share__copy {
  flex: 1;
  min-width: 0;
}

#ws-panel-scheduled-tasks .hs-st-agent-share__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

#ws-panel-scheduled-tasks .hs-st-agent-share__desc {
  display: block;
  margin: 0;
  line-height: 1.45;
}

#ws-panel-scheduled-tasks .hs-st-task-card__details .hs-kb-preview-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.hs-st-assignment-toggle .hs-agent-switch {
  flex-shrink: 0;
}

.hs-st-scan-card__toggle {
  flex-shrink: 0;
  align-self: flex-start;
}

.hs-st-switch .hs-agent-switch__label {
  font-size: 11px;
}

.hs-connectors-layout__section--after-block {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #E7EDEA;
}

.hs-scheduled-tasks__form {
  margin-top: 0.75rem;
  max-width: 520px;
}

.hs-scheduled-tasks__form h5 {
  margin: 0 0 0.75rem;
  font-size: 14px;
  font-weight: 600;
}

.hs-st-add-block {
  margin-top: 0;
}

.hs-st-type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.hs-st-type-card--selected {
  border-color: #2d6a4f;
  background: #f0f7f3;
  box-shadow: 0 0 0 1px #2d6a4f;
}

.hs-st-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e7edea;
  border-radius: 10px;
  background: #fafcfb;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hs-st-type-card:hover {
  border-color: #b8d4c8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hs-st-type-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #2d6a4f;
}

.hs-st-type-card__icon svg {
  width: 24px;
  height: 24px;
}

.hs-st-type-card__icon--img,
.hs-st-type-icon--img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.hs-st-type-card__label {
  font-weight: 600;
  font-size: 14px;
}

.hs-st-type-card__desc {
  font-size: 12px;
  line-height: 1.35;
}

.hs-st-report-preview {
  margin-top: 0.5rem;
  max-width: 480px;
}

.hs-st-report-preview--composer {
  margin: 0.65rem 0 0.15rem;
  max-width: none;
}

.hs-st-report-preview__sample {
  margin: 0.35rem 0 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  background: #f4f7f5;
  border: 1px solid #e7edea;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hs-st-report-preview--composer .hs-st-report-preview__sample {
  max-height: 220px;
  overflow: auto;
}

.hs-st-run-once {
  margin-top: 0.55rem;
}

.hs-st-connect-cta {
  margin-top: 0.5rem;
}

.hs-st-report-picker h5 {
  margin: 0 0 0.5rem;
}

.hs-scheduled-tasks__form-actions {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
}

.hs-connectors-layout__row--head {
  font-size: 12px;
  font-weight: 600;
  color: #5c6b64;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #e7edea;
}

.hs-training-sources-kb-flow {
  min-width: 0;
}

.hs-training-sources-kb-flow__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Full-page site connect / results modal (Information → Connected sites). */
.hs-kb-site-modal {
  position: fixed;
  inset: 0;
  z-index: 860;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}
.hs-kb-site-modal[hidden] {
  display: none !important;
}
.hs-kb-site-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 9, 0.52);
}
.hs-kb-site-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(920px, 100vw);
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  background: var(--hs-bg-canvas, var(--panel, #fff));
  color: var(--hs-fg-primary, var(--ink, #17241c));
  box-shadow: var(--hs-elevation-overlay, -8px 0 32px rgba(0, 0, 0, 0.28));
}
@media (min-width: 720px) {
  .hs-kb-site-modal {
    padding: 24px;
    align-items: center;
  }
  .hs-kb-site-modal__panel {
    height: min(860px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    border-radius: 16px;
    border: 1px solid var(--hs-border, rgba(29, 64, 50, 0.12));
    overflow: hidden;
  }
}
.hs-kb-site-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hs-border, rgba(29, 64, 50, 0.1));
  flex-shrink: 0;
}
.hs-kb-site-modal__head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.hs-kb-site-modal__head .sub {
  margin: 4px 0 0;
}
.hs-kb-site-modal__close {
  flex-shrink: 0;
}
.hs-kb-site-modal__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.hs-kb-site-modal__body > h3:first-child,
.hs-kb-site-modal__body .hs-kb-flow > h3:first-child {
  margin-top: 0;
}

/* Short steps size the dialog to their content instead of parking a small column
   in the middle of the tall record-review surface. */
@media (min-width: 720px) {
  .hs-kb-site-modal--compact .hs-kb-site-modal__panel {
    width: min(520px, 100vw);
    height: auto;
    max-height: calc(100vh - 48px);
  }
}
.hs-kb-site-modal--compact .hs-kb-site-modal__body {
  flex: 0 1 auto;
  padding: 20px 20px 24px;
}

.hs-kb-connect {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.hs-kb-connect__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.hs-kb-connect__input {
  width: 100%;
}
.hs-kb-connect__hint {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--hs-fg-secondary, #4d6055);
}
.hs-kb-connect__submit {
  align-self: stretch;
  justify-content: center;
  margin-top: 1rem;
}
.hs-kb-connect__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--hs-fg-secondary, #4d6055);
}
.hs-kb-connect__status[hidden] {
  display: none;
}
.hs-kb-connect__status--err {
  color: var(--hs-danger-fg, #b3261e);
}
.hs-kb-connect__status--busy::before {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--hs-accent-muted, rgba(29, 64, 50, 0.25));
  border-top-color: var(--hs-accent-solid, #1d4032);
  animation: hs-kb-connect-spin 0.7s linear infinite;
}
@keyframes hs-kb-connect-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-kb-connect__status--busy::before {
    animation: none;
  }
}
.hs-kb-connect__steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hs-border, rgba(29, 64, 50, 0.1));
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--hs-fg-secondary, #4d6055);
}
.hs-kb-connect__steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hs-kb-connect__steps strong {
  color: var(--hs-fg-primary, #17241c);
  font-weight: 600;
}
.hs-kb-connect__step-n {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-bg-inset, rgba(29, 64, 50, 0.07));
  color: var(--hs-fg-primary, #17241c);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
}

.hs-kb-scan-wait {
  max-width: 420px;
  margin: 0 auto;
  padding: 1.5rem 0 1rem;
  text-align: center;
}
.hs-kb-scan-wait h3 {
  margin: 1rem 0 0.35rem;
}
.hs-kb-scan-wait .sub {
  margin: 0;
}

.hs-kb-results-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.25rem;
}
.hs-kb-results-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.5rem;
}
.hs-kb-results-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* KB modal reuses .hs-st-pill; size icons here (panel-scoped rules don't apply in the modal). */
.hs-kb-site-modal .hs-st-pill,
.hs-kb-results-hero .hs-st-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair, rgba(29, 64, 50, 0.12));
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-text-muted));
}
.hs-kb-site-modal .hs-st-pill__text,
.hs-kb-results-hero .hs-st-pill__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-kb-site-modal .hs-st-pill svg,
.hs-kb-results-hero .hs-st-pill svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.hs-kb-result-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.hs-kb-result-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.hs-kb-result-status--ok { color: #0b7350; }
.hs-kb-result-status--run { color: #9c6a0f; }
.hs-kb-result-status--err { color: #a82b30; }
.hs-kb-result-status--warn { color: #7a5209; }

.hs-kb-captured-table-wrap {
  margin-top: 0.75rem;
}
.hs-kb-captured-table th,
.hs-kb-captured-table td {
  font-size: 13px;
  vertical-align: top;
}
.hs-kb-result-general {
  margin-top: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--hs-border, rgba(29, 64, 50, 0.12));
  border-radius: 12px;
  background: var(--hs-bg-subtle, rgba(29, 64, 50, 0.03));
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.45;
}
.hs-kb-results-empty {
  margin: 2rem 0;
  text-align: center;
}
.hs-kb-site-brief-details {
  margin-top: 1.5rem;
  border-top: 1px solid var(--hs-border, rgba(29, 64, 50, 0.1));
  padding-top: 1rem;
}
.hs-kb-site-brief-details > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.hs-kb-site-brief-details > summary::-webkit-details-marker {
  display: none;
}
.hs-kb-site-brief-details[open] > summary {
  margin-bottom: 0.75rem;
}

body.hs-kb-site-modal-open {
  overflow: hidden;
  /* Scroll position is preserved via lockPortalScrollForKbModal (fixed body on narrow). */
}

.hs-integrations-kb-inline {
  min-width: 0;
}

.hs-integrations-kb-inline--list {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e7edea;
}

.hs-integrations-kb-inline > h3,
.hs-integrations-kb-inline > h4 {
  margin-top: 0;
}

.hs-kb-flow {
  min-width: 0;
}

.hs-kb-file-list,
.hs-training-files-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.hs-kb-file-list li,
.hs-training-files-list li {
  padding: 6px 0;
  border-bottom: 1px solid #e7edea;
}

.hs-kb-file-list li:last-child,
.hs-training-files-list li:last-child {
  border-bottom: none;
}

.hs-kb-file-row {
  font-weight: 600;
}

.hs-kb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
}

.hs-kb-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid rgba(29, 64, 50, 0.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.hs-kb-card:hover {
  border-color: rgba(29, 64, 50, 0.28);
  background: rgba(29, 64, 50, 0.03);
}

.hs-kb-card .sub {
  margin: 4px 0 0;
}

.hs-kb-sources {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hs-kb-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(29, 64, 50, 0.08);
}

.hs-kb-review-table input.hs-input {
  margin-bottom: 6px;
  font-size: 13px;
}

.hs-kb-source-toggle {
  display: flex;
  gap: 16px;
  margin: 8px 0 12px;
  font-size: 14px;
}

.hs-kb-source-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.hs-kb-samples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.hs-kb-sample-card {
  padding: 12px 14px;
  border: 1px solid rgba(29, 64, 50, 0.12);
  border-radius: 10px;
  background: rgba(29, 64, 50, 0.03);
}

.hs-kb-sample-fields {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.hs-connector-logo--kb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(29, 64, 50, 0.1);
  font-size: 11px;
  font-weight: 700;
  color: rgba(29, 64, 50, 0.75);
}

.hs-kb-credits-hint {
  font-size: 12px;
  opacity: 0.85;
}

.hs-kb-rationale {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(29, 64, 50, 0.05);
}

.hs-kb-intent {
  margin: 0.75rem 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--hs-accent, #1d4032);
  background: rgba(29, 64, 50, 0.06);
}

.hs-kb-plan-wait {
  text-align: center;
  padding: 2rem 1rem;
  max-width: 420px;
  margin: 0 auto;
}

.hs-kb-plan-wait-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.hs-kb-plan-wait-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hs-accent, #1d4032);
  opacity: 0.35;
  animation: hs-kb-plan-pulse 1.2s ease-in-out infinite;
}

.hs-kb-plan-wait-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.hs-kb-plan-wait-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes hs-kb-plan-pulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.hs-kb-plan-wait-id {
  font-size: 12px;
  opacity: 0.6;
}

.hs-kb-review-table--readonly td {
  vertical-align: top;
  padding: 10px 12px;
}

.hs-kb-review-table--readonly td strong {
  font-weight: 600;
}

.hs-kb-schedule #ws-kb-sched-time-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hs-kb-schedule {
  margin: 1rem 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(29, 64, 50, 0.04);
  border: 1px solid rgba(29, 64, 50, 0.1);
}

.hs-kb-preview-sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hs-kb-preview-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.hs-kb-preview-scroll {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--hs-border, #e5e7eb);
  border-radius: 8px;
  margin-top: 0.5rem;
}

.hs-kb-preview-table {
  font-size: 0.875rem;
  margin: 0;
}

.hs-kb-preview-table th,
.hs-kb-preview-table td {
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
}

.hs-kb-configure__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 1.25rem;
}

/* Confirm scan setup — aquamarine action buttons */
/* This block painted primary and soft the SAME aqua — two ranks rendered
   identically, so the panel offered a choice it did not visually distinguish.
   Removed; the ladder ranks them. */

.hs-kb-configure-dismiss {
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-neutral-500);
  border-bottom: none;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.hs-kb-configure-dismiss:hover {
  color: var(--hs-danger-600, #d6453b);
}

/* Simplified remove controls on configure preview */
.hs-kb-configure .hs-kb-col-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--hs-neutral-400);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.hs-kb-configure .hs-kb-col-remove:hover {
  color: var(--hs-neutral-700);
  background: var(--hs-neutral-150);
}

.hs-kb-configure .hs-kb-column-chip {
  background: var(--hs-everglade-100, #f0fff3);
  color: var(--hs-everglade-700, #1d4032);
}

.hs-kb-col-head {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.hs-kb-col-remove {
  border: none;
  background: transparent;
  color: var(--hs-muted, #6b7280);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
}

.hs-kb-col-remove:hover {
  color: var(--hs-text, #111);
}

.hs-kb-column-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.hs-kb-column-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--hs-surface-2, #f3f4f6);
  font-size: 0.8125rem;
}

.hs-kb-col-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hs-kb-col-add-row .hs-input {
  flex: 1;
  min-width: 140px;
}

.hs-kb-sched-summary {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.hs-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(200, 120, 40, 0.15);
  color: #8a5a10;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-intro {
  margin-bottom: var(--hs-space-4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-subtabs-wrap,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-subtabs {
  margin: 0 0 var(--hs-space-4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-subtabs-wrap {
  justify-content: flex-start;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-subtabs.sgc--raised button.is-on {
  color: var(--accent-2, var(--hs-aqua-deep));
  font-weight: 700;
}

.hs-training-business-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* One owner for the gaps down this column. The shell's gap, the connect
   card's own margin-bottom and the wallet's margin-top used to stack, so the
   page ran 12px between the first two blocks and 34px before the deck. */
[data-hs="2"] .hs-training-business-shell > .hs-connect-card,
[data-hs="2"] .hs-training-business-shell > .hs-biz-wallet {
  margin-top: 0;
  margin-bottom: 0;
}

/* Three radii sat in one column — 16px, 14px and the deck's 20px. The cards
   are the page, so the two blocks above them match the cards. */
.hs-training-business-shell > .hs-connect-card,
.hs-training-business-shell > .hs-biz-know {
  border-radius: var(--hs-radius-xl, 20px);
}

/* ── Business information page: header, review strip, groups ──────────────
   The page reads as five groups. A group is a labelled band the eye scans;
   the accordions inside it are what actually opens. Keeping those two levels
   visually distinct is the whole point — an undifferentiated stack of
   identical collapsed bars is what this replaced. */

.hs-biz-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 4px;
}

/* Coloured card so the progress / quick-ask block reads apart from the groups. */
.hs-biz-know {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--hs-aqua, #43e5a4) 42%, #cfe3d8);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--hs-aqua, #43e5a4) 22%, #fff) 0%,
      color-mix(in srgb, var(--hs-aqua, #43e5a4) 10%, #f3faf6) 55%,
      #eef8f2 100%
    );
  box-shadow: 0 1px 0 rgba(14, 27, 17, 0.04);
}

.hs-biz-know__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hs-biz-know__row,
.hs-biz-head__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.hs-biz-know__name,
.hs-biz-head__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hs-ink, #0e1b11);
  overflow-wrap: anywhere;
}

.hs-biz-know__chip,
.hs-biz-head__chip {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--hs-aqua, #43e5a4) 35%, #dbe5df);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2, #45594c);
  font-size: 0.75rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hs-biz-know__lead,
.hs-biz-head__lead {
  margin: 0;
}

.hs-biz-know__progress,
.hs-biz-head__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hs-biz-know__meter,
.hs-biz-head__meter {
  flex: 1 1 140px;
  max-width: 240px;
  height: 8px;
  border-radius: 999px;
  background: rgba(14, 27, 17, 0.12);
  overflow: hidden;
}

/* Fills by sliding a full-width bar out from under the track, not by growing.
   scaleX would squash the 999px radius on the leading end; translate keeps it
   round and stays off the main thread. Set --hs-progress to a 0-1 fraction. */
.hs-biz-know__meter-fill,
.hs-biz-head__meter-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-aqua-deep, #27ae60), var(--hs-aqua, #43e5a4));
  transform: translateX(calc(-100% + var(--hs-progress, 0) * 100%));
  transition: transform 0.3s ease;
}

.hs-biz-know__progress-text,
.hs-biz-head__progress-text {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink-2, #45594c);
}

.hs-biz-know__ask {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(14, 27, 17, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

.hs-biz-know__ask--done {
  padding: 10px 12px;
}

.hs-biz-know__ask--website .hs-biz-know__ask-hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hs-biz-know__ask--scanning {
  border-style: solid;
}

.hs-biz-know__ask-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hs-aqua-deep, #1f8f55);
}

.hs-biz-know__ask-prompt,
.hs-biz-know__ask-done {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hs-ink, #0e1b11);
  line-height: 1.35;
}

.hs-biz-know__ask-done {
  font-weight: 500;
  color: var(--ink-2, #45594c);
}

.hs-biz-know__ask-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-biz-know__ask-input {
  width: 100%;
  background: #fff;
}

.hs-biz-know__ask-value {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 7.5rem;
  overflow: auto;
  padding: 8px 0;
  border-bottom: 1px solid rgba(14, 27, 17, 0.12);
}

.hs-biz-know__ask-proposed {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hs-ink, #0e1b11);
  white-space: pre-wrap;
  word-break: break-word;
}

.hs-biz-know__ask-current {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-2, #45594c);
  white-space: pre-wrap;
  word-break: break-word;
}

.hs-biz-know__ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.hs-biz-know__ask-submit {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--ink, #0e1b11);
  color: #fff;
  cursor: pointer;
  appearance: none;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.hs-biz-know__ask-submit:hover:not(:disabled) {
  background: #17241c;
}

.hs-biz-know__ask-submit:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.hs-biz-know__ask-submit:focus-visible {
  outline: 2px solid var(--hs-aqua-deep, #1f8f55);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .hs-biz-know__ask-form {
    flex-direction: row;
    align-items: center;
  }

  .hs-biz-know__ask-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hs-biz-know__ask--confirm .hs-biz-know__ask-form {
    align-items: flex-end;
  }

  .hs-biz-know__ask-actions {
    flex: 0 0 auto;
  }
}

[data-theme="dark"] .hs-biz-know__ask-value,
.dark .hs-biz-know__ask-value {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .hs-biz-know__ask-current,
.dark .hs-biz-know__ask-current {
  color: rgba(255, 255, 255, 0.62);
}

.hs-biz-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hs-biz-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* No rule under the group label: the page sits on a tinted background where a
   hairline reads as an artifact rather than as structure. The 28px gap between
   groups plus the uppercase label is what separates them. */
.hs-biz-group__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
}

.hs-biz-group__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hs-neutral-500, #6b7f73);
}

.hs-biz-group__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-2, #45594c);
}

/* Sections inside a group sit tighter than the groups themselves, so the
   grouping reads before the individual rows do. */
.hs-biz-group__body {
  gap: 8px;
}

/* ── Business information wallet ──────────────────────────────────────────
   The page is one deck: .hs-connectors-layout provides the tuck sizes and
   .hs-cw-card provides each section. */
.hs-biz-wallet {
  min-width: 0;
  /* The wallet moves its own geometry on every toggle — body height plus the
     69px tuck flip above the next element — and the browser's scroll anchoring
     answers that by holding whatever node it picked, which is frequently below
     the card being shut. The head under the finger then slides off-screen. The
     toggle handler pins that head itself (workspace-app.js
     pinHeadThroughTransition); this turns off the browser's competing
     correction so there is one adjustment per frame, not two. */
  overflow-anchor: none;
}

/* Section mark, on every card of the group. --hs-space-4 is the card head's
   own gap, so the size and that gap are the whole icon column. */
.hs-biz-wallet {
  --hs-biz-icon-size: 20px;
}

.hs-biz-icon {
  flex: 0 0 auto;
  width: var(--hs-biz-icon-size);
  height: var(--hs-biz-icon-size);
  color: var(--ink-2, #45594c);
}

/* Vertical inset as margins, not padding — see .hs-cw-card__fold. */
.hs-biz-card {
  --hs-cw-fold-lead: 16px;
  --hs-cw-fold-tail: 20px;
}

/* The head is a button, so it has a UA border, background and font to shed
   before the wallet's own head layout can read. */
.hs-biz-card__head {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hs-biz-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.hs-biz-card__title {
  font-family: var(--hs-font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--hs-ink, #0e1b11);
  overflow-wrap: anywhere;
}


.hs-biz-card__meta {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2, #45594c);
}

.hs-biz-card__chev {
  flex: 0 0 auto;
  color: var(--hs-neutral-500, #6b7f73);
  transition: transform 0.2s ease;
}

.hs-biz-card[data-open] .hs-biz-card__chev {
  transform: rotate(180deg);
}

/* The meta is a count of what is inside; once the card is open the contents
   say it better, and the line reads as a stale duplicate. */
.hs-biz-card[data-open] .hs-biz-card__meta {
  display: none;
}

@media (max-width: 640px) {
  .hs-biz-card__meta {
    display: none;
  }
}

.hs-biz-behavior-setting__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hs-biz-behavior-setting__copy {
  flex: 1;
  min-width: 0;
}

.hs-biz-behavior-setting .hs-ptool__blab {
  margin: 0 0 12px;
}

.hs-biz-behavior-setting__row .hs-ptool__blab {
  margin-bottom: 0;
}

.hs-biz-subfield {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hs-neutral-200, #e3ebe6);
}

.hs-biz-subfield__title {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hs-neutral-500, #6b7f73);
}

[data-theme="dark"] .hs-biz-know,
.dark .hs-biz-know {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--hs-aqua, #43e5a4) 18%, #152019) 0%,
      color-mix(in srgb, var(--hs-aqua, #43e5a4) 8%, #121a15) 100%
    );
  border-color: color-mix(in srgb, var(--hs-aqua, #43e5a4) 28%, rgba(255, 255, 255, 0.12));
  box-shadow: none;
}

[data-theme="dark"] .hs-biz-know__chip,
.dark .hs-biz-know__chip,
[data-theme="dark"] .hs-biz-head__chip,
.dark .hs-biz-head__chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .hs-biz-know__ask,
.dark .hs-biz-know__ask {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .hs-biz-know__ask-input,
.dark .hs-biz-know__ask-input {
  background: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .hs-biz-know__ask-eyebrow,
.dark .hs-biz-know__ask-eyebrow {
  color: var(--hs-aqua, #43e5a4);
}

[data-theme="dark"] .hs-biz-know__meter,
.dark .hs-biz-know__meter,
[data-theme="dark"] .hs-biz-head__meter,
.dark .hs-biz-head__meter {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .hs-biz-know__meter-fill,
.dark .hs-biz-know__meter-fill,
[data-theme="dark"] .hs-biz-head__meter-fill,
.dark .hs-biz-head__meter-fill {
  background: linear-gradient(90deg, #2ecc71, var(--hs-aqua, #43e5a4));
}

[data-theme="dark"] .hs-biz-subfield,
.dark .hs-biz-subfield {
  border-color: rgba(255, 255, 255, 0.14);
}

.hs-agent-persona-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.hs-agent-persona-card__head h3 {
  margin: 0;
}

.hs-agent-persona-card__actions,
.hs-persona-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 0;
  border-top: none;
}

#ws-panel-agent-persona .hs-agent-page-head {
  margin-bottom: 12px;
}

#ws-panel-agent-persona .hs-persona-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3.6 / 1;
  min-height: 140px;
  max-height: 220px;
  margin: 0 0 22px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(90deg, #9fd9c8 0%, #a8c7e8 48%, #b79adf 100%);
}

#ws-panel-agent-persona .hs-persona-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

#ws-panel-agent-persona .hs-persona-hero__avatar {
  display: none;
}

#ws-panel-agent-persona .hs-persona-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  border: none;
  background: transparent;
}

#ws-panel-agent-persona .hs-persona-block__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#ws-panel-agent-persona .hs-persona-block__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #17241c);
}

#ws-panel-agent-persona .hs-persona-block__copy {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-3, #6b776f);
}

#ws-panel-agent-persona .hs-persona-photo-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#ws-panel-agent-persona .hs-persona-photo-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#ws-panel-agent-persona .hs-persona-photo-opt:hover,
#ws-panel-agent-persona .hs-persona-photo-opt:focus-visible {
  border-color: rgba(26, 127, 75, 0.4);
  outline: none;
}

#ws-panel-agent-persona .hs-persona-photo-opt.is-selected {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #e6fbf1);
  box-shadow: 0 0 0 1px rgba(26, 127, 75, 0.12);
}

#ws-panel-agent-persona .hs-persona-photo-opt__img {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #eef2f0;
  flex: none;
}

#ws-panel-agent-persona .hs-persona-photo-opt__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ws-panel-agent-persona .hs-persona-photo-opt__img--logo img {
  object-fit: contain;
  padding: 4px;
  background: #fff;
}

#ws-panel-agent-persona .hs-persona-photo-opt__img--upload {
  color: var(--ink-3, #6b776f);
}

#ws-panel-agent-persona .hs-persona-photo-opt__label {
  font-size: 0.875rem;
  font-weight: 650;
}

#ws-panel-agent-persona .hs-persona-sliders {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}

#ws-panel-agent-persona .hs-persona-slider-row__label {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, #6b776f);
}

#ws-panel-agent-persona .hs-persona-slider-row .hs-agent-slider__value {
  font-size: 0.9rem;
  font-weight: 650;
}

.hs-persona-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hs-persona-identity__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.hs-persona-identity__opt:hover,
.hs-persona-identity__opt:focus-visible {
  border-color: rgba(26, 127, 75, 0.4);
  outline: none;
}

.hs-persona-identity__opt.is-selected {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #e6fbf1);
  box-shadow: 0 0 0 1px rgba(26, 127, 75, 0.12);
}

.hs-persona-identity__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink, #17241c);
}

.hs-persona-identity__desc {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-3, #6b776f);
}

@media (max-width: 699px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-business-info-hero {
    aspect-ratio: 2.1 / 1;
    min-height: 110px;
    max-height: 160px;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .hs-persona-identity {
    grid-template-columns: 1fr;
  }
}

/* Max call length — same control as the lander price bar (.pb-* there,
   .hs-pb-* on billing). A recessed well, a raised thumb that carries the
   figure, a clipped fill, and a tick strip in the range you have not taken.
   --pb-x and --pb-fill are px, set by script, so a drag is paint-only. */
.hs-agent-slider {
  display: grid;
  gap: var(--hs-space-2, 8px);
  min-width: 0;
}

.hs-agent-slider__well {
  --pb-tabw: 5.75rem;
  --pb-x: 0px;
  --pb-fill: 0px;
  --pb-inset: 2px;
  --pb-lift: 3px;
  position: relative;
  height: 3.25rem;
  padding: var(--pb-inset);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-glass-recessed);
  cursor: grab;
  touch-action: pan-y;
}

.hs-agent-slider__well.is-dragging { cursor: grabbing; }

.hs-agent-slider__fill {
  position: absolute;
  inset: var(--pb-inset);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-accent-muted);
  clip-path: inset(0 calc(100% - var(--pb-fill, 0px)) 0 0 round var(--hs-radius-pill));
}

.hs-agent-slider__wave {
  position: absolute;
  top: var(--pb-inset);
  bottom: var(--pb-inset);
  left: calc(var(--pb-inset) + var(--pb-tabw));
  right: var(--pb-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding-inline: var(--hs-space-3, 12px);
  overflow: hidden;
  pointer-events: none;
  opacity: var(--pb-wave-o, 1);
}

.hs-agent-slider__wave i {
  flex: none;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--hs-accent-solid);
  opacity: 0.16;
  animation: hs-agent-slider-wave 2.4s var(--hs-ease-standard, ease) infinite;
  animation-delay: var(--pb-d);
}

@keyframes hs-agent-slider-wave {
  0%, 100% { opacity: 0.16; }
  45%      { opacity: 0.85; }
}

.hs-agent-slider__tab {
  position: absolute;
  top: var(--pb-inset);
  bottom: var(--pb-inset);
  left: var(--pb-inset);
  transform: translateX(var(--pb-x, 0px));
  will-change: transform;
  width: var(--pb-tabw);
  border-radius: var(--hs-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hs-fg-primary);
  pointer-events: none;
  isolation: isolate;
}

.hs-agent-slider__tab::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--pb-lift));
  z-index: 0;
  border-radius: inherit;
  background: var(--hs-seg-thumb, var(--hs-bg-raised));
  box-shadow:
    0 0 0 0.5px rgba(13, 16, 14, 0.06),
    0 1px 2px rgba(13, 16, 14, 0.06),
    0 4px 10px -2px rgba(13, 16, 14, 0.10);
  transition:
    inset var(--hs-duration-fast, 120ms) var(--hs-ease-standard, ease),
    box-shadow var(--hs-duration-fast, 120ms) var(--hs-ease-standard, ease);
}

.hs-agent-slider__tabin {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.hs-agent-slider__tabin b {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hs-agent-slider__tabin i {
  font-style: normal;
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-tertiary);
  line-height: 1;
}

.hs-agent-slider__range {
  position: absolute;
  inset: var(--pb-inset);
  z-index: 2;
  width: calc(100% - 2 * var(--pb-inset));
  height: calc(100% - 2 * var(--pb-inset));
  margin: 0;
  opacity: 0;
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.hs-agent-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pb-tabw);
  height: 100%;
  border-radius: var(--hs-radius-pill);
  background: transparent;
}

.hs-agent-slider__range::-moz-range-thumb {
  width: var(--pb-tabw);
  height: 100%;
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: transparent;
}

.hs-agent-slider__well:has(.hs-agent-slider__range:focus-visible) .hs-agent-slider__tab::before,
.hs-agent-slider__well.is-focus .hs-agent-slider__tab::before {
  box-shadow:
    0 0 0 var(--hs-size-focus-ring, 2px) var(--hs-border-focus),
    0 4px 10px -2px rgba(13, 16, 14, 0.10);
}

.hs-agent-slider__well.is-dragging .hs-agent-slider__tab::before {
  inset: calc(-1 * var(--pb-lift) - 1px);
  box-shadow:
    0 0 0 0.5px rgba(13, 16, 14, 0.06),
    0 2px 4px rgba(13, 16, 14, 0.08),
    0 8px 18px -4px rgba(13, 16, 14, 0.14);
}

.hs-agent-slider__ends {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-2xs);
  letter-spacing: var(--hs-tracking-caps);
  color: var(--hs-fg-tertiary);
}

.hs-agent-slider__pill {
  flex: none;
  padding: 2px var(--hs-space-2, 8px);
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-2xs);
  font-weight: var(--hs-weight-semibold, 600);
  letter-spacing: var(--hs-tracking-caps);
  color: var(--hs-accent-ink, var(--hs-accent-solid, #2f6f57));
  background: var(--hs-accent-muted);
  transition: opacity var(--hs-duration-base, 200ms) var(--hs-ease-standard, ease);
}

.hs-agent-slider__pill.is-dim { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hs-agent-slider__wave i { animation: none; opacity: 0.45; }
}

#ws-panel-agent-persona .hs-agent-settings-lead {
  margin: 0 0 14px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-subtab-panel {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-subtab-lead {
  margin: 0 0 var(--hs-space-4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-business-card__top,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-card__top,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--hs-space-4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-business-card__top h3,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-card__top h3,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-card__top h3 {
  margin: 0 0 0.25rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-business-card__top .sub,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-card__top .sub,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #vl-rules-mount, #hs-phone-rules-mount) .hs-rules-card__top .sub {
  margin: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-add-block {
  margin-top: 6px;
}

/* The add-scenario dialog mounts on <body>, so none of the
   `#ws-panel-agent-phone .hs-scenarios-tab` field styling reaches it. Without
   these rules .hs-training-input renders as a raw browser input. Everything
   here mirrors the design-system .hs-field / .hs-input / .hs-dialog__footer
   specs so the dialog matches the rest of the console. */
/* `dialog.` prefix, not the bare class: .hs-dialog sets the same properties and
   ds/hs-parts.css loads after this sheet, so an equal-specificity rule loses. */
dialog.hs-scenarios-add-dialog {
  /* .hs-dialog caps height but is not a flex column, so a tall composer
     overflows past the clip instead of scrolling the body. */
  display: flex;
  flex-direction: column;
  width: min(480px, calc(100vw - var(--hs-space-8, 32px)));
}

dialog.hs-scenarios-add-dialog:not([open]) {
  display: none;
}

dialog.hs-scenarios-add-dialog .hs-dialog__header {
  flex: none;
}

dialog.hs-scenarios-add-dialog .hs-dialog__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--hs-space-4, 16px);
  min-height: 0;
}

/* No card border: the composer is a section of the dialog body, opened by the
   "Custom scenario" option directly above it. A second bordered box inside the
   modal reads as a nested dialog. */
.hs-scenarios-add-dialog .hs-scenarios-composer {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4, 16px);
}

.hs-scenarios-add-dialog .hs-scenarios-composer[hidden] {
  display: none;
}

.hs-scenarios-add-dialog .hs-scenarios-composer__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4, 16px);
  padding: 0;
}

/* Inherits padding, rim and sunken fill from .hs-dialog__footer; this only
   pins it below the scrolling body and drops the legacy green tint. */
dialog.hs-scenarios-add-dialog .hs-scenarios-composer__foot {
  flex: none;
  align-items: center;
  margin: 0;
}

dialog.hs-scenarios-add-dialog .hs-scenarios-composer__foot[hidden] {
  display: none;
}

.hs-scenarios-add-dialog .hs-training-field {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2, 8px);
  margin: 0;
  padding: 0;
  border: 0;
}

.hs-scenarios-add-dialog .hs-training-field label {
  font-family: var(--hs-font-ui, inherit);
  font-size: var(--hs-text-sm, 0.8125rem);
  font-weight: var(--hs-weight-semibold, 600);
  line-height: var(--hs-leading-snug, 1.35);
  color: var(--hs-fg-primary, #1a2e24);
}

.hs-scenarios-add-dialog .hs-scenarios-composer__hint {
  margin: 0;
  font-size: var(--hs-text-sm, 0.8125rem);
  line-height: var(--hs-leading-normal, 1.5);
  color: var(--hs-fg-tertiary, #6b776f);
}

.hs-scenarios-add-dialog .hs-training-input,
.hs-scenarios-add-dialog input.hs-training-input,
.hs-scenarios-add-dialog textarea.hs-training-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--hs-size-control-md, 40px);
  height: auto;
  padding: var(--hs-space-2, 8px) var(--hs-space-3, 12px);
  border: var(--hs-size-hairline, 1px) solid var(--hs-glass-rim, #dbe5df);
  border-radius: var(--hs-radius-md, 12px);
  background: var(--hs-glass-raised, #fff);
  backdrop-filter: var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  font-family: var(--hs-font-ui, inherit);
  font-size: var(--hs-text-sm, 0.875rem);
  line-height: var(--hs-leading-normal, 1.5);
  color: var(--hs-fg-primary, #1a2e24);
  box-shadow: none;
  transition:
    border-color var(--hs-duration-fast, 0.15s) var(--hs-ease-standard, ease),
    box-shadow var(--hs-duration-fast, 0.15s) var(--hs-ease-standard, ease);
}

.hs-scenarios-add-dialog .hs-training-input::placeholder {
  color: var(--hs-fg-disabled, #8c9a93);
}

.hs-scenarios-add-dialog .hs-training-input:hover:not(:disabled) {
  border-color: var(--hs-border-strong, #b8cfc2);
}

.hs-scenarios-add-dialog .hs-training-input:focus,
.hs-scenarios-add-dialog input.hs-training-input:focus,
.hs-scenarios-add-dialog textarea.hs-training-input:focus {
  outline: none;
  border-color: var(--hs-border-accent, #0d6e5b);
  box-shadow: 0 0 0 var(--hs-size-focus-ring, 3px) var(--hs-accent-ring, rgba(13, 110, 91, 0.18));
}

.hs-scenarios-add-dialog textarea.hs-training-input {
  min-height: 96px;
  resize: vertical;
}

/* The base .hs-phone-tool-option selected state is a hard #111 inset ring.
   Inside the dialog that fights the accent-led focus treatment on the fields
   right below it, so the open option carries the accent instead. */
.hs-scenarios-add-dialog .hs-phone-tool-option.is-selected {
  border-color: var(--hs-border-accent, #0d6e5b);
  box-shadow: inset 0 0 0 var(--hs-size-hairline, 1px) var(--hs-border-accent, #0d6e5b);
}

.hs-scenarios-add-dialog .hs-phone-tool-option__desc {
  color: var(--hs-fg-secondary, #5f6f68);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-add-tile {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hair-2, #d7ddd3);
  border-radius: var(--r-md, 12px);
  background: var(--panel, #fff);
  color: var(--ink-2, #3d4a42);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-add-tile:hover {
  border-color: var(--accent-2, #1a7f4b);
  background: var(--accent-tint, #fafcfb);
  color: var(--ink, #1a2e24);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-add-tile.is-open {
  border-style: solid;
  border-color: var(--accent-2, #1a7f4b);
  box-shadow: 0 0 0 1px var(--accent-tint-border, #d4ebe4);
  background: var(--accent-tint, #fafcfb);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-add-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--accent-tint, #e8f5ef);
  color: var(--accent-2, #157a4a);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-add-tile__label {
  flex: 1 1 auto;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-field--website {
  grid-template-columns: minmax(120px, 26%) 1fr;
  align-items: start;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-website-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-website-inline .hs-training-input {
  flex: 1 1 12rem;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-website-inline .hs-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.hs-agent-settings-section {
  margin-bottom: var(--hs-space-4);
}

.hs-agent-settings-section:last-of-type {
  margin-bottom: var(--hs-space-3);
}

.hs-agent-settings-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--hs-space-2);
  color: var(--hs-neutral-700);
}

.hs-agent-setting-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-2);
}

.hs-agent-setting-option {
  appearance: none;
  border: 1px solid var(--hs-neutral-250, #d8ddd4);
  background: #fff !important;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111 !important;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hs-agent-setting-option:hover {
  border-color: var(--hs-neutral-400, #aeb5ab);
  background: #fff !important;
  color: #111 !important;
}

.hs-agent-setting-option.is-selected {
  border-color: #111;
  background: #fff !important;
  color: #111 !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #111;
}

.hs-agent-settings-custom {
  margin-top: var(--hs-space-3);
  max-width: 20rem;
}

.hs-agent-settings-custom .hs-input {
  margin-top: 0.35rem;
}


.hs-agent-settings-modal__card {
  width: min(560px, 100%);
  color: #17241c;
}

.hs-agent-settings-modal__card h3 {
  margin: 0 0 0.35rem;
  color: #17241c;
}

.hs-agent-settings-modal__card .sub,
.hs-agent-settings-lead {
  color: #5c675f;
}

.hs-agent-settings-lead {
  margin: 0 0 var(--hs-space-4);
}

.hs-agent-personality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hs-space-3);
}

.hs-agent-personality-card {
  appearance: none;
  border: 1px solid var(--hs-neutral-250, #d8ddd4);
  background: #fff;
  border-radius: 12px;
  padding: 0.75rem 0.65rem 0.65rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: #17241c;
}

.hs-agent-personality-card:hover {
  border-color: var(--hs-neutral-400, #aeb5ab);
}

.hs-agent-personality-card.is-selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.hs-agent-personality-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hs-everglade-900, #0e1b11);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-agent-personality-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.hs-agent-personality-card__avatar--custom {
  background: #eef2ec;
  color: #5c675f;
}

.hs-agent-personality-card__avatar--custom svg {
  width: 34px;
  height: 34px;
}

.hs-agent-personality-card__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.hs-agent-personality-swap-row {
  margin-top: 0.65rem;
}

.hs-agent-settings-avatar-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}

.hs-agent-settings-avatar-row img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--hs-everglade-900, #0e1b11);
}

.hs-agent-settings-avatar-actions {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Public website chatbot — light theme (fixed palette) */
.julia-chat-dock--public.julia-chat-dock--theme-light .julia-chat-panel,
.julia-chat-panel--public.julia-chat-panel--theme-light {
  background: #fff;
  border-color: #e7edea;
  color: #17241c;
}

.julia-chat-dock--public.julia-chat-dock--theme-light .julia-chat-panel__head,
.julia-chat-panel--public.julia-chat-panel--theme-light .julia-chat-panel__head {
  background: #fafcfb;
  border-bottom-color: #e7edea;
}

.julia-chat-dock--public.julia-chat-dock--theme-light .julia-chat-panel__thread-wrap,
.julia-chat-panel--public.julia-chat-panel--theme-light .julia-chat-panel__thread-wrap {
  background: #f4f7f5;
}

.julia-chat-dock--public.julia-chat-dock--theme-light .julia-chat-panel__foot,
.julia-chat-panel--public.julia-chat-panel--theme-light .julia-chat-panel__foot {
  background: #fff;
  border-top-color: #e7edea;
}

.julia-chat-panel--theme-light .julia-chat-panel__identity h2 {
  color: #17241c;
}

.julia-chat-panel--theme-light .julia-chat-panel__identity .sub {
  color: #5f6b66;
}

/* Public website chatbot — dark theme (Figma reference palette) */
.julia-chat-dock--public.julia-chat-dock--theme-dark .julia-chat-panel,
.julia-chat-panel--public.julia-chat-panel--theme-dark {
  background: var(--hs-everglade-900, #0e1b11);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f0fff3;
}

.julia-chat-dock--public.julia-chat-dock--theme-dark .julia-chat-panel__head,
.julia-chat-panel--public.julia-chat-panel--theme-dark .julia-chat-panel__head {
  background: linear-gradient(180deg, #1d4032 0%, #163528 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.julia-chat-dock--public.julia-chat-dock--theme-dark .julia-chat-panel__thread-wrap,
.julia-chat-panel--public.julia-chat-panel--theme-dark .julia-chat-panel__thread-wrap {
  background: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-dock--public.julia-chat-dock--theme-dark .julia-chat-panel__foot,
.julia-chat-panel--public.julia-chat-panel--theme-dark .julia-chat-panel__foot {
  background: #0b1610;
  border-top-color: rgba(255, 255, 255, 0.06);
}

.julia-chat-panel--theme-dark .julia-chat-panel__identity h2 {
  color: #f0fff3;
}

/* Near-white, not mint. The header carries the business name ("Chat with us"
   by default) at 12px over a dark green head — the mint it used to use read as
   decoration and was the hardest line in the panel to actually read. */
.julia-chat-panel--theme-dark .julia-chat-panel__identity .sub {
  color: rgba(240, 255, 243, 0.88);
}

.julia-chat-panel--theme-dark .julia-chat-avatar-menu__pop {
  background: #14241c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.julia-chat-panel--theme-dark .julia-chat-avatar-menu__item {
  color: #f0fff3;
}

.julia-chat-panel--theme-dark .julia-chat-avatar-menu__item:hover,
.julia-chat-panel--theme-dark .julia-chat-avatar-menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.julia-chat-panel--theme-dark .julia-chat-minimize {
  background: rgba(255, 255, 255, 0.06);
  color: #ccffeb;
}

.julia-chat-panel--theme-dark .julia-chat-minimize:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0fff3;
}

.julia-chat-panel--theme-dark .julia-chat-empty,
.julia-chat-panel--theme-dark .julia-chat-empty .sub {
  color: #b2ffe0;
}

.julia-chat-panel--theme-dark .julia-chat-empty strong {
  color: #f0fff3;
}

.julia-chat-panel--theme-dark .hs-chat-day span {
  background: rgba(255, 255, 255, 0.07);
  color: #ccffeb;
}

.julia-chat-panel--theme-dark .hs-chat-time {
  color: #b2ffe0;
  opacity: 0.75;
}

.julia-chat-panel--theme-dark .julia-chat-panel__thread .hs-chat-msg.outbound .hs-chat-bubble {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f0fff3;
}

.julia-chat-panel--theme-dark .julia-chat-panel__thread .hs-chat-msg.inbound .hs-chat-bubble {
  background: var(--julia-chat-accent, #43e5a4);
  border: none;
  color: var(--julia-chat-accent-text, #1d4032);
  font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(67, 229, 164, 0.45);
}

.julia-chat-panel--theme-dark .julia-chat-panel__thread .hs-chat-bubble a.julia-chat-link {
  color: #ccffeb;
  font-weight: 600;
}

.julia-chat-panel--theme-dark .julia-chat-panel__thread .hs-chat-msg.inbound .hs-chat-bubble a.julia-chat-link {
  color: var(--julia-chat-accent-text, #1d4032);
}

.julia-chat-panel--theme-dark .julia-chat-attach-btn,
.julia-chat-panel--theme-dark .julia-chat-voice-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #b2ffe0;
}

.julia-chat-panel--theme-dark .julia-chat-attach-btn:hover,
.julia-chat-panel--theme-dark .julia-chat-voice-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f0fff3;
}

.julia-chat-panel--theme-dark .julia-chat-voice-btn.is-active {
  background: rgba(67, 229, 164, 0.18);
  border-color: var(--julia-chat-accent, #43e5a4);
  color: var(--julia-chat-accent, #43e5a4);
}

.julia-chat-panel--theme-dark .julia-chat-form input[type="text"],
.julia-chat-panel--theme-dark .julia-chat-form textarea {
  background: #f0fff3;
  color: #17241c;
  border-color: transparent;
}

.julia-chat-panel--theme-dark .julia-chat-form input[type="text"]::placeholder,
.julia-chat-panel--theme-dark .julia-chat-form textarea::placeholder {
  color: #5f6b66;
}

.julia-chat-panel--theme-dark .julia-chat-status {
  color: rgba(245, 248, 246, 0.55);
}

.julia-chat-panel--theme-dark .julia-chat-typing,
.julia-chat-panel--theme-dark .julia-chat-dots {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.julia-chat-panel--theme-dark .julia-chat-dots i {
  background: #b2ffe0;
}

/* Public website chatbot — glass theme (liquid glass launcher + frosted panel) */
.julia-chat-dock--theme-glass,
.julia-chat-dock--public.julia-chat-dock--theme-glass {
  --julia-chat-glass-bg: rgba(255, 255, 255, 0.36);
  --julia-chat-glass-border: 1px solid rgba(255, 255, 255, 0.34);
  --julia-chat-glass-blur: blur(30px) saturate(1.7);
  --julia-chat-glass-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
}

/* Glass frost lives on ::before so backdrop-filter can clip to the pill
   (avoids the square ghost). Outer lift stays on the button — no filter:drop-shadow. */
.julia-chat-fab--glass.julia-chat-fab--pill,
.julia-chat-dock--theme-glass .julia-chat-fab--pill {
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow:
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
  color: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-fab--glass.julia-chat-fab--pill::before,
.julia-chat-dock--theme-glass .julia-chat-fab--pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--julia-chat-glass-bg);
  backdrop-filter: var(--julia-chat-glass-blur);
  -webkit-backdrop-filter: var(--julia-chat-glass-blur);
  border: var(--julia-chat-glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
  overflow: hidden;
}

.julia-chat-fab--glass.julia-chat-fab--pill:hover,
.julia-chat-dock--theme-glass .julia-chat-fab--pill:hover {
  filter: none;
  background: transparent;
}

.julia-chat-fab--glass.julia-chat-fab--pill:hover::before,
.julia-chat-dock--theme-glass .julia-chat-fab--pill:hover::before {
  background: rgba(255, 255, 255, 0.44);
}

.julia-chat-fab--glass.julia-chat-fab--pill:active,
.julia-chat-dock--theme-glass .julia-chat-fab--pill:active {
  transform: scale(0.97);
  background: transparent;
}

.julia-chat-fab--glass.julia-chat-fab--pill:active::before,
.julia-chat-dock--theme-glass .julia-chat-fab--pill:active::before {
  background: rgba(255, 255, 255, 0.4);
}

.julia-chat-fab--glass.julia-chat-fab--compact,
.julia-chat-dock--theme-glass .julia-chat-fab--compact {
  background: transparent;
  box-shadow: none;
}

.julia-chat-fab--glass.julia-chat-fab--compact .julia-chat-panel-avatar,
.julia-chat-dock--theme-glass .julia-chat-fab--compact .julia-chat-panel-avatar {
  width: 48px;
  height: 48px;
  padding: 3px;
  box-sizing: border-box;
  background: var(--julia-chat-glass-bg);
  backdrop-filter: var(--julia-chat-glass-blur);
  -webkit-backdrop-filter: var(--julia-chat-glass-blur);
  border: var(--julia-chat-glass-border);
  box-shadow: var(--julia-chat-glass-lift);
}

.julia-chat-fab--glass.julia-chat-fab--compact:hover .julia-chat-panel-avatar,
.julia-chat-dock--theme-glass .julia-chat-fab--compact:hover .julia-chat-panel-avatar {
  transform: scale(1.06);
  box-shadow:
    var(--julia-chat-glass-lift),
    0 8px 24px rgba(14, 27, 17, 0.16);
}

.julia-chat-dock--public.julia-chat-dock--theme-glass .julia-chat-panel,
.julia-chat-panel--public.julia-chat-panel--theme-glass {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(32px) saturate(1.75);
  -webkit-backdrop-filter: blur(32px) saturate(1.75);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 18px 48px rgba(14, 27, 17, 0.14),
    0 4px 14px rgba(14, 27, 17, 0.06);
  color: #17241c;
}

/* Header is the workspace Julia header: solid white, hairline rule. Frosted
   keeps the glass in the launcher and the panel body — the head stays opaque so
   the business name reads the same over any page. */
.julia-chat-dock--public.julia-chat-dock--theme-glass .julia-chat-panel__head,
.julia-chat-panel--public.julia-chat-panel--theme-glass .julia-chat-panel__head {
  background: #ffffff;
  border-bottom-color: var(--hair, #e7edea);
}

.julia-chat-dock--public.julia-chat-dock--theme-glass .julia-chat-panel__thread-wrap,
.julia-chat-panel--public.julia-chat-panel--theme-glass .julia-chat-panel__thread-wrap {
  background: rgba(255, 255, 255, 0.12);
}

.julia-chat-dock--public.julia-chat-dock--theme-glass .julia-chat-panel__foot,
.julia-chat-panel--public.julia-chat-panel--theme-glass .julia-chat-panel__foot {
  background: rgba(255, 255, 255, 0.24);
  border-top-color: rgba(255, 255, 255, 0.34);
}

/* Same ink as `.ws-julia-panel--text` in workspace-julia-widget.css. The
   subtitle keeps #5f6b66 rather than workspace's `--ink-2`: same grey to the
   eye, but 5.4:1 on white instead of 4.0:1, so the business name clears AA. */
.julia-chat-panel--theme-glass .julia-chat-panel__identity h2 {
  color: var(--ink, #17241c);
}

.julia-chat-panel--theme-glass .julia-chat-panel__identity .sub {
  color: #5f6b66;
}

.julia-chat-panel--theme-glass .julia-chat-avatar-menu__pop {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

@media (prefers-reduced-transparency: reduce) {
  .julia-chat-panel--theme-glass .julia-chat-avatar-menu__pop {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.julia-chat-panel--theme-glass .julia-chat-minimize {
  background: rgba(14, 27, 17, 0.06);
  color: #1d4032;
}

.julia-chat-panel--theme-glass .julia-chat-minimize:hover {
  background: rgba(14, 27, 17, 0.1);
  color: var(--hs-everglade-900, #0e1b11);
}

.julia-chat-panel--theme-glass .julia-chat-status {
  color: rgba(14, 27, 17, 0.5);
}

.julia-chat-panel--theme-glass .julia-chat-form input[type="text"],
.julia-chat-panel--theme-glass .julia-chat-form textarea {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.5);
}

.hs-chatbot-launcher-option__stage .julia-chat-fab--glass.julia-chat-fab--pill {
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow:
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
  color: var(--hs-everglade-900, #0e1b11);
}

.hs-chatbot-launcher-option__stage .julia-chat-fab--glass.julia-chat-fab--pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--julia-chat-glass-bg, rgba(255, 255, 255, 0.36));
  backdrop-filter: var(--julia-chat-glass-blur, blur(30px) saturate(1.7));
  -webkit-backdrop-filter: var(--julia-chat-glass-blur, blur(30px) saturate(1.7));
  border: var(--julia-chat-glass-border, 1px solid rgba(255, 255, 255, 0.34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
  overflow: hidden;
}

/* Shared scheduled-tasks primitives inside agent training */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-section-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3, 12px);
  margin: var(--sp-8, 32px) 0 var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-add-block .hs-st-section-label,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-form .hs-st-section-label {
  margin-top: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-form .hs-st-section-label:first-child {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-section-label h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-section-label__rule {
  flex: 1;
  height: 1px;
  background: var(--hair, var(--hs-neutral-200));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-section-label__count {
  font-size: 13px;
  color: var(--ink-3, var(--hs-text-muted));
  font-weight: 600;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-add-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 920px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-add-grid,
  :is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-rec-grid {
    grid-template-columns: 1fr;
  }
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card {
  position: relative;
  display: block;
  text-align: left;
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-xl, 20px);
  padding: var(--sp-5, 20px);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card:hover {
  border-color: var(--accent-2, #1a7f4b);
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px rgba(8, 40, 24, 0.07));
  transform: translateY(-2px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card__ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md, 12px);
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, #1a7f4b);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card__label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card__desc {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--ink-2, var(--hs-text-muted));
  line-height: 1.5;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card__plus {
  position: absolute;
  top: var(--sp-4, 16px);
  right: var(--sp-4, 16px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel-2, #f6f8f5);
  display: grid;
  place-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card {
  display: flex;
  flex-direction: column;
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--hs-neutral-200));
  border-radius: var(--r-xl, 20px);
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__body {
  padding: var(--sp-5, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card.is-off {
  opacity: 0.72;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md, 12px);
  background: var(--accent-tint, #e6fbf1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__titles {
  flex: 1;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__type {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__name {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--panel-2, #f6f8f5);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-pill--agent {
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, #1a7f4b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 13px;
  font-weight: 600;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-status--ok { color: #067647; }
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-status--warn { color: #b54708; }
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-status--paused { color: var(--ink-3, var(--hs-text-muted)); }

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: transparent;
  color: var(--ink-2, var(--hs-text-muted));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-btn:hover {
  background: var(--panel-2, #f6f8f5);
  color: var(--ink, #101828);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-btn--del:hover {
  background: var(--fail-tint, #fbe9e8);
  color: var(--fail, #d9534f);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-btn svg {
  width: 16px;
  height: 16px;
}

/* Business info tab */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-business-info-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 498;
  min-height: 120px;
  max-height: 220px;
  margin: 0 0 16px;
  border-radius: 18px;
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-business-info-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-business-shell--gate .hs-business-info-hero {
  max-height: 180px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero {
  border: 1px solid var(--hair, #e7edea);
  border-radius: var(--r-xl, 20px);
  padding: var(--sp-5, 20px);
  background: var(--accent-tint, #f4faf8);
  margin-bottom: var(--sp-5, 20px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-business-shell--gate {
  max-width: 32rem;
  margin: 0 auto;
  padding-top: 0.5rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--gate {
  background: #fff;
  border-color: rgba(14, 27, 17, 0.1);
  box-shadow: 0 10px 28px rgba(14, 27, 17, 0.06);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--website-setup {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: min(42%, 190px);
  padding-right: var(--sp-5, 20px);
  padding-bottom: var(--sp-5, 20px);
  padding-left: var(--sp-5, 20px);
  border: 1px solid rgba(14, 27, 17, 0.1) !important;
  border-radius: var(--r-xl, 20px) !important;
  background-color: #fff !important;
  background-image: url("/assets/business-website-setup.png") !important;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--website-setup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0.82) 54%,
    #fff 72%
  );
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--website-setup .hs-training-input {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__skip {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(14, 27, 17, 0.42);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__skip:hover {
  color: rgba(14, 27, 17, 0.65);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-add-options,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-rec-list {
  margin-top: 0.35rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-phone-tool-option {
  background: #fff !important;
  color: #1a2e24 !important;
  border: 1px solid #dbe5df;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-phone-tool-option:hover {
  background: #fbfdfc !important;
  color: #1a2e24 !important;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-phone-tool-option.is-selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
  background: #fff !important;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-option {
  flex-wrap: wrap;
  align-items: center;
  cursor: default;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-option .hs-phone-tool-option__text {
  flex: 1 1 12rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-option .hs-st-switch {
  margin-left: auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option {
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-st-switch,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-td-connected-site-actions {
  cursor: default;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-td-connected-site-action {
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option.is-off {
  opacity: 0.72;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-phone-tool-option__ic {
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-phone-tool-option__ic img,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-connector-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-phone-tool-option__text {
  flex: 1 1 12rem;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-st-switch {
  margin-left: auto;
  flex-shrink: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-option .hs-st-switch .hs-agent-switch__label {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
  width: 100%;
  padding: 0.15rem 0 0 3rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-action {
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2, #45594c);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-action:hover {
  color: var(--ink, #1a2e24);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-action--del {
  color: #b42318;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-action--del:hover {
  color: #912018;
}

@media (max-width: 599px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-connected-site-actions {
    padding-left: 0;
  }
}

/* Pill icons used in training cards — match scheduled-tasks sizing. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-pill svg {
  width: 14px;
  height: 14px;
  flex: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-frequency {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  width: 100%;
  padding: 0.75rem 0 0 3rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-frequency[hidden] {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-frequency label {
  grid-column: 1 / -1;
  color: var(--ink-2, #45594c);
  font-size: 0.78rem;
  font-weight: 650;
}

@media (max-width: 599px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-frequency {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-site-frequency .hs-btn {
    width: 100%;
  }
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-business-card .hs-td-hero:not(.hs-td-hero--empty) {
  background: var(--accent-tint, #f4faf8);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--empty {
  background: var(--accent-tint, #f4faf8);
  border-color: var(--accent-tint-border, #d4ebe4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero h3 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__form .hs-training-input {
  flex: 1 1 14rem;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--scanning {
  border-color: var(--accent-tint-border, #d4ebe4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__head {
  display: flex;
  gap: var(--sp-4, 16px);
  align-items: flex-start;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__head .hs-td-website-analysis__dots {
  flex: 0 0 auto;
  padding-top: 0.15rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__head .hs-td-website-analysis__dots .hs-kb-plan-wait-dots {
  margin-bottom: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--scanning .hs-td-hero__form {
  opacity: 0.72;
}

/* Phone / SMS — shared number hero on the canvas */
#ws-panel-agent-phone .hs-td-hero--phone,
#ws-panel-agent-sms .hs-td-hero--phone {
  border: none;
  border-bottom: 1px solid var(--hair, #e7edea);
  border-radius: 0;
  padding: 4px 0 18px;
  background: transparent;
  margin: 0 0 var(--hs-space-3);
  box-shadow: none;
}

#ws-panel-agent-phone .hs-td-hero--phone.hs-td-hero--assigned,
#ws-panel-agent-sms .hs-td-hero--phone.hs-td-hero--assigned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 4px 0 18px !important;
  margin: 0 0 1.1rem !important;
  border: none !important;
  border-bottom: 1px solid var(--hair, #e7edea) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--ink, #0e1b11);
}

@media (max-width: 899px) {
  #ws-panel-agent-phone .hs-td-hero--phone.hs-td-hero--assigned,
  #ws-panel-agent-sms .hs-td-hero--phone.hs-td-hero--assigned {
    flex-direction: column;
    align-items: stretch;
  }

  #ws-panel-agent-phone .hs-td-hero--assigned .hs-phone-hero-kicker,
  #ws-panel-agent-sms .hs-td-hero--assigned .hs-phone-hero-kicker {
    display: block;
    margin: 0 0 0.35rem;
  }

  #ws-panel-agent-phone .hs-phone-hero-number,
  #ws-panel-agent-sms .hs-phone-hero-number {
    flex-wrap: wrap;
    row-gap: 0.55rem;
  }
}

#ws-panel-agent-sms .hs-td-hero--phone.hs-td-hero--assigned {
  flex-wrap: wrap;
  row-gap: 0.65rem;
}

#ws-panel-agent-phone .hs-td-hero__main,
#ws-panel-agent-sms .hs-td-hero__main {
  flex: 1 1 auto;
  min-width: 0;
}

#ws-panel-agent-phone .hs-td-hero--phone.hs-td-hero--empty,
#ws-panel-agent-sms .hs-td-hero--phone.hs-td-hero--empty {
  border-color: var(--hair, #e7edea);
}

#ws-panel-agent-phone .hs-td-hero--phone h3,
#ws-panel-agent-sms .hs-td-hero--phone h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

#ws-panel-agent-phone .hs-td-hero__actions,
#ws-panel-agent-sms .hs-td-hero__actions {
  margin-top: 0.75rem;
}

#ws-panel-agent-phone .hs-phone-hero-number,
#ws-panel-agent-sms .hs-phone-hero-number {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem 0.65rem;
  margin: 0;
  min-width: 0;
  width: 100%;
}

#ws-panel-agent-phone .hs-phone-hero-number .hs-cf-setup-btn {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

#ws-panel-agent-sms .hs-phone-hero-number .hs-a2p-unlock.hs-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
  margin-left: auto;
}

#ws-panel-agent-phone .hs-phone-hero-number__value,
#ws-panel-agent-sms .hs-phone-hero-number__value {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: clamp(1.15rem, 3.8vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink, #0e1b11);
  line-height: 1.15;
  white-space: nowrap;
}

#ws-panel-agent-phone .hs-td-hero--assigned .hs-phone-hero-kicker,
#ws-panel-agent-sms .hs-td-hero--assigned .hs-phone-hero-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #4a5c52);
}

#ws-panel-agent-phone .hs-td-hero--assigned .hs-phone-agent-header__copy,
#ws-panel-agent-sms .hs-td-hero--assigned .hs-phone-agent-header__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2, #4a5c52);
  background: var(--panel-2, #f7f9f7);
  border: 1px solid var(--hair, #e7edea);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
}

#ws-panel-agent-phone .hs-td-hero--assigned .hs-phone-agent-header__copy:hover,
#ws-panel-agent-sms .hs-td-hero--assigned .hs-phone-agent-header__copy:hover {
  background: rgba(16, 36, 28, 0.06);
  color: var(--ink, #0e1b11);
}

#ws-panel-agent-phone .hs-phone-hero-kicker,
#ws-panel-agent-sms .hs-phone-hero-kicker {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hs-text-muted, #66756d);
}

#ws-panel-agent-phone .hs-phone-hero-owner--compact {
  display: none;
}

#ws-panel-agent-phone .hs-phone-procure .hs-connect-card {
  margin-bottom: 0;
}

#ws-panel-agent-phone .hs-cf-setup-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
}

#ws-panel-agent-phone .hs-admin-test-pool {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: var(--panel, #fff);
}

#ws-panel-agent-phone .hs-admin-test-pool__title {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink, #0e1b11);
}

#ws-panel-agent-phone .hs-admin-test-pool__active-number {
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink, #0e1b11);
  line-height: 1.2;
  flex: 0 0 auto;
}

#ws-panel-agent-phone .hs-admin-test-pool__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}

#ws-panel-agent-phone .hs-admin-test-pool__select {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
}

#ws-panel-agent-phone .hs-admin-test-pool__notice {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--hair, #e7edea);
}

#ws-panel-agent-phone .hs-admin-test-pool__notice-text {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-2, #4a5c52);
}

#ws-panel-agent-phone .hs-admin-test-pool__notice-label {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--ink, #0e1b11);
}

#ws-panel-agent-phone .hs-admin-test-pool__check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--ink-2, #4a5c52);
  cursor: pointer;
}

#ws-panel-agent-phone .hs-admin-test-pool__check.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#ws-panel-agent-phone .hs-admin-test-pool__check input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

#ws-panel-agent-phone .hs-admin-test-pool__check strong {
  color: var(--ink, #0e1b11);
  font-weight: 600;
}

.hs-cf-portal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(16, 24, 40, 0.4);
  animation: hs-st-fade-in 0.16s ease;
}

.hs-cf-portal {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}

/* One blue palette for the whole popup.

   The card used to be white and every answer button was white too, so the
   thing you are meant to click was the same colour as the surface holding it —
   only a hairline told them apart. Tinting the popup and leaving the buttons
   white gives the click targets the contrast instead of asking a 1px border to
   carry it. */
.hs-cf-portal__card {
  --cf-wash-top: #f1f7ff;
  --cf-wash-bot: #ddeaf9;
  --cf-rim: #c7d9ee;
  --cf-rim-strong: #93b3d6;
  --cf-tint: #dbe9f8;
  pointer-events: auto;
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cf-rim);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);
  overflow: hidden;
  animation: hs-st-popover-in 0.18s ease;
}

.hs-cf-portal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.15rem 0.85rem;
  border-bottom: 1px solid var(--cf-rim);
  background: linear-gradient(180deg, #fbfdff 0%, var(--cf-wash-top) 100%);
}

.hs-cf-portal__header--with-back {
  align-items: center;
}

/* Both header controls are a glyph inside a round hit area, so both centre the
   glyph the same way — with flex, not with line-height.

   Back used to be the literal character `←` at `line-height: 1` in a 2.4rem
   box. A glyph's box is not its ink: the arrow's ink sits high and left of
   centre in the em square, so it rendered visibly above and left of the circle
   that appears on hover. It is an SVG now, on the same 24-box and stroke as the
   close icon, and the two buttons are the same size. */
.hs-cf-portal__back,
.hs-cf-portal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.hs-cf-portal__back svg,
.hs-cf-portal__close svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.hs-cf-portal__back {
  color: var(--ink, #0e1b11);
}

.hs-cf-portal__back:hover {
  background: rgba(16, 36, 28, 0.06);
}

.hs-cf-portal__header--with-back .hs-cf-portal__header-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-cf-portal__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__title {
  margin: 0;
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink, #0e1b11);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hs-cf-portal__close {
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__close:hover {
  background: rgba(16, 36, 28, 0.06);
  color: var(--ink, #0e1b11);
}

.hs-cf-portal__body {
  padding: 1rem 1.15rem 1.25rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--cf-wash-top) 0%, var(--cf-wash-bot) 100%);
}

.hs-cf-portal__intro,
.hs-cf-portal__tip,
.hs-cf-portal__section-blurb {
  margin: 0 0 0.85rem;
  color: var(--ink-2, #4a5c52);
  font-size: 0.92rem;
  line-height: 1.45;
}

.hs-cf-portal__note {
  margin: 0 0 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid #e0c98a;
  background: #fff8e8;
  color: #5c4a1f;
  font-size: 0.9rem;
  line-height: 1.45;
}

.hs-cf-portal__note strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #3f3214;
}

/* A read-only strip, so it stays a tint — one step deeper than the wash. The
   pure-white treatment is reserved for things you can click. */
.hs-cf-portal__dest {
  margin: 0 0 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: var(--cf-tint, #e2ecf8);
  border: 1px solid var(--cf-rim, #cddcee);
}

.hs-cf-portal__dest-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__dest-value {
  margin: 0;
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink, #0e1b11);
}

.hs-cf-portal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink, #0e1b11);
}

.hs-cf-portal__line-type {
  border: none;
  padding: 0;
}

.hs-cf-portal__line-type legend {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.hs-cf-portal__line-type label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.hs-cf-portal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.hs-cf-portal__footer--stack {
  flex-direction: column;
  align-items: stretch;
}

.hs-cf-portal__footer--stack .hs-btn {
  width: 100%;
  justify-content: center;
}

.hs-cf-portal__provision .hs-phone-secure-card {
  margin: 0;
  box-shadow: none;
}

.hs-cf-portal__provision .hs-phone-search-form--secure {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}

.hs-cf-portal__provision .hs-phone-search-form--secure .hs-phone-search-form__field--country,
.hs-cf-portal__provision .hs-phone-search-form--secure .hs-phone-search-form__field--area-select,
.hs-cf-portal__provision .hs-phone-search-form--secure .hs-phone-search-form__field--area-custom,
.hs-cf-portal__provision .hs-phone-search-form--secure .hs-phone-search-form__field--number {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.hs-cf-portal__provision .hs-phone-search-form__action {
  width: 100%;
}

.hs-cf-portal__provision .hs-phone-search-form__action .hs-btn {
  width: 100%;
  justify-content: center;
}

.hs-cf-portal__hint {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.8rem;
  color: var(--ink-2, #4a5c52);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* White, like every other panel the wash holds. The old off-green fill was a
   near-match for the white card it used to sit on; on the blue wash it would
   read as a stray green patch. */
.hs-cf-portal__slider {
  margin: 0 0 0.85rem;
  padding: 1rem 1rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--cf-rim, #c7d9ee);
  background: #fff;
}

.hs-cf-portal__slider-value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__slider-value strong {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink, #0e1b11);
  line-height: 1;
}

.hs-cf-portal__slider-sub {
  margin: 0.35rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__slider-label {
  display: block;
  margin: 0;
}

.hs-cf-portal__range-wrap {
  --cf-thumb: 1.4rem;
  --cf-track-h: 0.5rem;
  --cf-range-pct: 0%;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--cf-thumb);
  margin: 0.15rem 0;
}

.hs-cf-portal__range-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--cf-track-h);
  margin-top: calc(var(--cf-track-h) / -2);
  border-radius: 999px;
  background: #d5e0da;
  z-index: 0;
  pointer-events: none;
}

.hs-cf-portal__range-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--cf-track-h);
  margin-top: calc(var(--cf-track-h) / -2);
  width: calc((var(--cf-thumb) / 2) + var(--cf-range-pct) * (100% - var(--cf-thumb)));
  border-radius: 999px;
  background: #2f6f57;
  z-index: 1;
  pointer-events: none;
}

.hs-cf-portal__range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--cf-thumb);
  margin: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.hs-cf-portal__range::-webkit-slider-runnable-track {
  height: var(--cf-track-h);
  border-radius: 999px;
  background: transparent;
  border: none;
}

.hs-cf-portal__range::-moz-range-track {
  height: var(--cf-track-h);
  border-radius: 999px;
  background: transparent;
  border: none;
}

.hs-cf-portal__range::-moz-range-progress {
  height: var(--cf-track-h);
  border-radius: 999px;
  background: transparent;
  border: none;
}

.hs-cf-portal__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cf-thumb);
  height: var(--cf-thumb);
  margin-top: calc((var(--cf-track-h) - var(--cf-thumb)) / 2);
  border-radius: 999px;
  background: #2f6f57;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(14, 27, 17, 0.22);
  cursor: pointer;
}

.hs-cf-portal__range::-moz-range-thumb {
  width: var(--cf-thumb);
  height: var(--cf-thumb);
  border: 3px solid #fff;
  border-radius: 999px;
  background: #2f6f57;
  box-shadow: 0 1px 4px rgba(14, 27, 17, 0.22);
  cursor: pointer;
}

.hs-cf-portal__range:focus-visible {
  outline: 2px solid #2f6f57;
  outline-offset: 4px;
}

.hs-cf-portal__slider-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__hint .hs-cf-country-toggle {
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__call-path {
  position: relative;
  margin: 0 0 0.85rem;
  padding: 0.95rem 0.85rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--cf-rim, #c7d9ee);
  background: #fff;
  overflow: hidden;
}

.hs-cf-portal__call-path-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  position: relative;
  z-index: 1;
}

.hs-cf-portal__call-node {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.55;
  transform: translateX(0);
  transition:
    opacity 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.hs-cf-portal__call-node-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__call-node-value {
  font-size: 0.98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #0e1b11);
  letter-spacing: -0.01em;
}

.hs-cf-portal__call-path-track {
  display: none;
}

.hs-cf-portal__call-path[data-stage="dialing"] [data-node="from"],
.hs-cf-portal__call-path[data-stage="ringing"] [data-node="from"],
.hs-cf-portal__call-path[data-stage="ringing"] [data-node="business"],
.hs-cf-portal__call-path[data-stage="connecting"] [data-node="from"],
.hs-cf-portal__call-path[data-stage="connecting"] [data-node="business"],
.hs-cf-portal__call-path[data-stage="connecting"] [data-node="julia"],
.hs-cf-portal__call-path[data-stage="connected_agent"] [data-node="julia"],
.hs-cf-portal__call-path[data-stage="confirmed"] [data-node="from"],
.hs-cf-portal__call-path[data-stage="confirmed"] [data-node="business"],
.hs-cf-portal__call-path[data-stage="confirmed"] [data-node="julia"] {
  opacity: 1;
}

.hs-cf-portal__call-path[data-stage="dialing"] [data-node="from"],
.hs-cf-portal__call-path[data-stage="ringing"] [data-node="business"],
.hs-cf-portal__call-path[data-stage="connecting"] [data-node="julia"] {
  border-color: #93b4ff;
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  animation: hs-cf-node-pulse 1.2s ease-in-out infinite;
}

.hs-cf-portal__call-path[data-stage="confirmed"] [data-node="julia"] {
  border-color: #9bb8a8;
  background: #eef6f1;
  box-shadow: 0 0 0 3px rgba(47, 111, 87, 0.12);
  animation: none;
}

.hs-cf-portal__call-path[data-stage="connected_human"] [data-node="business"],
.hs-cf-portal__call-path[data-stage="voicemail"] [data-node="business"],
.hs-cf-portal__call-path[data-stage="failed"] [data-node="business"] {
  opacity: 1;
  border-color: #e0a3a3;
  background: #fdf1f1;
  box-shadow: 0 0 0 3px rgba(201, 107, 107, 0.12);
  animation: none;
}

@keyframes hs-cf-node-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@media (min-width: 560px) {
  .hs-cf-portal__call-path-nodes {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
  }

  .hs-cf-portal__call-node {
    min-width: 0;
  }

  .hs-cf-portal__call-path-nodes::before,
  .hs-cf-portal__call-path-nodes::after {
    content: '';
    width: 1.1rem;
    align-self: center;
    height: 2px;
    margin: 0 0.35rem;
    background: linear-gradient(90deg, #c5d4cc, #9bb0a5);
    border-radius: 999px;
    opacity: 0.7;
  }

  .hs-cf-portal__call-path-nodes::before {
    grid-column: 2;
    grid-row: 1;
  }

  .hs-cf-portal__call-path-nodes::after {
    grid-column: 4;
    grid-row: 1;
  }

  .hs-cf-portal__call-path [data-node="from"] { grid-column: 1; }
  .hs-cf-portal__call-path [data-node="business"] { grid-column: 3; }
  .hs-cf-portal__call-path [data-node="julia"] { grid-column: 5; }

  .hs-cf-portal__call-path-track {
    display: block;
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #d7e2dc;
    border-radius: 999px;
    z-index: 0;
    overflow: hidden;
  }

  .hs-cf-portal__call-path-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: -0.275rem;
    border-radius: 999px;
    background: #3b82f6;
    opacity: 0;
    transform: translateX(0);
  }

  .hs-cf-portal__call-path[data-stage="dialing"] .hs-cf-portal__call-path-dot,
  .hs-cf-portal__call-path[data-stage="ringing"] .hs-cf-portal__call-path-dot,
  .hs-cf-portal__call-path[data-stage="connecting"] .hs-cf-portal__call-path-dot {
    opacity: 1;
    animation: hs-cf-path-travel 2.2s ease-in-out infinite;
  }

  .hs-cf-portal__call-path[data-stage="confirmed"] .hs-cf-portal__call-path-dot {
    opacity: 1;
    left: 100%;
    margin-left: -0.55rem;
    background: #2f6f57;
  }

  @keyframes hs-cf-path-travel {
    0% { left: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - 0.55rem); opacity: 0.35; }
  }
}

.hs-cf-portal__test-simple {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hs-cf-portal__test-simple > .hs-cf-portal__intro,
.hs-cf-portal__test-simple > .hs-cf-portal__hint,
.hs-cf-portal__test-simple > .hs-cf-portal__test-status,
.hs-cf-portal__test-simple > .hs-cf-portal__test-confirm,
.hs-cf-portal__test-simple > .hs-cf-portal__footer {
  margin: 0;
}

.hs-cf-portal__test-cta {
  width: 100%;
  min-height: 3.25rem;
  font-size: 1.05rem;
}

.hs-cf-portal__test-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.35rem;
}

.hs-cf-portal__test-confirm[hidden] {
  display: none !important;
}

.hs-cf-portal__test-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--cf-rim, #c7d9ee);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink, #0e1b11);
}

.hs-cf-portal__test-pulse {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #8aa396;
  flex: 0 0 auto;
}

.hs-cf-portal__test-status[data-status="dialing"] .hs-cf-portal__test-pulse,
.hs-cf-portal__test-status[data-status="ringing"] .hs-cf-portal__test-pulse,
.hs-cf-portal__test-status[data-status="connecting"] .hs-cf-portal__test-pulse {
  background: #3b82f6;
  animation: hs-cf-pulse 1s ease-in-out infinite;
}

.hs-cf-portal__test-status[data-status="confirmed"] ,
.hs-cf-portal__test-status[data-status="connected_agent"] {
  border-color: #9bb8a8;
  background: #eef6f1;
  color: #1f4d3a;
}

.hs-cf-portal__test-status[data-status="confirmed"] .hs-cf-portal__test-pulse,
.hs-cf-portal__test-status[data-status="connected_agent"] .hs-cf-portal__test-pulse {
  background: #2f6f57;
}

.hs-cf-portal__test-status[data-status="connected_human"],
.hs-cf-portal__test-status[data-status="voicemail"],
.hs-cf-portal__test-status[data-status="failed"] {
  border-color: #e0a3a3;
  background: #fdf1f1;
  color: #9b1c1c;
}

.hs-cf-portal__test-status[data-status="connected_human"] .hs-cf-portal__test-pulse,
.hs-cf-portal__test-status[data-status="voicemail"] .hs-cf-portal__test-pulse,
.hs-cf-portal__test-status[data-status="failed"] .hs-cf-portal__test-pulse {
  background: #c96b6b;
}

.hs-cf-portal__test-status[data-status="canceled"] {
  border-color: #c5d0c9;
  background: #f3f6f4;
  color: #3d4f45;
}

.hs-cf-portal__test-status[data-status="canceled"] .hs-cf-portal__test-pulse {
  background: #8aa396;
}

.hs-cf-portal__call-path[data-stage="canceled"] [data-node="from"],
.hs-cf-portal__call-path[data-stage="canceled"] [data-node="business"] {
  opacity: 0.7;
  border-color: #c5d0c9;
  background: #f3f6f4;
  animation: none;
}

@keyframes hs-cf-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.hs-cf-portal__dest--compact {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
}

.hs-cf-portal__dest--compact .hs-cf-portal__dest-value {
  font-size: 1.1rem;
}

.hs-cf-portal__choice-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 0.5rem;
}

.hs-cf-portal__choice-grid--menu {
  gap: 0.75rem;
}

.hs-cf-portal__choice-grid--carriers {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* `[data-hs="2"]` on every selector here, and not for tidiness: the v2 bridge
   styles the whole .hs-btn family as pills with a glass rim
   (`[data-hs="2"] :is(.hs-btn, ...)`), and it loads after this file. Unprefixed,
   these answers rendered at radius 999px with a translucent white border —
   lozenges, nothing else in the app is shaped that way. Prefixed, they out-specify
   the bridge and keep the panel radius the rest of the product uses. */
[data-hs="2"] .hs-cf-portal__choice.hs-btn,
.hs-cf-portal__choice.hs-btn,
button.hs-cf-portal__choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 2.9rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cf-rim, #cddcee);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 36, 28, 0.05);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink, #0e1b11);
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

/* Matched to the base rule's specificity, not below it. `.hs-cf-portal__choice`
   alone lost to `.hs-cf-portal__choice.hs-btn` above, so `flex-direction: row`
   never applied to a decisive choice and the icon stacked ON TOP of its own
   title instead of sitting beside it. */
[data-hs="2"] .hs-cf-portal__choice--decisive.hs-btn,
.hs-cf-portal__choice--decisive.hs-btn,
button.hs-cf-portal__choice--decisive {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.4rem;
  padding: 0.7rem 0.9rem;
}

.hs-cf-portal__choice-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

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

.hs-cf-portal__choice-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hs-cf-portal__choice--carrier .hs-cf-portal__choice-icon {
  width: 3rem;
  height: 1.75rem;
}

[data-hs="2"] .hs-cf-portal__choice--other.hs-btn,
.hs-cf-portal__choice--other {
  background: #eef3fa;
}

.hs-cf-portal__choice--other .hs-cf-portal__choice-icon {
  width: 1.75rem;
  height: 1.75rem;
  opacity: 0.72;
}

[data-hs="2"] .hs-cf-portal__choice.hs-btn:hover,
.hs-cf-portal__choice.hs-btn:hover,
button.hs-cf-portal__choice:hover {
  background: #fff;
  border-color: var(--cf-rim-strong, #9cb7d6);
  box-shadow: 0 2px 10px rgba(31, 79, 140, 0.12);
}

/* Menu tiles — solid fills (no glass blur from .hs-btn bridge) */
[data-hs="2"] .hs-cf-portal__choice--tile.hs-btn,
.hs-cf-portal__choice--tile.hs-btn,
button.hs-cf-portal__choice--tile {
  min-height: 3.75rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(14, 27, 17, 0.12);
  transition: filter 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

[data-hs="2"] .hs-cf-portal__choice--tile.hs-btn:hover,
.hs-cf-portal__choice--tile.hs-btn:hover,
button.hs-cf-portal__choice--tile:hover {
  border-color: transparent;
  filter: brightness(1.06);
  box-shadow: 0 3px 10px rgba(14, 27, 17, 0.16);
}

[data-hs="2"] .hs-cf-portal__choice--tile.hs-btn:active,
.hs-cf-portal__choice--tile.hs-btn:active,
button.hs-cf-portal__choice--tile:active {
  filter: brightness(0.97);
  transform: translateY(0.5px);
}

/* The `.hs-btn` in each selector below is load-bearing. The base
   `[data-hs="2"] .hs-cf-portal__choice.hs-btn` rule sets a white fill at
   (0,3,0); a tone rule at (0,2,0) loses to it, and all three menu tiles
   painted white-on-white. Matching the base's specificity puts the tone back
   in front of it. */
[data-hs="2"] .hs-cf-portal__choice--enable.hs-btn,
[data-hs="2"] .hs-cf-portal__choice--enable.hs-btn:hover,
.hs-cf-portal__choice--enable,
.hs-cf-portal__choice--enable:hover {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
    linear-gradient(145deg, #3a6f58 0%, #4a8668 55%, #579575 100%);
  border-color: rgba(20, 50, 38, 0.14);
}

/* Turning forwarding off is the destructive choice in this menu — customers
   stop reaching Julia the moment it lands. The old dusty rose read as one more
   neutral option next to the green; this is the app's danger red. */
[data-hs="2"] .hs-cf-portal__choice--disable.hs-btn,
[data-hs="2"] .hs-cf-portal__choice--disable.hs-btn:hover,
.hs-cf-portal__choice--disable,
.hs-cf-portal__choice--disable:hover {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    linear-gradient(145deg, #8f2f2f 0%, #b03a3a 55%, #c04747 100%);
  border-color: rgba(80, 20, 20, 0.22);
}

[data-hs="2"] .hs-cf-portal__choice--test.hs-btn,
[data-hs="2"] .hs-cf-portal__choice--test.hs-btn:hover,
.hs-cf-portal__choice--test,
.hs-cf-portal__choice--test:hover {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
    linear-gradient(145deg, #3d6fa8 0%, #4f87be 55%, #5f96cb 100%);
  border-color: rgba(15, 40, 70, 0.14);
}

.hs-cf-portal__choice strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--ink, #0e1b11);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.hs-cf-portal__choice-sub,
.hs-cf-portal__choice > span:not(.hs-cf-portal__choice-icon):not(.hs-cf-portal__choice-copy) {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-2, #4a5c52);
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Tile text sits on a saturated fill, so it must be white — and these rules
   have to come AFTER the two above, not before them. They used to sit higher
   in the file at the same specificity, so `.hs-cf-portal__choice strong`
   overrode them and every menu tile printed near-black ink on mid-green,
   mid-red and mid-blue. */
.hs-cf-portal__choice--tile strong {
  color: #fff;
}

.hs-cf-portal__choice--tile .hs-cf-portal__choice-sub,
.hs-cf-portal__choice--tile > span:not(.hs-cf-portal__choice-icon):not(.hs-cf-portal__choice-copy) {
  color: rgba(255, 255, 255, 0.88);
}

[data-hs="2"] .hs-cf-portal__choice.hs-btn.is-selected,
.hs-cf-portal__choice.is-selected,
.hs-cf-portal__choice.hs-btn.is-selected {
  border-color: #2f6f57;
  background: #e8f4ee;
  box-shadow: inset 0 0 0 1px #2f6f57, 0 2px 8px rgba(47, 111, 87, 0.12);
}

.hs-cf-portal__progress {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__intro--wallet {
  margin-bottom: 0.85rem;
}

/* Cards in flow, tucked — not a transform stack.

   The old layout put every card in ONE grid cell and pushed the others out
   with translateY. Two things fell out of that, and both are why the walk was
   hard to move around in:

     - the strip showing under the open card was a card's BOTTOM edge, so an
       upcoming step read as a blank coloured bar. You could tap it, but
       nothing told you what you were tapping.
     - a finished card went `opacity: 0`, so once you passed a step it was gone
       and there was no way back to it short of the header's back button.

   In flow, each card is as tall as its own contents: collapsed cards show
   their full face — kicker and title — and the open one grows between them.
   Every step is readable and tappable at all times, in any order. The tuck
   (a negative margin, the same device Connectors uses) keeps the wallet
   feeling like a deck rather than a list. */
.hs-cf-portal__wallet {
  --wallet-tuck: 20px;
  --wallet-radius: 18px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 0 0.5rem;
}

.hs-cf-portal__wallet-card {
  /* Composed so the tone rules below can restyle the glow without clobbering
     the seam. Set box-shadow directly in a tone rule and consecutive cards of
     the SAME tone lose the only thing separating them — three blue steps in a
     row fuse into one long blue slab. */
  --wallet-lift: 0 10px 28px rgba(16, 36, 28, 0.12);
  --wallet-seam: 0 0 rgba(0, 0, 0, 0);
  --wallet-rim: rgba(255, 255, 255, 0.65);
  position: relative;
  border-radius: var(--wallet-radius);
  border: 1px solid rgba(16, 36, 28, 0.1);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    linear-gradient(180deg, #f4f7f5 0%, #eef3f0 100%);
  box-shadow: var(--wallet-seam), var(--wallet-lift), 0 1px 0 var(--wallet-rim) inset;
  transition:
    opacity 0.3s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
  /* Later cards paint over earlier ones, so the tuck reads as a deck stacked
     front-to-back. The open card wins outright — see .is-active below. */
  z-index: calc(10 + var(--z, 0));
  overflow: hidden;
}

/* Tuck the next card under this one, and give it a shadow cast upward so the
   overlap is visible even between two cards of the same colour. */
.hs-cf-portal__wallet-card + .hs-cf-portal__wallet-card {
  margin-top: calc(-1 * var(--wallet-tuck));
  padding-top: var(--wallet-tuck);
  --wallet-seam: 0 -6px 16px rgba(16, 36, 28, 0.22);
}

/* The tuck is dead space for the next card to sit on, so a card only reserves
   it when a card actually follows — otherwise the last card in the wallet
   carries a stray 20px of padding under its content. */
.hs-cf-portal__wallet-card:has(+ .hs-cf-portal__wallet-card) {
  padding-bottom: var(--wallet-tuck);
}

.hs-cf-portal__wallet-card--conditional {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.38) 0%, transparent 42%),
    linear-gradient(145deg, #3d6fa8 0%, #4f87be 55%, #5f96cb 100%);
  border-color: rgba(15, 40, 70, 0.14);
  color: #fff;
  --wallet-lift: 0 12px 28px rgba(31, 79, 140, 0.18);
  --wallet-rim: rgba(255, 255, 255, 0.28);
}

.hs-cf-portal__wallet-card--enable {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.36) 0%, transparent 42%),
    linear-gradient(145deg, #3a6f58 0%, #4a8668 55%, #579575 100%);
  border-color: rgba(20, 50, 38, 0.14);
  color: #fff;
  --wallet-lift: 0 12px 28px rgba(31, 79, 58, 0.16);
  --wallet-rim: rgba(255, 255, 255, 0.26);
}

/* Matches the Disable tile on the menu — one red for the whole off path. */
.hs-cf-portal__wallet-card--danger {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
    linear-gradient(145deg, #8f2f2f 0%, #b03a3a 55%, #c04747 100%);
  border-color: rgba(80, 20, 20, 0.22);
  color: #fff;
  --wallet-lift: 0 12px 28px rgba(140, 40, 40, 0.2);
  --wallet-rim: rgba(255, 255, 255, 0.24);
}

.hs-cf-portal__wallet-card.is-active {
  z-index: 60;
  --wallet-lift: 0 16px 34px rgba(16, 36, 28, 0.22);
}

/* Finished, not gone. A done card stays readable and stays clickable — it just
   steps back so the open one is obviously the live card. */
.hs-cf-portal__wallet-card.is-done:not(.is-active) {
  filter: saturate(0.5);
  opacity: 0.85;
}

.hs-cf-portal__wallet-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 4.4rem;
  padding: 0.95rem 1.1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.hs-cf-portal__wallet-face-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.hs-cf-portal__wallet-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.hs-cf-portal__wallet-title {
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.hs-cf-portal__wallet-chevron {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hs-cf-portal__wallet-card.is-active .hs-cf-portal__wallet-chevron {
  transform: rotate(225deg);
  opacity: 0.8;
}

.hs-cf-portal__wallet-body {
  padding: 0 1.1rem 1.1rem;
  animation: hs-cf-wallet-body-in 0.28s ease;
}

.hs-cf-portal__wallet-body[hidden] {
  display: none !important;
}

.hs-cf-portal__wallet-blurb {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.9;
}

.hs-cf-portal__wallet-card--conditional .hs-cf-portal__action-label,
.hs-cf-portal__wallet-card--enable .hs-cf-portal__action-label,
.hs-cf-portal__wallet-card--danger .hs-cf-portal__action-label {
  color: rgba(255, 255, 255, 0.78);
}

.hs-cf-portal__wallet-card--conditional .hs-cf-portal__dial,
.hs-cf-portal__wallet-card--enable .hs-cf-portal__dial,
.hs-cf-portal__wallet-card--danger .hs-cf-portal__dial {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.hs-cf-portal__wallet-card--conditional .hs-cf-portal__dial:hover,
.hs-cf-portal__wallet-card--conditional .hs-cf-portal__dial:focus-visible,
.hs-cf-portal__wallet-card--enable .hs-cf-portal__dial:hover,
.hs-cf-portal__wallet-card--enable .hs-cf-portal__dial:focus-visible,
.hs-cf-portal__wallet-card--danger .hs-cf-portal__dial:hover,
.hs-cf-portal__wallet-card--danger .hs-cf-portal__dial:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.hs-cf-portal__wallet-card--conditional .hs-cf-portal__call,
.hs-cf-portal__wallet-card--enable .hs-cf-portal__call,
.hs-cf-portal__wallet-card--danger .hs-cf-portal__call {
  background: #fff;
  color: #1f4f8c;
  border-color: #fff;
}

.hs-cf-portal__wallet-card--enable .hs-cf-portal__call {
  color: #1f4d3a;
}

.hs-cf-portal__wallet-card--danger .hs-cf-portal__call {
  color: #8b2e2e;
}

@keyframes hs-cf-wallet-body-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hs-cf-portal__footer--walk {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--cf-rim, #c7d9ee);
}

.hs-cf-portal__footer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* `.hs-btn` sets a display, and an author display beats the UA's
   `[hidden] { display: none }` — so `skip.hidden = true` left the button on
   screen. This is what makes the attribute mean what it says. */
.hs-cf-portal__footer-actions .hs-btn[hidden] {
  display: none !important;
}

.hs-cf-portal__toolbar {
  margin: 0 0 0.75rem;
}

.hs-cf-portal__section {
  margin: 0 0 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hair, #e7edea);
}

.hs-cf-portal__section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.hs-cf-portal__section-title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__action {
  margin: 0 0 0.65rem;
}

.hs-cf-portal__action-label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2, #4a5c52);
}

.hs-cf-portal__action-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  /* A dial code is monospace and nowrap, so the field's min-content width is the
     whole code and it will not shrink. A conditional code carries the ring
     delay — `**61*14155550142**10#` — which needs 241px of a 306px row, leaving
     65px for an 80px Call button: the button overflowed the card and the card's
     `overflow: hidden` sliced it. Wrapping keeps the code readable in full and
     drops Call to its own line only when it genuinely does not fit; short *72
     codes still sit beside it. */
  flex-wrap: wrap;
}

.hs-cf-portal__dial {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1px solid #c9d6cf;
  background: #f7faf8;
  color: var(--ink, #0e1b11);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.hs-cf-portal__dial:hover,
.hs-cf-portal__dial:focus-visible {
  border-color: #8aa396;
  background: #eef4f0;
}

.hs-cf-portal__dial--enable {
  border-color: #9bb8a8;
  background: #eef6f1;
  color: #1f4d3a;
}

.hs-cf-portal__dial--conditional {
  border-color: #8eb0d4;
  background: #eef5fc;
  color: #1a4a75;
}

.hs-cf-portal__dial--conditional:hover,
.hs-cf-portal__dial--conditional:focus-visible {
  border-color: #5b8fc4;
  background: #e0eef9;
}

.hs-cf-portal__dial--check {
  border-color: #c9d0d6;
  background: #f5f7f9;
  color: #334155;
}

.hs-cf-portal__dial--danger {
  border-color: #e0a3a3;
  background: #fdf1f1;
  color: #9b1c1c;
}

.hs-cf-portal__dial--danger:hover,
.hs-cf-portal__dial--danger:focus-visible {
  border-color: #c96b6b;
  background: #fbe4e4;
}

.hs-cf-portal__call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 4.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--hair, #e7edea);
  background: #fff;
  color: var(--ink-2, #4a5c52);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.hs-cf-portal__call:hover,
.hs-cf-portal__call:focus-visible {
  background: #f7f9f7;
  color: var(--ink, #0e1b11);
  border-color: #8aa396;
}

.hs-cf-portal__call svg {
  display: block;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  body.hs-cf-portal-open {
    overflow: hidden;
  }

  body.hs-cf-portal-open .hs-portal-footer-nav {
    visibility: hidden;
    pointer-events: none;
  }

  /* Keep Handshake mobile header visible above the CF sheet */
  body.hs-cf-portal-open .ws-mobile-topbar {
    z-index: 1400;
  }

  .hs-cf-portal-backdrop,
  .hs-cf-portal {
    top: calc(
      var(--ws-browser-chrome-top, 0px) +
        var(--ws-mobile-topbar-h, calc(52px + env(safe-area-inset-top, 0px)))
    );
  }

  .hs-cf-portal {
    padding: 0;
    align-items: stretch;
  }

  .hs-cf-portal__card {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .hs-cf-portal__header {
    padding: 0.95rem 1rem 0.9rem;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .hs-cf-portal__title {
    font-size: 1.45rem;
  }

  .hs-cf-portal__close {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.55rem;
  }

  .hs-cf-portal__body {
    padding: 1rem 1rem max(1.5rem, env(safe-area-inset-bottom));
    /* The card is `height: 100%` here, but the body was still flex-basis auto —
       it stopped at its content, so a short step left a few hundred px of blank
       white under it and the sticky footer parked in the MIDDLE of a full-screen
       sheet, right where the step card ended. Fill the card and scroll inside
       it; min-height:0 is what lets a flex child actually be smaller than its
       content so `overflow: auto` has something to do. Column flex so the walk
       footer can claim the leftover height with `margin-top: auto`. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Nothing in a step gets compressed to make it fit — a taller step scrolls.
     Without this the column would shrink the wallet and the choice list before
     `overflow: auto` ever got a chance. */
  .hs-cf-portal__body > * {
    flex: none;
  }

  .hs-cf-portal__intro {
    font-size: 0.98rem;
  }

  .hs-cf-portal__choice.hs-btn,
  button.hs-cf-portal__choice {
    min-height: 3.6rem;
    padding: 1.05rem 1.15rem;
  }

  .hs-cf-portal__choice--tile.hs-btn,
  button.hs-cf-portal__choice--tile {
    min-height: 5.5rem;
    padding: 1.1rem 1.15rem;
  }

  .hs-cf-portal__choice--decisive.hs-btn,
  button.hs-cf-portal__choice--decisive {
    min-height: 4.4rem;
    padding: 1.05rem 1.15rem;
  }

  .hs-cf-portal__choice--carrier .hs-cf-portal__choice-icon {
    width: 3.75rem;
    height: 2.1rem;
  }

  .hs-cf-portal__choice strong {
    font-size: 1.08rem;
  }

  .hs-cf-portal__footer--walk {
    position: sticky;
    bottom: 0;
    /* `margin-top: auto`, not 0.75rem. Sticky can only pull an element UP into
       view — on a step whose content is shorter than the sheet it does nothing,
       so the action bar sat wherever the content happened to end, halfway up a
       full-screen sheet with a field of white under it. Auto sends it to the
       floor when there is slack and collapses to 0 when the step scrolls, which
       is the bar this rule was already dressing: safe-area padding, a hairline
       and a fade over the content passing beneath it. */
    margin: auto -1rem 0;
    padding: 0.85rem 1rem max(0.85rem, env(safe-area-inset-bottom));
    /* The fade has to end on the wash, not on white — the body is tinted now,
       so a white bar under the cards read as a separate sheet. */
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      var(--cf-wash-bot, #ddeaf9) 35%
    );
    border-top: 1px solid var(--cf-rim, #c7d9ee);
  }

  .hs-cf-portal__footer-actions {
    width: auto;
  }

  .hs-cf-portal__footer-actions .hs-btn {
    min-height: 2.75rem;
  }

  .hs-cf-portal__dial {
    min-height: 3.1rem;
    font-size: 1.02rem;
  }

  .hs-cf-portal__call {
    min-width: 5rem;
    min-height: 3.1rem;
  }

  /* No min-height any more — the wallet is in flow, so it is exactly as tall as
     the cards it holds. The old formula reserved room for peek strips that a
     transform stack contributed nothing to. */
  .hs-cf-portal__wallet {
    --wallet-tuck: 16px;
  }

  .hs-cf-portal__wallet-title {
    font-size: 1.18rem;
  }
}

#ws-panel-agent-phone .hs-phone-tools-section {
  margin-top: var(--hs-space-4);
}

#vl-editor-panel #ws-panel-agent-phone .hs-phone-tools-section {
  margin-top: 0;
}

#ws-panel-agent-phone .hs-recognized-callers-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1rem;
  font-size: 0.9rem;
}

#ws-panel-agent-phone .hs-recognized-callers-table th,
#ws-panel-agent-phone .hs-recognized-callers-table td {
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--accent-tint-border, #d4ebe4);
  vertical-align: top;
}

#ws-panel-agent-phone .hs-recognized-callers-table th {
  font-weight: 600;
  color: var(--hs-text-muted, #66756d);
  font-size: 0.8rem;
}

#ws-panel-agent-phone .hs-recognized-caller-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--accent-tint-border, #d4ebe4);
  display: grid;
  gap: 0.5rem;
  max-width: 32rem;
}

#ws-panel-agent-phone .hs-recognized-caller-form__title {
  margin: 0;
  font-size: 0.95rem;
}

#ws-panel-agent-phone .hs-recognized-caller-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.65rem;
}

#ws-panel-agent-phone .hs-recognized-caller-form__row .hs-phone-skill-field {
  margin: 0;
  min-width: 0;
}

#ws-panel-agent-phone .hs-recognized-caller-form__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#ws-panel-agent-phone .hs-recognized-callers-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

#ws-panel-agent-phone .hs-recognized-callers-actions .hs-cn-icbtn {
  display: inline-grid;
  vertical-align: middle;
  margin-left: 2px;
}

@media (max-width: 560px) {
  #ws-panel-agent-phone .hs-recognized-caller-form__row {
    grid-template-columns: 1fr;
  }
}

#ws-panel-agent-phone .hs-rc-phone-hint.is-ok {
  color: var(--hs-muted, #5c6670);
}

#ws-panel-agent-phone .hs-rc-phone-hint.is-err {
  color: #b4234e;
}

#ws-panel-agent-phone .hs-pronunciations-wrap {
  margin-bottom: 1rem;
}

#ws-panel-agent-phone .hs-pronunciations-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

#ws-panel-agent-phone .hs-pronunciations-table th,
#ws-panel-agent-phone .hs-pronunciations-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--accent-tint-border, #d4ebe4);
  text-align: left;
  vertical-align: middle;
}

#ws-panel-agent-phone .hs-pronunciations-table th {
  color: var(--hs-text-muted, #66756d);
  font-weight: 600;
  font-size: 0.78rem;
}

#ws-panel-agent-phone .hs-pronunciations-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

#ws-panel-agent-phone .hs-pronunciation-add {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--accent-tint-border, #d4ebe4);
  display: grid;
  gap: 0.65rem;
}

#ws-panel-agent-phone .hs-pronunciation-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
}

#ws-panel-agent-phone .hs-pronunciation-row__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hs-text-muted, #66756d);
  white-space: nowrap;
}

#ws-panel-agent-phone .hs-pronunciation-row__word {
  flex: 1 1 7rem;
  min-width: 6rem;
  max-width: 11rem;
}

#ws-panel-agent-phone .hs-pronunciation-row__speak {
  flex: 2 1 9rem;
  min-width: 7rem;
}

#ws-panel-agent-phone .hs-pronunciation-suggestions {
  display: grid;
  gap: 0.45rem;
}

#ws-panel-agent-phone .hs-pronunciation-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--accent-tint-border, #d4ebe4);
  border-radius: 10px;
  background: var(--hs-surface-raised, #fff);
}

#ws-panel-agent-phone .hs-pronunciation-suggestion__pick {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

#ws-panel-agent-phone .hs-pronunciation-suggestion__pick:hover {
  color: var(--hs-neutral-800, #1a2e24);
}

#ws-panel-agent-phone .hs-pronunciation-suggestion__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

#ws-panel-agent-phone .hs-pronunciation-preview.is-loading {
  opacity: 0.85;
  pointer-events: none;
}

#ws-panel-agent-phone .hs-pronunciation-preview.is-playing {
  background: var(--hs-neutral-800, #1a2e24);
  color: #fff;
}

#ws-panel-agent-phone .hs-pronunciation-preview__spin {
  animation: hs-pronunciation-spin 0.7s linear infinite;
}

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

#ws-panel-agent-phone .hs-recognized-calls-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

#ws-panel-agent-phone .hs-ptool-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

#ws-panel-agent-phone .hs-phone-core-tools-list,
#ws-panel-agent-phone #hs-phone-skills-mount {
  display: contents;
}

#ws-panel-agent-phone .hs-ptool__phead {
  margin-bottom: 0;
}

#ws-panel-agent-phone .hs-ptool__phead h3 {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--neutral-800, var(--ink, #111));
}

#ws-panel-agent-phone .hs-ptool__phead .sub {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-500, var(--ink-2, #4a5c52));
  max-width: none;
  line-height: 1.45;
}

/* Separated cards — match chatbot Appearance / Enable */
#ws-panel-agent-phone .hs-ptool {
  overflow: hidden;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 16px;
  background: var(--panel, #fff);
  box-shadow: none;
  transition: background 0.12s ease;
}

#ws-panel-agent-phone .hs-ptool.is-open {
  background: var(--panel, #fff);
}

#ws-panel-agent-phone .hs-sms-link-count-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3ef;
  color: #2f5d45;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  width: fit-content;
}

#ws-panel-agent-phone .hs-ptool__head {
  display: flex;
  align-items: stretch;
  gap: 0;
}

#ws-panel-agent-phone .hs-ptool__head .hs-ptool__row.is-btn {
  flex: 1 1 auto;
  min-width: 0;
}

#ws-panel-agent-phone .hs-ptool__head .hs-ptool__state {
  align-self: center;
  padding-right: 0;
}

#ws-panel-agent-phone .hs-ptool__head .hs-ptool__chev--expand {
  flex: none;
  display: grid;
  place-items: center;
  align-self: center;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--neutral-400, #9ca89e);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.12s ease;
}

#ws-panel-agent-phone .hs-ptool__head .hs-ptool__chev--expand svg {
  width: 16px;
  height: 16px;
}

#ws-panel-agent-phone .hs-ptool__head .hs-ptool__chev--expand:hover {
  color: var(--neutral-600, #66756d);
}

#ws-panel-agent-phone .hs-ptool.is-open .hs-ptool__chev--expand {
  transform: rotate(180deg);
}

#ws-panel-agent-phone .hs-ptool__row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

#ws-panel-agent-phone .hs-ptool__row.is-btn {
  cursor: pointer;
}

#ws-panel-agent-phone .hs-ptool__row.is-btn:hover {
  background: #fafbf8;
}

#ws-panel-agent-phone .hs-ptool__tile {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

#ws-panel-agent-phone .hs-ptool__tile svg {
  width: 16px;
  height: 16px;
}

#ws-panel-agent-phone .hs-ptool__tile--greeting {
  background: #e6fbf1;
  color: #0d7a4e;
}

#ws-panel-agent-phone .hs-ptool__tile--voice {
  background: #f0e8fb;
  color: #6b3fa0;
}

#ws-panel-agent-phone .hs-ptool__tile--settings {
  background: #eef2f7;
  color: #3d4f63;
}

#ws-panel-agent-phone .hs-ptool__tile--focus {
  background: #e8f0fb;
  color: #1a5f8a;
}

#ws-panel-agent-phone .hs-ptool__tile--web {
  background: #e8f2fc;
  color: #2563b0;
}

#ws-panel-agent-phone .hs-ptool__tile--record {
  background: #fbe8ec;
  color: #b4234e;
}

#ws-panel-agent-phone .hs-ptool__tile--owner {
  background: #e8f5ef;
  color: #157a4a;
}

#ws-panel-agent-phone .hs-ptool__tile--transfer {
  background: #eaf7f0;
  color: var(--everglade-700, #0b7a47);
}

#ws-panel-agent-phone .hs-ptool__tile--sms {
  background: #e8eefc;
  color: #3558c7;
}

#ws-panel-agent-phone .hs-ptool__tile--multilingual {
  background: #ede8fb;
  color: #5b3fa8;
}

#ws-panel-agent-phone .hs-ptool__tile--time {
  background: #fdf3e6;
  color: #b86e00;
}

#ws-panel-agent-phone .hs-ptool__tile--caller {
  background: #e8f4fc;
  color: #1a6f8a;
}

#ws-panel-agent-phone .hs-ptool__tile--pronunciation {
  background: #f5eef8;
  color: #7a4a9a;
}

#ws-panel-agent-phone .hs-ptool__tile--scenarios {
  background: #fff4e8;
  color: #c2410c;
}

#ws-panel-agent-phone .hs-ptool__tile--rules {
  background: #eef2ff;
  color: #4338ca;
}

#ws-panel-agent-phone .hs-ptool--link .hs-ptool__chev--link {
  transform: none;
}

#ws-panel-agent-phone .hs-ptool--link .hs-ptool__row.is-btn:hover .hs-ptool__chev--link {
  color: var(--accent-2, #0d7a4e);
}

#ws-panel-agent-phone .hs-ptool__tile--default {
  background: var(--accent-tint, #e6fbf1);
  color: var(--accent-2, #0d7a4e);
}

#ws-panel-agent-phone .hs-ptool__txt {
  flex: 1;
  min-width: 0;
}

#ws-panel-agent-phone .hs-ptool__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutral-800, var(--ink, #111));
}

#ws-panel-agent-phone .hs-ptool__sub {
  display: block;
  font-size: 12.5px;
  color: var(--neutral-500, var(--ink-2, #4a5c52));
  margin-top: 1px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: none;
}

#ws-panel-agent-phone .hs-ptool__sub.is-off {
  color: var(--ink-3, #7a8a82);
}

#ws-panel-agent-phone .hs-ptool__chev {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--neutral-400, #9ca89e);
  font-size: 13px;
  line-height: 1;
  transition: transform 0.2s ease, color 0.12s ease;
}

#ws-panel-agent-phone .hs-ptool__chev svg {
  width: 16px;
  height: 16px;
}

#ws-panel-agent-phone .hs-ptool__row.is-btn:hover .hs-ptool__chev {
  background: transparent;
  color: var(--neutral-600, #66756d);
}

#ws-panel-agent-phone .hs-ptool.is-open .hs-ptool__chev {
  transform: rotate(180deg);
}

#ws-panel-agent-phone .hs-ptool__state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3, 12px);
}

/* The fold moves on the same number as the card it lives in — the deck's tuck
   and the card below it are on --hs-duration-wallet in hs-bridge-components.css,
   and a fold on its own timing tears the card in half mid-open. The fallback is
   the pre-token value, for any page that loads poc5 without the DS tokens. */
#ws-panel-agent-phone .hs-ptool--collapsible .hs-ptool__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hs-duration-wallet, 0.22s) var(--hs-ease-spring, ease);
}

#ws-panel-agent-phone .hs-ptool--collapsible.is-open .hs-ptool__body {
  grid-template-rows: 1fr;
}

#ws-panel-agent-phone .hs-ptool__body > div {
  overflow: hidden;
}

#ws-panel-agent-phone .hs-ptool__body-in {
  padding: 8px 14px 16px;
  border-top: 1px solid #f1f2ed;
  margin-top: 0;
}

#ws-panel-agent-phone .hs-agent-switch__track {
  width: 38px;
  height: 22px;
  box-sizing: border-box;
}

#ws-panel-agent-phone .hs-agent-switch__thumb {
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#ws-panel-agent-phone .hs-agent-switch.is-on .hs-agent-switch__thumb {
  transform: translateY(-50%) translateX(16px);
}

#ws-panel-agent-phone .hs-agent-switch__label {
  font-size: 12.5px;
  font-weight: 600;
  min-width: 22px;
  width: 22px;
}

#ws-panel-agent-phone .hs-ptool__body-in > .hs-ptool__blab {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-3, #7a8a82);
  text-transform: uppercase;
  margin: var(--sp-5, 20px) 0 var(--sp-3, 12px);
}

#ws-panel-agent-phone .hs-ptool__body-in > .hs-ptool__blab:first-child {
  margin-top: var(--sp-4, 16px);
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-skill-config,
#ws-panel-agent-phone .hs-ptool__body-in .hs-call-transfer-setup,
#ws-panel-agent-phone .hs-ptool__body-in .hs-time-windows-setup {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-greeting-field textarea,
#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-skill-field textarea.hs-input,
#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-skill-field input.hs-input,
#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-male-name-wrap input.hs-input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  resize: vertical;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink, #0e1b11);
  background: #fff;
  border: 1px solid var(--hair-2, #d5dbd4);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-greeting-field textarea,
#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-skill-field textarea.hs-input {
  min-height: 110px;
  padding-top: 12px;
  padding-bottom: 12px;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-greeting-field textarea:focus,
#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-skill-field textarea.hs-input:focus,
#ws-panel-agent-phone .hs-ptool__body-in .hs-phone-skill-field input.hs-input:focus,
#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-male-name-wrap input.hs-input:focus {
  outline: none;
  border-color: var(--hs-aqua, #43e5a4);
  box-shadow: 0 0 0 3px rgba(67, 229, 164, 0.2);
  background: #fff;
}

#ws-panel-agent-phone .hs-phone-greeting-field .hs-btn {
  display: none;
}

/* Shared portal content canvas — titles, notif/filter icons, and body width
   stay aligned when switching Conversations ↔ Agents ↔ Tasks ↔ Account.
   Keep the canvas pinned to the rail-side gutter on wide screens; centering
   made every page drift away from the navigation as the viewport grew. */
.hs-conv-page,
.hs-tasks-page,
#ws-panel-billing > .hs-portal-section,
#ws-panel-integrations > .hs-portal-section,
#ws-panel-scheduled-tasks > .hs-portal-section,
#ws-panel-notifications > .hs-portal-section,
#ws-panel-refer > .hs-portal-section,
#ws-panel-training > .hs-portal-section,
#ws-panel-agents > .hs-portal-section,
#ws-panel-ai-timeline > .hs-portal-section,
#ws-panel-profile > .hs-portal-section {
  width: min(100%, var(--hs-portal-content-max, 1080px));
  margin-left: 0;
  margin-right: auto;
  box-sizing: border-box;
}

#ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action {
  align-items: center;
}

#ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action .hs-alert__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--hs-space-4, 16px);
  row-gap: var(--hs-space-1, 4px);
  width: 100%;
}

#ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action .hs-alert__title,
#ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action .hs-alert__body {
  grid-column: 1;
}

#ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action .hs-alert__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Stacked layout is taller than the icon, and `align-items: center` left the
     triangle floating mid-card while the text read top-down (2026-08 audit,
     UI-020). Top-align so the icon sits with the first text line. */
  #ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action {
    align-items: flex-start;
  }

  #ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action .hs-alert__content {
    grid-template-columns: minmax(0, 1fr);
  }

  #ws-panel-agent-phone .hs-phone-page-content > .hs-alert--aside-action .hs-alert__actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* Agent panes inherit the section measure — don't re-center inside it. */
#ws-panel-agent-chatbot .hs-agent-pane,
#ws-panel-agent-sms .hs-agent-pane,
#ws-panel-agent-phone .hs-agent-pane,
#ws-panel-agent-social .hs-agent-pane,
#ws-panel-agent-email .hs-agent-pane,
#ws-panel-agent-persona .hs-persona-page-content,
#ws-panel-agent-chatbot .hs-chatbot-page-content,
#ws-panel-agent-sms .hs-sms-page-content,
#ws-panel-agent-phone .hs-phone-page-content,
#ws-panel-agent-social .hs-social-page-content {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Agent titles — same page-header pattern as Tasks / Conversations */
.hs-agent-page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  margin: 0 0 16px;
  padding: 16px 0;
  border-bottom: none;
  background: transparent;
}

.hs-agent-page-head .hs-portal-section__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  min-width: 0;
  min-height: 44px;
}

.hs-agent-page-head .hs-portal-section__title {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0;
  text-align: left;
}

.hs-agent-page-head .sub,
.hs-agent-page-head__sub {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--ink-2, var(--hs-neutral-600));
  line-height: 1.4;
}

@media (max-width: 899px) {
  /* Outer agents shell owns the sticky title + notifications on mobile.
     Keep the in-pane agent head off so its glass doesn't cover the title. */
  .hs-agent-page-head,
  .hs-agent-page-head--with-notif {
    display: none !important;
  }
}

#ws-panel-agent-phone .hs-phone-page-content .hs-portal-panel-card,
#ws-panel-agent-sms .hs-sms-page-content .hs-portal-panel-card:not(#ws-sms-agent-settings-panel),
#ws-panel-agent-sms .hs-a2p-section,
#ws-panel-agent-persona .hs-persona-page-content .hs-portal-panel-card,
#ws-panel-agent-persona .hs-agent-persona-card,
#ws-panel-agent-email .hs-portal-panel-card:not(.hs-email-disabled-card),
#ws-panel-agent-social .hs-social-page-content .hs-portal-panel-card,
#ws-panel-agent-social .hs-social-channels-section,
#ws-panel-agent-social .hs-social-preview-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* SMS Customize — keep a white surface card like chatbot Appearance */
#ws-panel-agent-sms #ws-sms-agent-settings-panel.hs-portal-panel-card,
#ws-panel-agent-sms #ws-sms-agent-settings-panel.hs-chatbot-settings-collapse {
  background: var(--panel, #fff);
  border: 1px solid var(--hair, #e7edea);
  border-radius: 16px;
  box-shadow: none;
  padding: 0.85rem 1rem;
}

#ws-panel-agent-sms .hs-chatbot-direct-preview__head {
  display: block;
  max-width: 580px;
  margin: 0 auto 18px;
  text-align: center;
}

#ws-panel-agent-sms .hs-chatbot-direct-preview__head h2 {
  margin: 0;
  color: var(--ink, #17241c);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
}

#ws-panel-agent-sms .hs-sms-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: var(--panel, #fff);
}

#ws-panel-agent-sms .hs-sms-status-card__copy {
  min-width: 0;
  flex: 1 1 auto;
}

#ws-panel-agent-sms .hs-sms-status-card__label {
  margin: 0;
  color: var(--ink, #17241c);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.35;
}

#ws-panel-agent-sms .hs-sms-status-card__number {
  margin: 4px 0 0;
  color: var(--ink, #0e1b11);
  font-family: var(--font-display, 'PT Serif', Georgia, serif);
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

#ws-panel-agent-sms .hs-sms-status-card__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

#ws-panel-agent-sms .hs-sms-status-card--live {
  border-color: rgba(22, 163, 74, 0.28);
  background: rgba(22, 163, 74, 0.06);
}

#ws-panel-agent-sms .hs-sms-status-card--live .hs-sms-status-card__label {
  color: #166534;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

#ws-panel-agent-sms #ws-sms-agent-settings-panel {
  margin-top: 22px;
}

#ws-panel-agent-sms #ws-sms-agent-settings-panel .hs-chatbot-editor__head h3 {
  margin: 0;
  color: var(--ink, #17241c);
  font-size: 1rem;
  font-weight: 700;
}

#ws-panel-agent-sms #ws-sms-agent-settings-panel .hs-chatbot-editor__head .sub {
  margin: 4px 0 0;
  font-size: 0.8rem;
}

#ws-panel-agent-sms .hs-sms-preview-stage,
#ws-panel-agent-phone .hs-phone-preview-stage {
  width: 100%;
  padding: 36px 20px 48px;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: none;
}

#ws-panel-agent-sms .hs-sms-preview-stage {
  background-color: #cfe8dc;
  background-image: url('/assets/sms-preview-backdrop.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Phone stage — a band of the hero backdrop, sized to the collapsed call card
   it carries. The full call card lives in the modal now, so this no longer has
   a 460px widget to make room for. */
#ws-panel-agent-phone .hs-phone-preview-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: 26px 20px;
  background-color: #c9d8ef;
  background-image: url('/assets/phone-preview-backdrop.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Collapsed call card — the lander's live card at rest: same shell, same
   avatar ring, everything the call itself owns left to the modal. */
.hs-phone-preview-card {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 13px 14px 13px 16px;
  border: 1px solid #1c2c24;
  border-radius: 20px;
  background: var(--hs-everglade-900, #0e1b11);
  color: #f9faf2;
  box-shadow: 0 18px 44px rgba(8, 15, 52, 0.22);
}

.hs-phone-preview-card__ring {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #16261c;
  border: 2px solid rgba(67, 229, 164, 0.4);
}

.hs-phone-preview-card__ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.hs-phone-preview-card__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.hs-phone-preview-card__copy b {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.hs-phone-preview-card__copy span {
  color: #9fb3a9;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.hs-phone-preview-card__call {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--hs-aqua, #43e5a4);
  color: var(--hs-everglade-900, #0e1b11);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(67, 229, 164, 0.24);
  transition: filter 0.18s ease, transform 0.12s ease;
}

.hs-phone-preview-card__call:hover {
  filter: brightness(0.96);
}

.hs-phone-preview-card__call:active {
  transform: scale(0.98);
}

.hs-phone-preview-card__call:focus-visible {
  outline: 2px solid #f9faf2;
  outline-offset: 2px;
}

/* Narrow phones: buy the subtitle enough room to stay on one line. */
@media (max-width: 420px) {
  .hs-phone-preview-card {
    gap: 12px;
    padding: 12px;
  }

  .hs-phone-preview-card__copy span {
    font-size: 0.78rem;
  }

  .hs-phone-preview-card__call {
    padding: 0 15px;
  }
}

#ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-preview-wrap {
  width: min(100%, 420px);
  margin: 0 auto;
  min-width: 0;
  min-height: 480px;
  background: transparent;
  border: 0;
  border-radius: 20px;
  overflow: visible;
  box-shadow:
    0 18px 50px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
}


#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-dock--inline,
#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-dock__shadow-room {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-dock--inline .julia-chat-panel {
  width: 100%;
  height: 480px;
  min-height: 480px;
  max-height: 480px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-panel__head {
  background: var(--hs-aqua, #43e5a4);
  border-bottom-color: rgba(14, 27, 17, 0.1);
}

.hs-dismiss-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #f1dfb9;
  border-radius: 12px;
  background: #fff9eb;
  color: #80520c;
  box-shadow: 0 1px 2px rgba(128, 82, 12, 0.06);
}

.hs-dismiss-notice__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.hs-dismiss-notice__title {
  display: block;
  margin: 0 0 2px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
  color: #6b440a;
}

.hs-dismiss-notice__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #80520c;
}

.hs-dismiss-notice__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #80520c;
  cursor: pointer;
}

.hs-dismiss-notice__close:hover,
.hs-dismiss-notice__close:focus-visible {
  background: rgba(128, 82, 12, 0.1);
  outline: none;
}

.hs-dismiss-notice__close svg {
  width: 14px;
  height: 14px;
  display: block;
}

#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-panel__thread-wrap,
#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-panel__thread {
  background: #fff;
}

#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-panel__foot {
  background: #fff;
  border-top-color: #e7edea;
}

#ws-panel-agent-sms .hs-chatbot-preview-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

#ws-panel-agent-phone .hs-phone-direct-preview {
  margin: 0 0 8px;
}

.hs-phone-voice-mount-home[hidden] {
  display: none !important;
}

@keyframes hs-phone-card-expand-in {
  from {
    transform: scale(0.96);
    opacity: 0.92;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Call modal — one shell for both breakpoints. Centred over a scrim on the
   web, edge to edge over the hero backdrop on a phone. */
#ws-voice-call-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 32px 20px;
}

#ws-voice-call-shell[hidden] {
  display: none !important;
}

#ws-voice-call-shell .ws-voice-shell__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 15, 12, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hs-voice-shell-fade 0.24s ease;
}

@keyframes hs-voice-shell-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#ws-voice-call-shell .ws-voice-shell__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
}

#ws-voice-call-shell .ws-voice-shell__close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid rgba(249, 250, 242, 0.22);
  border-radius: 50%;
  background: rgba(249, 250, 242, 0.12);
  color: #f9faf2;
  cursor: pointer;
}

#ws-voice-call-shell .ws-voice-shell__close:hover {
  background: rgba(249, 250, 242, 0.22);
}

#ws-voice-call-shell .ws-voice-shell__close:focus-visible {
  outline: 2px solid var(--hs-aqua, #43e5a4);
  outline-offset: 2px;
}

#ws-voice-call-shell #hs-voice-call-mount {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

#ws-voice-call-shell #hs-voice-call-mount .hs-callcard {
  width: 100%;
  min-height: min(66dvh, 540px);
  animation: hs-phone-card-expand-in 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

#ws-voice-call-shell #hs-voice-call-mount .hs-callcard .call-tx {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
  margin-top: 6px;
  margin-bottom: 8px;
  padding-bottom: 14px;
  opacity: 1;
  overflow-y: auto;
}

body.hs-ws-voice-modal-open,
html.hs-ws-voice-modal-open {
  overflow: hidden;
}

/* Phone: the modal becomes the screen, over the same backdrop the page uses. */
@media (max-width: 899px) {
  #ws-voice-call-shell {
    align-items: stretch;
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      16px
      max(16px, env(safe-area-inset-bottom, 0px))
      16px;
    background-color: #c9d8ef;
    background-image: url('/assets/phone-preview-backdrop.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #ws-voice-call-shell .ws-voice-shell__scrim {
    display: none;
  }

  #ws-voice-call-shell .ws-voice-shell__panel {
    max-width: 440px;
    margin: auto;
  }

  #ws-voice-call-shell .ws-voice-shell__close {
    border-color: rgba(14, 27, 17, 0.14);
    background: rgba(255, 255, 255, 0.86);
    color: #17241c;
  }

  #ws-voice-call-shell #hs-voice-call-mount .hs-callcard {
    min-height: min(72dvh, 560px);
  }

  body.hs-ws-voice-modal-open .hs-portal-footer-nav,
  body.hs-ws-voice-modal-open .ws-mobile-topbar {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  #ws-panel-agent-chatbot .hs-chatbot-page-content,
  #ws-panel-agent-sms .hs-sms-page-content {
    width: 100%;
    max-width: 100%;
  }

  /* Phone mobile — the collapsed card sits in the stage; colour band handled
     in the 899px block. */
  #ws-panel-agent-phone .hs-phone-preview-stage .hs-phone-preview-card {
    width: calc(100% - 32px);
    max-width: none;
    margin: 0 16px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-direct-preview__head,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-direct-preview__head {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    max-width: none;
    margin: 0;
    padding: 16px 16px 12px;
    pointer-events: auto;
    text-align: left;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-direct-preview__head h2,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-direct-preview__head h2 {
    color: #0a0a0a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-wrap,
  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-actions,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-preview-wrap,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-preview-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Fixed preview size — do not grow with mobile browser chrome / dvh */
  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-wrap,
  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage {
    min-height: 352px;
    height: 352px;
    max-height: 352px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage .julia-chat-panel {
    width: min(420px, calc(100% - 16px));
    height: 352px;
    min-height: 352px;
    max-height: 352px;
  }

  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-preview-wrap,
  #ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-dock--inline .julia-chat-panel {
    min-height: 352px;
    height: 352px;
    max-height: 352px;
  }

  #ws-panel-agent-sms #ws-sms-agent-settings-panel,
  #ws-panel-agent-chatbot .hs-chatbot-tools {
    padding-left: 16px;
    padding-right: 16px;
  }

  #ws-panel-agent-sms .hs-sms-status-card {
    margin-left: 16px;
    margin-right: 16px;
    flex-wrap: wrap;
  }

  #ws-panel-agent-chatbot .hs-chatbot-launcher-option,
  #ws-panel-agent-chatbot .hs-chatbot-launcher-option.is-selected {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 1fr);
    min-height: 72px;
    padding: 8px 0 8px 44px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage {
    min-height: 48px;
    overflow: visible;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint__text {
    font-size: 0.74rem;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint__arrow {
    width: 30px;
    height: 12px;
  }
}

#ws-panel-agent-phone .hs-agent-settings-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}

#ws-panel-agent-phone .hs-agent-settings-block + .hs-agent-settings-block {
  margin-top: var(--sp-5, 20px);
  padding-top: var(--sp-5, 20px);
  border-top: 1px solid var(--hair-2, #d7ddd3);
}

#ws-panel-agent-phone .hs-agent-settings-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

#ws-panel-agent-phone .hs-agent-settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  padding: 14px 16px;
  border-radius: var(--r-md, 12px);
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair-2, #d7ddd3);
}

#ws-panel-agent-phone .hs-agent-settings-toggle__copy {
  min-width: 0;
  flex: 1;
}

#ws-panel-agent-phone .hs-agent-settings-toggle__title {
  display: block;
  font-size: 0.90625rem;
  font-weight: 700;
  color: var(--ink, #111);
}

#ws-panel-agent-phone .hs-agent-settings-toggle__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2, #4a5c52);
  margin-top: 3px;
  line-height: 1.45;
}

#ws-panel-agent-phone .hs-ptool-focus-opts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

#ws-panel-agent-phone .hs-ptool-focus-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4, 16px);
  padding: 14px 16px;
  border-radius: var(--r-md, 12px);
  background: var(--panel-2, #f6f8f5);
  border: 1px solid var(--hair-2, #d7ddd3);
  text-align: left;
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

#ws-panel-agent-phone .hs-ptool-focus-opt:hover {
  background: var(--panel-3, #eef2ec);
}

#ws-panel-agent-phone .hs-ptool-focus-opt.is-selected {
  border-color: var(--accent-2, #43e5a4);
  background: var(--accent-tint, #e6fbf1);
}

#ws-panel-agent-phone .hs-ptool-focus-opt__radio {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--hair-2, #d7ddd3);
  display: grid;
  place-items: center;
  transition: border-color 0.14s ease;
}

#ws-panel-agent-phone .hs-ptool-focus-opt.is-selected .hs-ptool-focus-opt__radio {
  border-color: var(--accent-2, #43e5a4);
}

#ws-panel-agent-phone .hs-ptool-focus-opt__radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2, #43e5a4);
  transform: scale(0);
  transition: transform 0.14s ease;
}

#ws-panel-agent-phone .hs-ptool-focus-opt.is-selected .hs-ptool-focus-opt__radio::after {
  transform: scale(1);
}

#ws-panel-agent-phone .hs-ptool-focus-opt__txt {
  min-width: 0;
}

#ws-panel-agent-phone .hs-ptool-focus-opt__name {
  display: block;
  font-size: 0.90625rem;
  font-weight: 700;
  color: var(--ink, #111);
}

#ws-panel-agent-phone .hs-ptool-focus-opt__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2, #4a5c52);
  margin-top: 3px;
  line-height: 1.5;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-picker__grid {
  display: grid;
  /* Keep columns wide enough for radio padding + full "Recommended" pill. */
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--sp-2, 8px);
  max-width: none;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 10px 12px;
  border-radius: var(--r-md, 12px);
  background: var(--panel-2, #f6f8f5) !important;
  border: 1px solid var(--hair-2, #d7ddd3);
  color: var(--ink, #111) !important;
  text-align: left;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.14s ease, background 0.14s ease;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option.is-recommended {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name play'
    'rec rec';
  column-gap: 8px;
  row-gap: 4px;
  overflow: visible;
}

/* Align radio with the letter row when the Recommended pill adds a second line. */
#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option.is-recommended::before {
  top: 16px;
  transform: none;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option:hover {
  background: var(--panel-3, #eef2ec) !important;
  color: var(--ink, #111) !important;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option.is-selected {
  border-color: var(--accent-2, #43e5a4);
  background: var(--accent-tint, #e6fbf1) !important;
  color: var(--ink, #111) !important;
  box-shadow: inset 0 0 0 1px var(--accent-2, #43e5a4);
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option__name {
  font-size: 0.8125rem;
  font-weight: 700;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option__play {
  width: 28px;
  height: 28px;
  margin-left: 0;
}

#ws-panel-agent-phone .hs-ptool__body-in .hs-voice-option__rec {
  font-size: 0.625rem;
  padding: 0.08rem 0.35rem;
}

#ws-panel-agent-phone .hs-ptool .hs-sms-links-list,
#ws-panel-agent-phone .hs-ptool .hs-sms-link-compose,
#ws-panel-agent-phone .hs-ptool .hs-sms-link-add-row,
#vl-phone-tools-mount .hs-ptool .hs-sms-links-list,
#vl-phone-tools-mount .hs-ptool .hs-sms-link-compose,
#vl-phone-tools-mount .hs-ptool .hs-sms-link-add-row {
  padding-left: var(--sp-5, 20px);
  padding-right: var(--sp-5, 20px);
}

#ws-panel-agent-phone .hs-ptool .hs-sms-links-list,
#vl-phone-tools-mount .hs-ptool .hs-sms-links-list {
  padding-top: 0;
  padding-bottom: var(--sp-3, 12px);
}

#ws-panel-agent-phone .hs-ptool .hs-sms-link-add-row,
#vl-phone-tools-mount .hs-ptool .hs-sms-link-add-row {
  padding-bottom: var(--sp-5, 20px);
}

#vl-phone-tools-mount .hs-sms-link-item > summary,
#vl-phone-tools-mount .hs-sms-link-item__summary {
  font-weight: 400;
}

#vl-phone-tools-mount .hs-ptool[data-skill-id="sms_link"] .hs-ptool__sub {
  font-weight: 400;
}

#ws-panel-agent-phone .hs-phone-skill-card__summary,
#ws-panel-agent-phone .hs-ptool__sub {
  color: var(--ink-2, #4a5c52);
}

/* Chat / SMS agent panels */
.hs-chat-settings-expand {
  margin-top: 1rem;
}

.hs-chat-settings-panel {
  margin-top: 1rem;
}

.hs-chat-settings-panel .hs-chatbot-settings-inner,
.hs-chat-settings-panel .hs-chatbot-embed {
  margin-top: 0.75rem;
}

.hs-chat-messaging-card > .hs-agent-subtabs-wrap,
.hs-chat-messaging-card > .hs-agent-subtabs {
  margin-top: 0;
  max-width: 24rem;
}

.hs-chat-messaging-card > .hs-agent-subtab-panel {
  margin-top: 0;
}

.hs-chat-messaging-subtab-head {
  position: relative;
  z-index: 4;
}

.hs-chat-messaging-subtab-head .sub {
  margin: 0.35rem 0 0;
}

.hs-chat-messaging-tab .hs-chatbot-preview-section {
  margin-bottom: 0;
}

/* A2P 10DLC registration preview (SMS panel) */
.hs-a2p-unlock-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 1rem;
}

.hs-a2p-unlock.hs-btn {
  width: auto;
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none !important;
  filter: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hs-a2p-unlock__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

.hs-a2p-unlock__sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-2, var(--hs-neutral-600));
  line-height: 1.45;
}

.hs-a2p-unlock-done {
  margin: 0.5rem 0 0;
  color: var(--ink-2, var(--hs-neutral-600));
}

.hs-a2p-form-wrap__bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.hs-a2p-section {
  margin-top: 0.5rem;
}

.hs-a2p-section select.hs-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding: 0 36px 0 14px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 500;
}

.hs-a2p-head h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.hs-a2p-preview-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: #e8f5ee;
  color: #1a5c3a;
  border: 1px solid #b7e0c8;
}

.hs-a2p-pricing {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3faf6 0%, #eef6f1 100%);
  border: 1px solid #c5e4d2;
}

.hs-a2p-pricing__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e5c36;
  margin-bottom: 0.4rem;
}

.hs-a2p-pricing__list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
}

.hs-a2p-pricing__list li {
  margin: 0.25rem 0;
}

.hs-a2p-pricing__note {
  margin: 0.55rem 0 0;
}

.hs-a2p-fields h4,
.hs-a2p-campaign h4 {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.9rem;
}

.hs-a2p-path {
  margin: 0.75rem 0 1rem;
}

.hs-a2p-path__label {
  font-weight: 650;
  font-size: 0.9rem;
  margin: 0 0 0.55rem;
}

.hs-a2p-path__options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hs-a2p-path__opt {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(14, 36, 27, 0.12);
  cursor: pointer;
  background: #fff;
}

.hs-a2p-path__opt.is-on {
  border-color: #2f9e6a;
  background: #f4fbf7;
  box-shadow: 0 0 0 1px rgba(47, 158, 106, 0.25);
}

.hs-a2p-path__opt input {
  margin-top: 0.2rem;
}

.hs-a2p-path__opt span.sub {
  display: block;
  margin-top: 0.15rem;
}

.hs-a2p-path__rec {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(47, 158, 106, 0.12);
  color: #14663c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.hs-a2p-path__limits {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
}

.hs-a2p-path__limits li {
  margin: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.05);
  color: var(--ink-2, #45594c);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.hs-a2p-path__opt.is-on .hs-a2p-path__limits li {
  background: rgba(47, 158, 106, 0.12);
  color: #14663c;
}

.hs-a2p-form-path {
  margin: 0 0 10px;
  font-size: 0.875rem;
}

.hs-a2p-change-path {
  margin-left: 0.35rem;
  font-size: inherit;
  font-weight: 600;
}

.hs-a2p-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.hs-a2p-actions--end {
  justify-content: flex-end;
}

.hs-a2p-actions #ws-a2p-submit-hint {
  flex: 1 1 100%;
  margin: 0.15rem 0 0;
}

.hs-chatbot-stage--stacked {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  padding: 0;
}

.hs-chatbot-stage--stacked .hs-chatbot-preview-frame {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.hs-chatbot-customize-box {
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: linear-gradient(180deg, #f9faf6 0%, #eef3ef 100%);
}

.hs-chatbot-customize-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.hs-chatbot-customize-box__head h4 {
  margin: 0;
  font-size: 0.95rem;
}

.hs-chatbot-customize-box__launcher {
  display: flex;
  justify-content: flex-end;
  min-height: 3.5rem;
}

.hs-chatbot-customize-box__launcher .hs-chatbot-fab-slot {
  display: flex;
  justify-content: flex-end;
}

.hs-chatbot-customize-box .hs-chat-settings-panel {
  margin-top: 1rem;
  overflow: visible;
}

.hs-chatbot-customize-box .hs-chatbot-settings-inner {
  overflow: visible;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-summary {
  margin-top: var(--sp-3, 12px);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--accent-tint, #f4faf8);
  color: var(--accent-2, #0d6e5b);
  font-size: 0.875rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-website-analysis {
  display: flex;
  gap: var(--sp-4, 16px);
  align-items: flex-start;
  margin-bottom: var(--sp-5, 20px);
  padding: var(--sp-5, 20px);
  border: 1px solid var(--accent-tint-border, #d4ebe4);
  border-radius: var(--r-xl, 20px);
  background: linear-gradient(135deg, rgba(67, 229, 164, 0.08), rgba(244, 250, 248, 0.95));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-website-analysis__dots {
  flex: 0 0 auto;
  padding-top: 0.15rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-website-analysis__dots .hs-kb-plan-wait-dots {
  margin-bottom: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-website-analysis__copy h3 {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-website-analysis__copy .sub {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* One per accordion body now, not one per page — the accordion body already
   supplies the bottom padding, so the old page-level margin would double it. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-business-form {
  margin-bottom: 0;
  max-width: 100%;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-training-accordion__body > .hs-td-form-section:last-child {
  margin-bottom: 0;
}

/* Agent training tabs — clear action button contrast on white cards */
/* Business information used to redefine the whole ladder for itself, right
   here: primary as an aqua fill with an aqua glow, soft as a fourth grey fill
   with its own border and its own hover. Four ID-scoped selectors at (1,3,0)
   each, which is why nothing in the design system could reach them.

   That is the single biggest reason this one page rendered six button styles.
   Deleted outright — primary and secondary come from handshake.css like every
   other screen, so changing them once changes them here too. */

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-form-section {
  margin-bottom: var(--sp-4, 16px);
}

.hs-owner-auth-phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.hs-owner-auth-phones__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hs-border, #e7edea);
}

.hs-owner-auth-phones__row--primary .hs-owner-auth-phones__num {
  font-weight: 600;
}

.hs-owner-auth-phones__num {
  font-size: 14px;
  color: var(--ink, #17241c);
  font-variant-numeric: tabular-nums;
}

.hs-owner-auth-phones__add {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 8px;
  align-items: center;
}

@media (max-width: 639px) {
  .hs-owner-auth-phones__add {
    grid-template-columns: 1fr;
  }
}

.hs-brand-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--hs-border, #e7edea);
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 559px) {
  .hs-brand-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hs-brand-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hs-brand-card__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink, #17241c);
  overflow-wrap: anywhere;
}

.hs-brand-card__sub {
  font-size: 0.875rem;
  color: var(--ink-2, #3d4f44);
  overflow-wrap: anywhere;
}

.hs-brand-card__swatches {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.hs-brand-guide__logo-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  flex: none;
  padding: 0;
  border: 1px solid var(--hs-border, #e7edea);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-brand-guide__logo-frame:hover,
.hs-brand-guide__logo-frame:focus-visible {
  border-color: rgba(26, 127, 75, 0.45);
}

.hs-brand-guide__logo-frame--empty {
  border-style: solid;
  background: var(--panel-2, #f6f8f5);
}

.hs-brand-guide__logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  color: var(--ink-3, #6b7f72);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

.hs-brand-guide__logo-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-tint, #e6fbf1);
  color: var(--ink-2, #3d4f44);
  font-size: 1.15rem;
  line-height: 1;
}

.hs-brand-guide__logo {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px;
  display: block;
  image-rendering: auto;
}

.hs-brand-guide__logo-hint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(14, 27, 17, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.hs-brand-guide__logo-frame:hover .hs-brand-guide__logo-hint,
.hs-brand-guide__logo-frame:focus-visible .hs-brand-guide__logo-hint {
  opacity: 1;
}

.hs-brand-logo-modal__card {
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
}

.hs-brand-logo-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.hs-brand-logo-modal__head h3 {
  margin: 0;
}

.hs-brand-logo-modal__lead {
  margin: 0 0 16px;
}

.hs-brand-logo-modal__section + .hs-brand-logo-modal__section {
  margin-top: 18px;
}

.hs-brand-logo-modal__label {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-2, #3d4f44);
}

.hs-brand-logo-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.hs-brand-logo-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 8px;
  border: 1px solid var(--hs-border, #e7edea);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-brand-logo-opt img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

.hs-brand-logo-opt:hover,
.hs-brand-logo-opt:focus-visible {
  border-color: rgba(26, 127, 75, 0.45);
}

.hs-brand-logo-opt.is-selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.hs-brand-logo-opt--upload {
  gap: 6px;
  color: var(--ink-2, #3d4f44);
}

.hs-brand-logo-opt__upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent-tint, #e6fbf1);
  font-size: 1.35rem;
  line-height: 1;
}

.hs-brand-logo-opt__upload-label {
  font-size: 0.75rem;
  font-weight: 600;
}

.hs-brand-guide__swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hs-brand-guide__swatch-chip {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(14, 27, 17, 0.14);
  background: #17241c;
}

/* No colour pulled or typed yet — a filled chip would read as a wrong answer. */
.hs-brand-guide__swatch-chip.is-unset {
  background: repeating-linear-gradient(
    45deg,
    rgba(14, 27, 17, 0.04),
    rgba(14, 27, 17, 0.04) 4px,
    transparent 4px,
    transparent 8px
  );
  border-style: dashed;
  border-color: rgba(14, 27, 17, 0.24);
}

.hs-brand-guide__swatch-chip input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hs-brand-guide__swatch-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hs-brand-guide__swatch-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-3, #6b7f72);
}

.hs-brand-guide__swatch-hex {
  width: 76px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--hs-font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2, #3d4f44);
  outline: none;
}

.hs-brand-guide__swatch-hex:focus {
  color: var(--ink, #17241c);
}

.hs-brand-guide__fonts {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 560px) {
  .hs-brand-guide__fonts {
    grid-template-columns: 1fr 1fr;
  }
}

.hs-brand-guide__font-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-2, #3d4f44);
}

.hs-brand-guide__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hs-brand-guide__meta {
  margin: 0;
}

.hs-brand-guide__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(14, 27, 17, 0.1);
  border-radius: var(--radius-md, 10px);
  background: rgba(14, 27, 17, 0.03);
}

.hs-brand-guide__status.is-warn {
  border-color: rgba(176, 106, 20, 0.28);
  background: rgba(240, 176, 60, 0.1);
}

.hs-brand-guide__status-text {
  margin: 0;
  flex: 1 1 240px;
}

.hs-brand-guide__status .hs-btn {
  flex: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-section-label {
  margin: var(--sp-5, 20px) 0 var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-section-label:first-child {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-section-label h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-facts {
  margin: var(--sp-3, 12px) 0 0;
  padding-left: 1.1rem;
  color: var(--accent-2, #0d6e5b);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-facts li {
  margin: 0.25rem 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob {
  margin: var(--sp-3, 12px) 0 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink-3, #64748b) 22%, transparent);
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 88%, transparent);
  padding: 0.55rem 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2, #334155);
  list-style: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob summary::-webkit-details-marker {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.35rem;
  color: var(--ink-3, #64748b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob[open] summary::before {
  content: "▾";
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob__body {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob__urls {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--ink-3, #64748b);
  overflow-wrap: anywhere;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob__preview,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-crawl-blob__full {
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--surface-1, #fff);
  border: 1px solid color-mix(in srgb, var(--ink-3, #64748b) 18%, transparent);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink-2, #334155);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-field__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-field--full {
  display: block;
  padding: 0;
  border-bottom: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-field:not(.hs-td-chip-field--full) .hs-td-chip-field__body {
  grid-column: 2;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-field:not(.hs-td-chip-field--full) {
  align-items: start;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-field:not(.hs-td-chip-field--full) .hs-td-chip-list,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-field:not(.hs-td-chip-field--full) .hs-td-chip-add {
  grid-column: 2;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-tint, #f4faf8);
  border: 1px solid var(--accent-tint-border, #d4ebe4);
  font-size: 0.875rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3, var(--hs-text-muted));
  cursor: pointer;
  padding: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip__remove svg {
  width: 12px;
  height: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-chip-add {
  margin-top: 0.5rem;
  padding-left: 0.65rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review {
  margin-bottom: var(--sp-5, 20px);
  padding: var(--sp-4, 16px);
  border: 1px solid #e7edea;
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  margin-top: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row {
  border: 1px solid var(--hair, #e7edea);
  border-radius: var(--r-lg, 14px);
  padding: var(--sp-4, 16px);
  background: var(--panel, #fff);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__head h4 {
  margin: 0 0 var(--sp-3, 12px);
  font-size: 0.9375rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__values {
  display: grid;
  gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__value {
  display: grid;
  gap: 0.15rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__value--proposed .hs-td-scrape-review-row__v {
  color: var(--accent-2, #0d6e5b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__k {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__v {
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table-wrap {
  margin-top: var(--sp-3, 12px);
  overflow-x: auto;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: var(--panel, #fff);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table tr:first-child th:first-child {
  border-top-left-radius: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table tr:first-child th:last-child {
  border-top-right-radius: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table th,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table td {
  border-bottom: 1px solid var(--hair, #e7edea);
  padding: 0.65rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__check {
  width: 2.5rem;
}

/* Provenance line under each field label: how confident, from which page, and
   the quote that supports it — so a change is reviewable, not just visible. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink-3, var(--hs-text-muted));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__conf {
  font-variant-numeric: tabular-nums;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__conf--high {
  color: var(--ok, #1f7a4d);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__conf--low {
  color: var(--warn, #a8631a);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__src {
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__note {
  font-style: italic;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-scrape-review__ev {
  overflow-wrap: anywhere;
  opacity: 0.9;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__admin-rerun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-assignments {
  margin-top: var(--sp-5, 20px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: var(--panel, #fff);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb:hover,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb:focus-visible {
  border-color: var(--accent-tint-border, #d4ebe4);
  box-shadow: 0 4px 14px rgba(13, 110, 91, 0.08);
  outline: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__preview--pdf {
  background: linear-gradient(145deg, #c0392b, #922b21);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__preview--sheet {
  background: linear-gradient(145deg, #1e8449, #145a32);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__preview--doc {
  background: linear-gradient(145deg, #2e86c1, #1b4f72);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__preview--text {
  background: linear-gradient(145deg, #5d6d7e, #34495e);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__preview--generic {
  background: linear-gradient(145deg, #7f8c8d, #566573);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, #1a2421);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-file-thumb__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card.hs-td-assignment-card {
  margin: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-assignment-card--readonly .hs-st-task-card__actions {
  margin-left: auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-add-card__ic-fallback {
  font-size: 1.25rem;
  line-height: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-st-task-card__ic-fallback {
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Scenarios tab */
#ws-panel-agent-phone .hs-scenarios-tab .hs-st-section-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3, 12px);
  margin: var(--sp-5, 20px) 0 var(--sp-3, 12px);
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-st-section-label:first-child {
  margin-top: 0;
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-st-section-label h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3, var(--hs-text-muted));
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-st-section-label__rule {
  flex: 1;
  height: 1px;
  background: var(--hair, var(--hs-neutral-200));
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-st-section-label__count {
  font-size: 13px;
  color: var(--ink-3, var(--hs-text-muted));
  font-weight: 600;
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-training-field {
  display: grid;
  grid-template-columns: minmax(120px, 26%) 1fr;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hs-neutral-200);
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-training-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--hs-neutral-600);
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-training-input,
#ws-panel-agent-phone .hs-scenarios-tab input.hs-training-input,
#ws-panel-agent-phone .hs-scenarios-tab textarea.hs-training-input {
  width: 100%;
  font-family: var(--hs-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  padding: 4px 0;
  min-height: 0;
  height: auto;
  border: none;
  border-bottom: 1px solid var(--hs-neutral-250);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--hs-neutral-800);
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-training-input:focus,
#ws-panel-agent-phone .hs-scenarios-tab input.hs-training-input:focus,
#ws-panel-agent-phone .hs-scenarios-tab textarea.hs-training-input:focus {
  outline: none;
  border-bottom-color: var(--hs-neutral-500);
  box-shadow: none;
}

#ws-panel-agent-phone .hs-scenarios-tab textarea.hs-training-input {
  min-height: 56px;
  padding: 6px 0;
  resize: vertical;
  align-self: start;
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-training-field--textarea {
  align-items: start;
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-phone-tool-option {
  background: #fff !important;
  color: #1a2e24 !important;
  border: 1px solid #dbe5df;
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-phone-tool-option:hover {
  background: #fbfdfc !important;
  color: #1a2e24 !important;
}

#ws-panel-agent-phone .hs-scenarios-tab .hs-phone-tool-option.is-selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
  background: #fff !important;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-card .hs-st-section-label:first-of-type {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row {
  border: 1px solid var(--hair, #e7edea);
  border-radius: var(--r-md, 12px);
  background: var(--panel, #fff);
  overflow: hidden;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row:hover {
  border-color: var(--hair-2, #d7ddd3);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row.is-expanded {
  border-color: var(--accent-2, #1a7f4b);
  box-shadow: 0 0 0 1px var(--accent-tint-border, #d4ebe4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__main {
  padding: 10px 12px;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__main:focus-visible {
  outline: 2px solid var(--accent-2, #43e5a4);
  outline-offset: -2px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__head {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__titles {
  flex: 1 1 auto;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__name {
  font-weight: 650;
  font-size: 0.875rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__peek,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__intent {
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-3, #6b7a70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__aside {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__aside .hs-st-switch .hs-agent-switch__label,
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__aside .hs-agent-switch__label {
  display: none;
}

/* Was 30x30 with a 15px glyph — under the 24px minimum target once you
   account for the round hit area, and visibly smaller than every other icon
   button on the page. 36/16 is the scale the rest of the app uses. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__del {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  background: transparent !important;
  color: var(--ink-3, #6b7a70) !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__del svg {
  width: 16px;
  height: 16px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__del:hover {
  background: var(--fail-tint, #fbe9e8) !important;
  color: var(--fail, #d9534f) !important;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-row__body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--hair, #e7edea);
  padding-top: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-channel-overrides-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-channel-overrides-toggle[hidden],
:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-channel-overrides[hidden] {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-channel-overrides-toggle svg {
  width: 14px;
  height: 14px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-rec-grid {
  margin-bottom: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-rec-card {
  text-align: left;
  height: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sp-4, 16px);
  border: 1px solid var(--hair, #e7edea);
  border-radius: var(--r-xl, 20px);
  margin-bottom: var(--sp-4, 16px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-empty__ic {
  font-size: 1.25rem;
  opacity: 0.6;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-composer {
  border: 1px solid var(--hair, #e7edea);
  border-radius: var(--r-xl, 20px);
  background: var(--panel, #fff);
  margin-top: var(--sp-4, 16px);
  overflow: hidden;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-composer[hidden] {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-composer__label {
  padding: var(--sp-4, 16px) var(--sp-5, 20px) 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-composer__body {
  padding: var(--sp-3, 12px) var(--sp-5, 20px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenarios-composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: var(--sp-3, 12px) var(--sp-5, 20px) var(--sp-5, 20px);
  border-top: 1px solid var(--hair, #e7edea);
  background: var(--accent-tint, #fafcfb);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-tier--mandatory {
  background: var(--accent-tint, #f4faf8);
  color: var(--accent-2, #0d6e5b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-tier--recommended {
  background: #fcf6e9;
  color: #946200;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-tier--client {
  background: #f1edfd;
  color: #5b43a8;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings, #ws-panel-agent-phone) .hs-scenario-always-on {
  font-size: 0.8125rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-shell {
  gap: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-shell .hs-business-group {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-shell .hs-personal-scan h4 {
  margin: 0 0 4px;
  padding: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--hs-neutral-500);
  border-bottom: 1px solid var(--hs-neutral-200);
}

/* Page head — deliberately the same shape as the business tab's head so the
   two halves of Information read as one product. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-head__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hs-ink, #0e1b11);
  overflow-wrap: anywhere;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-head__lead,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-head__count {
  margin: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-head__count {
  font-variant-numeric: tabular-nums;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-private-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(74, 92, 87, 0.18);
  background: #eef3f1;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #3d524c;
  white-space: nowrap;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-private-pill__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-shell .hs-personal-add-fact__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag {
  border: 1px solid rgba(13, 110, 91, 0.2);
  background: #f4faf8;
  color: var(--accent-2, #0d6e5b);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag__delete {
  margin-left: -6px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #5c6b68);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px 2px 2px;
  cursor: pointer;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-wrap:hover .hs-knowledge-tag__delete,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-wrap:focus-within .hs-knowledge-tag__delete {
  opacity: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag__delete:hover {
  color: #b42318;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--person {
  background: #fff5f2;
  border-color: rgba(194, 84, 58, 0.25);
  color: #a34b32;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--place {
  background: #f0f6ff;
  border-color: rgba(52, 98, 175, 0.25);
  color: #2f5f9c;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--tool {
  background: #fff9ed;
  border-color: rgba(176, 122, 28, 0.28);
  color: #8f6218;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--topic {
  background: #f6f0ff;
  border-color: rgba(108, 72, 168, 0.25);
  color: #5f3f96;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--note {
  background: #f4faf8;
  border-color: rgba(13, 110, 91, 0.2);
  color: var(--accent-2, #0d6e5b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag.is-selected {
  background: var(--accent-2, #0d6e5b);
  color: #fff;
  border-color: var(--accent-2, #0d6e5b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--person.is-selected,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--place.is-selected,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--tool.is-selected,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--topic.is-selected,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--note.is-selected {
  background: var(--accent-2, #0d6e5b);
  color: #fff;
  border-color: var(--accent-2, #0d6e5b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag.is-hidden-tag {
  color: var(--ink-3, #6c7e73);
  background: var(--panel-2, #f6f8f5);
  border-style: solid;
  opacity: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag--linked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag__jump {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-panel {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(13, 110, 91, 0.15);
  background: #f8fafa;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-panel__label {
  font-weight: 700;
  margin-bottom: 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-panel__body {
  width: 100%;
  margin-bottom: 8px;
  min-height: 6rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-topic-seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-bottom: 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-topic-seq__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted, #5c6b68);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tags--inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-group {
  margin-bottom: 12px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-group__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #5c6b68);
  margin: 0 0 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-learning-bar {
  margin-bottom: var(--sp-5, 20px);
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--accent-tint, #f4faf8);
  border: 1px solid var(--accent-tint-border, #d4ebe4);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-learning-bar__stat {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--accent-2, #0d6e5b);
  font-size: 0.875rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-learning-bar__copy {
  margin: 0;
  font-size: 0.8125rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: var(--text-muted, #5c6b68);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-provenance__source {
  font-weight: 600;
  color: var(--accent-2, #0d6e5b);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-provenance__email {
  font-style: italic;
}

.hs-personal-scan {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hair, #e7edea);
}

.hs-personal-scan .hs-personal-section-label {
  margin-top: 0;
}

.hs-personal-scan-footnote {
  margin: 0 0 var(--sp-3, 12px);
  font-size: 0.75rem;
  color: var(--text-muted, #5c6b68);
}

.hs-personal-add-fact {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hair, #e7edea);
}

.hs-personal-add-fact__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tags--linked {
  margin-bottom: 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-panel__add-link {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-knowledge-tag-panel__add-link .hs-personal-input {
  flex: 1;
  min-width: 120px;
}


:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer {
  margin: 0 0 14px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 0.75rem;
  row-gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(45, 58, 50, 0.12);
  border-radius: 14px;
  background: #fff;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer.is-tag-open .hs-personal-note-composer__sheet {
  border-color: rgba(13, 110, 91, 0.28);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__sentence {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__title {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.2rem 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 550;
  color: #17241c;
  outline: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__title::placeholder {
  color: #8a9690;
  font-weight: 500;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-wrap {
  position: relative;
  flex: 0 0 auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(45, 58, 50, 0.14);
  background: #f4f7f5;
  color: #3d4a42;
  border-radius: 999px;
  padding: 0.28rem 0.55rem 0.28rem 0.65rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-trigger.has-tag,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-trigger.is-open {
  border-color: rgba(13, 110, 91, 0.35);
  background: #e7f6f0;
  color: #0d6e5b;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-chev {
  opacity: 0.7;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-trigger.is-open .hs-personal-note-composer__tag-chev {
  transform: rotate(180deg);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 9rem;
  padding: 0.35rem;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-option {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #17241c;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-option:hover,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__tag-option.is-on {
  background: #eef6f2;
  color: #0d6e5b;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.65rem;
  align-self: end;
  justify-self: end;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__hint {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.75rem;
  color: #6c7e73;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: #3d4a42;
  color: #fff;
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__submit:hover:not(:disabled) {
  background: #17241c;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-note-composer__submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know {
  margin-top: 4px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(45, 58, 50, 0.1);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(111, 184, 58, 0.1), transparent 55%),
    radial-gradient(100% 70% at 100% 0%, rgba(42, 122, 184, 0.08), transparent 50%),
    #fbfcfb;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 10px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__search {
  width: min(14rem, 100%);
  font-size: 0.8125rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__scroll {
  position: relative;
  max-height: none;
}

/* Collapsing now caps chips per theme in the markup, so the container no
   longer needs a height clamp or a fade — every theme stays visible. */

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section {
  margin-bottom: 0.85rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section:last-child {
  margin-bottom: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c7e73;
  margin-bottom: 0.35rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #9aa9a0;
  letter-spacing: 0;
}

/* An empty theme is a button: it names the type, says what belongs there, and
   aims the composer at it. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section--empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--hs-neutral-200, #dbe5df);
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section--empty:hover,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section--empty:focus-visible {
  border-color: #9aa9a0;
  background: rgba(14, 27, 17, 0.025);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section--empty .hs-personal-know__section-label {
  margin-bottom: 0;
  flex: 0 0 auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--ink-3, #6c7e73);
  overflow-wrap: anywhere;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section-add {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--hs-neutral-100, #eef3f1);
  color: #45594c;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__more {
  align-self: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6c7e73;
}

/* Side-by-side label and hint wrap into ragged rows on narrow screens. Stack
   them instead: label and the + share the top row, hint gets its own line. */
@media (max-width: 599px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section--empty {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section--empty .hs-personal-know__section-label {
    order: 1;
    flex: 1 1 auto;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section-add {
    order: 2;
    flex: 0 0 auto;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__section-hint {
    order: 3;
    flex: 1 1 100%;
  }
}

/* Inbox section sits last — it is the alternative to typing, not the headline.
   Carded like the notes list above it so it reads as a peer, not a stray. */
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-inbox {
  margin-top: 0.5rem;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(45, 58, 50, 0.1);
  background: #fbfcfb;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-inbox .hs-personal-scan {
  margin: 0;
  border: 0;
  padding: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-inbox .hs-personal-scan .sub {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-scan__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-scan__note {
  align-self: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__toggle {
  display: inline-flex;
  margin-top: 0.65rem;
  border: 0;
  background: transparent;
  color: #0d6e5b;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-know__toggle:hover {
  text-decoration: underline;
}

.hs-personal-scan__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.hs-personal-scan-progress__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin-top: 0.7rem;
}

.hs-personal-scan-progress__when {
  margin: 0.35rem 0 0;
}

.hs-personal-scan-progress__refund {
  color: #2f6b3a;
  font-weight: 600;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-results {
  margin-top: 4px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-table {
  width: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-row {
  cursor: pointer;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-row:hover td {
  background: #f6faf8;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: #eef3f1;
  color: var(--text-muted, #5c6b68);
  border: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-detail,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-notes-source {
  color: var(--text-muted, #5c6b68);
  font-size: 0.8125rem;
}


:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-empty-row {
  padding: 10px 0;
  text-align: center;
}


:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-card {
  padding: 8px;
  border: 1px solid var(--border-subtle, #e8eeec);
  border-radius: 10px;
  background: #fff;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-card__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-card__multi {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-multi-line {
  display: flex;
  gap: 6px;
  align-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-multi-line .hs-personal-input {
  flex: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-visibility.is-collapsed {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-inline-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-section-title {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: none;
  flex: 1;
  min-width: 120px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-section-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-input--head {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}


:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-add-section-row {
  margin: 4px 0 8px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--gmail {
  margin-bottom: var(--sp-5, 20px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero--gmail-spaced {
  margin-top: var(--sp-3, 12px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-hero__email {
  flex: 1 1 14rem;
  min-width: 0;
  color: var(--accent-2, #0d6e5b);
  font-weight: 600;
  background: #fff;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-gmail-analysis {
  margin-bottom: var(--sp-5, 20px);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-td-gmail-last-scan {
  margin: 0.35rem 0 0;
  color: var(--accent-2, #0d6e5b);
  font-size: 0.8125rem;
}

.hs-personal-tag-modal__card {
  width: min(420px, 100%);
  max-height: min(85vh, 640px);
  overflow: auto;
  padding: 16px 18px;
}

.hs-personal-tag-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.hs-personal-tag-modal__head h3 {
  margin: 0;
  font-size: 1rem;
}

.hs-personal-tag-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted, #5c6b68);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.hs-personal-tag-modal__close:hover {
  background: #f4f6f5;
}

#ws-personal-tag-modal .hs-knowledge-tag-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#ws-personal-tag-modal .hs-personal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

#ws-personal-tag-modal .hs-personal-field--full {
  margin-bottom: 10px;
}

#ws-personal-tag-modal .hs-personal-field__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #5c6b68);
}

#ws-personal-tag-modal .hs-personal-card--person .hs-personal-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

#ws-personal-tag-modal .hs-personal-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 4px;
}

#ws-personal-tag-modal .hs-personal-card__foot .hs-btn {
  min-width: 4.5rem;
}

#ws-personal-tag-modal .hs-link--danger {
  color: #b42318;
}

.hs-personal-scan--cta {
  border-bottom: none;
  padding-bottom: 0;
}

/* Shared connection invite — phone / email / socials */
.hs-connect-card {
  margin: 0 0 1rem;
  border-radius: 14px;
  border: 1px solid var(--hair, rgba(14, 27, 17, 0.12));
  background: var(--panel, #fff);
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.04);
  overflow: hidden;
}

.hs-connect-card__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
}

.hs-connect-card__copy {
  min-width: 0;
  flex: 1 1 12rem;
}

.hs-connect-card__title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #17241c);
}

.hs-connect-card__copy .sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-2, #3d5248);
}

.hs-connect-card__meta {
  display: inline;
  font-weight: 600;
  color: var(--ink, #17241c);
}

.hs-connect-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .hs-connect-card__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* The copy block's `flex: 1 1 12rem` basis is a width while the inner is a
     row. Turn the inner into a column here and that 12rem becomes a HEIGHT,
     so a two-line card reserved 192px for 55px of text and `space-between`
     pushed the buttons to the far bottom — a 269px card of mostly nothing.
     Let it size to its text. */
  .hs-connect-card__copy {
    flex: 0 0 auto;
  }

  .hs-connect-card__actions {
    width: 100%;
  }

  .hs-connect-card__actions .hs-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.hs-connect-card--phone,
.hs-connect-socials-card,
.hs-email-agent-connect {
  margin-bottom: 0;
}

.hs-phone-procure .hs-connect-card {
  margin-bottom: 0;
}

.hs-phone-procure .hs-admin-test-pool {
  margin: 0;
  border-radius: 0;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: var(--hair, #e7edea);
}

.hs-info-subnav {
  margin: 0;
  justify-content: flex-start;
}

.hs-portal-section__head > .hs-info-subnav {
  margin: 0;
}

/* A sub-nav governs the panel under it, so it has to sit nearer that panel
   than the page title. It sat 16px below the title and 48px above the cards,
   because the head's own bottom padding, its margin and the section's gap all
   applied. Drop the head's margin and keep one small pad of its own.

   Zeroing both left the section gap as the only spacing, and 16px is not a
   gap — on a phone the first card read as the sub-nav's own body, tucked
   under the pill it was supposed to be separate from. A tab strip needs a
   visible break before what it switches, so the head keeps 12px, which puts
   the first card ~32px clear at every width.

   The [data-hs="2"] prefix is load-bearing: hs-bridge-components.css sets the
   head's padding-block and margin-bottom at (0,2,0) and loads after this
   file, so an unprefixed rule ties and loses. */
[data-hs="2"] .hs-portal-section__head:has(> .hs-info-subnav) {
  padding-bottom: var(--hs-space-3, 12px);
  margin-bottom: 0;
}

.hs-info-subnav__seg {
  width: max-content;
  max-width: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-info-subnav__seg.sgc--raised button.is-on {
  color: var(--accent-2, var(--hs-aqua-deep));
  font-weight: 700;
}

.hs-info-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.hs-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(61, 74, 66, 0.22);
  background: #fff;
  color: #3d4a42;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.hs-info-chip.is-active {
  border-color: #3d4a42;
  background: #3d4a42;
  color: #fff;
}

.hs-info-chip__meta {
  opacity: 0.75;
  font-weight: 500;
  font-size: 0.78rem;
}

.hs-personal-scan__hero {
  margin: 0 0 0.85rem;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #6fb83a 0%, #2a7ab8 55%, #6b3d9e 100%);
}

.hs-personal-scan__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: cover;
  object-position: center;
}

.hs-personal-scan__btn,
#ws-personal-scan-modal #ws-personal-scan-start {
  background: #3d4a42;
  color: #fff;
  border: 1px solid #3d4a42;
  box-shadow: none !important;
  filter: none;
}

.hs-personal-scan__btn:hover:not(:disabled),
#ws-personal-scan-modal #ws-personal-scan-start:hover:not(:disabled) {
  background: #17241c;
  border-color: #17241c;
  color: #fff;
}

.hs-personal-scan__btn:disabled,
#ws-personal-scan-modal #ws-personal-scan-start:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hs-personal-scan-progress {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(45, 58, 50, 0.06);
  border: 1px solid rgba(45, 58, 50, 0.1);
}

.hs-personal-scan-progress--ok {
  background: rgba(70, 140, 80, 0.08);
  border-color: rgba(70, 140, 80, 0.22);
}

.hs-personal-scan-progress--err {
  background: rgba(160, 60, 50, 0.08);
  border-color: rgba(160, 60, 50, 0.22);
}

.hs-personal-scan-progress__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #17241c;
  margin: 0 0 0.45rem;
}

.hs-personal-scan-progress__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(23, 36, 28, 0.12);
  overflow: hidden;
}

/* Same pattern as .hs-biz-know__meter-fill — translate a full-width bar. */
.hs-personal-scan-progress__bar > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #3d4a42;
  transform: translateX(calc(-100% + var(--hs-progress, 0) * 100%));
  transition: transform 0.35s ease;
}

.hs-personal-scan-progress--ok .hs-personal-scan-progress__bar > span {
  background: #3d7a48;
}

.hs-personal-scan-progress--err .hs-personal-scan-progress__bar > span {
  background: #a33c32;
}

.hs-personal-scan-progress__detail {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #4a554e;
}

.hs-personal-scan-modal__card {
  max-width: 26rem;
  padding: 1.35rem 0 1.25rem;
  overflow: hidden;
}

.hs-personal-scan-modal__head {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

#ws-personal-scan-modal .hs-feedback-modal__card {
  position: relative;
}

#ws-personal-scan-modal-body {
  padding: 0 1.25rem;
}

#ws-personal-scan-modal h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  padding-right: 1.75rem;
}

.hs-personal-scan-modal__lead {
  margin: 0 0 0.85rem;
}

.hs-personal-scan-modal__account {
  margin: 0 0 0.85rem;
}

.hs-personal-scan-modal__notice {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: #9b2c2c;
}

.hs-personal-scan-slider {
  margin: 0.35rem 0 1rem;
}

.hs-personal-scan-slider__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
  color: var(--text-muted, #5c6b68);
}

.hs-personal-scan-slider__label-row strong {
  color: var(--text, #1a2421);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.hs-personal-scan-slider__rec-hint {
  margin: 0 0 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5c6b68;
}

.hs-personal-scan-slider__rec-hint.is-selected {
  color: #0d6e5b;
}

/* Lander-style price range (mint → violet track + large thumb) */
.hs-personal-scan-slider__range-wrap {
  --pp-thumb: 30px;
  --pp-track-h: 12px;
  --pp-pct: 0;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--pp-thumb);
  margin: 18px 0 8px;
}

.hs-personal-scan-slider__range-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--pp-track-h);
  margin-top: calc(var(--pp-track-h) / -2);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-aqua, #43e5a4) 0%, #7b6ae8 50%, #a347ea 100%);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.hs-personal-scan-slider__range-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--pp-track-h);
  margin-top: calc(var(--pp-track-h) / -2);
  width: calc((var(--pp-thumb) / 2) + var(--pp-pct) * (100% - var(--pp-thumb)));
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-aqua, #43e5a4) 0%, #7b6ae8 48%, #a347ea 100%);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  transition: width 0.08s linear;
}

.hs-personal-scan-slider__range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--pp-thumb);
  margin: 0;
  border-radius: 999px;
  outline: none;
  touch-action: manipulation;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent;
}

.hs-personal-scan-slider__range::-webkit-slider-runnable-track {
  height: var(--pp-track-h);
  border-radius: 999px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hs-personal-scan-slider__range::-moz-range-track {
  height: var(--pp-track-h);
  border-radius: 999px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hs-personal-scan-slider__range::-moz-range-progress {
  height: var(--pp-track-h);
  border-radius: 999px;
  background: transparent !important;
  border: none !important;
}

.hs-personal-scan-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pp-thumb);
  height: var(--pp-thumb);
  margin-top: calc((var(--pp-track-h) - var(--pp-thumb)) / 2);
  border-radius: 50%;
  background: #fcfbfa;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 3px 10px rgba(67, 229, 164, 0.45),
    0 0 0 4px rgba(67, 229, 164, 0.18);
  cursor: grab;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}

.hs-personal-scan-slider__range:hover::-webkit-slider-thumb {
  transform: scale(1.09);
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 4px 14px rgba(67, 229, 164, 0.55),
    0 0 0 6px rgba(67, 229, 164, 0.2);
}

.hs-personal-scan-slider__range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(0.94);
}

.hs-personal-scan-slider__range::-moz-range-thumb {
  width: var(--pp-thumb);
  height: var(--pp-thumb);
  border-radius: 50%;
  background: #fcfbfa;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 3px 10px rgba(67, 229, 164, 0.45),
    0 0 0 4px rgba(67, 229, 164, 0.18);
  cursor: grab;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}

.hs-personal-scan-slider__range:hover::-moz-range-thumb {
  transform: scale(1.09);
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 4px 14px rgba(67, 229, 164, 0.55),
    0 0 0 6px rgba(67, 229, 164, 0.2);
}

.hs-personal-scan-slider__range:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(0.94);
}

.hs-personal-scan-slider__labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.75rem;
  color: #8a938e;
  padding: 0 2px;
}

.hs-personal-scan-slider__labels-rec {
  color: #0d6e5b;
  font-weight: 700;
  text-align: center;
}

#ws-personal-scan-modal #ws-personal-scan-start {
  width: 100%;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #5c6b68);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-section-label:first-of-type {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-section-label--actions span {
  flex: 1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-identity-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(0, 1fr);
  gap: 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-subtle, #dde5e2);
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.35;
  background: var(--panel, #fff);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-input:focus {
  outline: none;
  border-color: var(--accent-2, #0d6e5b);
  box-shadow: 0 0 0 2px rgba(13, 110, 91, 0.12);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-input--select {
  padding-right: 4px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row--compact {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle, #eef2f0);
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row--compact:last-child {
  border-bottom: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 6px;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-input--wide {
  grid-column: 1 / -1;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row--sub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-input--grow {
  min-width: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.6875rem;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row--sub .hs-personal-row__meta,
:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row--sub > .hs-personal-row__controls {
  margin-top: 0;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row__controls.is-collapsed {
  display: none;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row.is-editing .hs-personal-row__controls {
  display: flex;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-visibility .hs-agent-switch__label {
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-empty {
  margin: 4px 0 0;
  font-size: 0.75rem;
}

/* Conversations — notifications sub-tab */
.hs-conv-subtabs {
  margin: 0 0 var(--hs-space-4);
}

.hs-conv-subtabs.sgc--raised button.is-on {
  color: var(--accent-2, var(--hs-aqua-deep));
  font-weight: 700;
}

/* ---- Conversation notifications (reference: Notifications standalone) ---- */
.hs-cn-panel {
  max-width: var(--hs-portal-content-max, 920px);
}

/* The strip scrolls sideways, so it carries `hs-seg-scroll` in the markup and
   the carve-out in hs-bridge-components.css owns overflow, block padding and
   scrollbars. Without it the thumb's 1px lift raised a vertical scrollbar
   beside the tabs and the clip ate the thumb's shadow.

   The 1.25rem gap is stated twice on purpose: the shorthand is what a non-DS-2
   host reads, and the variable is what the carve-out adds back after it
   cancels its own padding. Same number, so the two cannot drift apart. */
.hs-cn-channel-nav {
  --hs-seg-scroll-gap-bottom: 1.25rem;
  margin: 0 0 1.25rem;
  justify-content: flex-start;
  /* Kept for a non-DS-2 host, where there is no lifted thumb to overflow.
     Under DS 2 the carve-out restates this and adds the room it needs. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hs-cn-channel-nav > .sgc {
  flex-wrap: nowrap;
}

.hs-cn-channel-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--accent-2, #2f9e6a);
  flex-shrink: 0;
}

.hs-cn-channel-seg button.is-on .hs-cn-channel-pip {
  background: var(--accent, var(--hs-aqua, #43e5a4));
}

.hs-cn-me-what {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.hs-cn-me-what > .sgc,
.hs-cn-me-seg {
  display: flex;
  width: 100%;
  max-width: 100%;
  background: #fff;
}

.hs-cn-me-seg {
  padding: 5px;
  gap: 2px;
}

.hs-cn-me-seg > button {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  flex-direction: column;
  gap: 6px;
}

/* Icon + label only — no pill/circle behind the glyph. */
.hs-cn-me-seg > button .hs-cn-me-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  line-height: 0;
}

.hs-cn-me-seg > button .hs-cn-me-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

.hs-cn-me-seg > button.is-on .hs-cn-me-ico {
  background: none;
  color: inherit;
}

.hs-cn-me-seg > button .hs-cn-me-label {
  display: block;
  max-width: 11rem;
}

.hs-cn-channel-nav > .sgc {
  background: #fff;
}

.hs-cn-card--override {
  margin-bottom: 1rem;
}

.hs-cn-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.hs-cn-sheet[hidden] {
  display: none !important;
}

.hs-cn-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: rgba(14, 27, 17, 0.42);
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hs-cn-sheet__backdrop:hover,
.hs-cn-sheet__backdrop:focus,
.hs-cn-sheet__backdrop:active {
  background: rgba(14, 27, 17, 0.42);
  color: transparent;
  box-shadow: none;
  border-color: transparent;
}

.hs-cn-sheet__panel {
  position: relative;
  width: min(640px, 100%);
  max-width: 100%;
  background: #fff;
  box-shadow: -12px 0 40px rgba(14, 27, 17, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hs-cn-sheet__panel {
    width: min(720px, 92vw);
  }

  .hs-cn-sheet__body {
    padding: 1.25rem 1.5rem 2.25rem;
  }

  .hs-cn-panel {
    max-width: 980px;
  }

  .hs-cn-card > .hs-cn-row {
    padding: 1.35rem 1.75rem;
  }

  .hs-cn-me-seg > button {
    min-height: 56px;
    padding: 12px 16px;
    font-size: 14px;
    flex-direction: row;
    gap: 10px;
    white-space: nowrap;
  }

  .hs-cn-me-seg > button .hs-cn-me-ico svg {
    width: 20px;
    height: 20px;
  }

  .hs-cn-me-seg > button .hs-cn-me-label {
    max-width: none;
  }
}

.hs-cn-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hair, var(--border, #e6eae3));
  background: #fff;
}

.hs-cn-sheet__head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.hs-cn-sheet__body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.25rem 2rem;
  background: #fff;
}

body.hs-cn-sheet-open {
  overflow: hidden;
}

.hs-agent-page-head .hs-portal-section__head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hs-cn-deck > .hs-cn-card:first-child {
  margin-top: 0;
}

.hs-cn-count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--ink-3, #6b7a70);
  font-weight: 600;
  white-space: nowrap;
}

.hs-cn-card {
  background: #fff;
  border: 1px solid var(--hair, var(--border, #e6eae3));
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.04);
  overflow: hidden;
}

.hs-cn-card--others {
  margin-top: 1.25rem;
  overflow: hidden;
}

.hs-cn-card--others .hs-cn-row--others-body {
  padding-top: 0.25rem;
}

.hs-cn-card--others .hs-cn-rec-grid {
  margin: 0;
}

.hs-cn-card--others .hs-cn-count {
  margin-left: 0;
  flex-shrink: 0;
}

.hs-cn-row--custom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hs-cn-custom-condition {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hs-cn-custom-condition__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2, #3d4f42);
}

.hs-cn-custom-condition .hs-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
}

.hs-cn-row {
  padding: 1.125rem 1.5rem;
}

.hs-cn-row + .hs-cn-row {
  border-top: 1px solid var(--hair, var(--border, #e6eae3));
}

.hs-cn-row.is-disabled {
  color: var(--ink-3, #6c7e73);
  background: var(--panel-2, #f6f8f5);
  pointer-events: none;
}

.hs-cn-row__top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hs-cn-row__txt {
  flex: 1;
  min-width: 10rem;
}

.hs-cn-row__name {
  font-size: 1rem;
  font-weight: 600;
}

.hs-cn-row__desc {
  font-size: 0.8125rem;
  color: var(--ink-2, #3d4f42);
  margin-top: 3px;
  line-height: 1.5;
  max-width: 44ch;
}

.hs-cn-row--reach {
  padding-top: 0.25rem;
}

.hs-cn-reach-toggles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hs-cn-reach-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.hs-cn-reach-toggle + .hs-cn-reach-toggle,
.hs-cn-reach-toggle + .hs-cn-reach-add,
.hs-cn-reach-add + .hs-cn-reach-toggle {
  border-top: 1px solid var(--hair, var(--border, #e6eae3));
}

.hs-cn-reach-toggle__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hs-cn-reach-toggle.is-off-row .hs-cn-reach-toggle__label {
  opacity: 0.65;
}

.hs-cn-reach-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
}

.hs-cn-reach-add__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2, #3d4f42);
}

.hs-cn-reach-add__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hs-cn-reach-add__row .hs-input {
  flex: 1;
  min-width: 0;
}

.hs-cn-reach-toggle__label {
  font-size: 0.9rem;
  color: var(--ink, #0e1b11);
  line-height: 1.45;
}

.hs-cn-reach-toggle__label strong {
  font-weight: 600;
}

.hs-cn-reach-missing {
  color: var(--hs-amber, #b8860b);
  font-weight: 500;
}

.hs-cn-reach-toggle.is-disabled .hs-cn-reach-toggle__label {
  opacity: 0.55;
}

.hs-cn-warn {
  margin: 0 1.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--hs-amber, #b8860b);
}

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

.hs-cn-rec {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--panel, #fff);
  border: 1px solid var(--hair, var(--border, #e6eae3));
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.04);
  padding: 1.125rem;
  transition: box-shadow 0.14s;
}

.hs-cn-rec.is-off {
  opacity: 0.55;
}

.hs-cn-rec__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs-cn-av {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 800;
}

.hs-cn-av-0 { background: var(--accent-tint, #e6fbf1); color: var(--accent-2, #27ae60); }
.hs-cn-av-1 { background: #eaeffb; color: #4d74c9; }
.hs-cn-av-2 { background: #f6ebfb; color: #9b51c4; }
.hs-cn-av-3 { background: #fff3e6; color: #c97a2b; }

.hs-cn-rec__id {
  flex: 1;
  min-width: 0;
}

.hs-cn-rec__name {
  font-size: 0.97rem;
  font-weight: 700;
}

.hs-cn-rec__email {
  font-size: 0.8125rem;
  color: var(--ink-2, #3d4f42);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-cn-rec__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hs-cn-rec__actions .hs-agent-switch {
  margin: 0;
}

.hs-cn-icbtn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink-3, #6b7a70);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.hs-cn-icbtn svg {
  width: 16px;
  height: 16px;
}

.hs-cn-icbtn:hover {
  background: var(--panel-3, #eef1ec);
  color: var(--ink, #0e1b11);
}

.hs-cn-icbtn--del:hover {
  background: #fdeeed;
  color: #c0392b;
}

.hs-cn-rec__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hs-cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--panel-2, #f4f6f2);
  border: 1px solid var(--hair, var(--border, #e6eae3));
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2, #3d4f42);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-cn-chip svg {
  width: 14px;
  height: 14px;
  color: var(--ink-3, #6b7a70);
  flex-shrink: 0;
}

.hs-cn-form {
  grid-column: 1 / -1;
  background: var(--panel, #fff);
  border: 1px solid var(--accent-tint-2, #c8f5df);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(14, 27, 17, 0.06);
  padding: 1.125rem;
}

.hs-cn-form--new {
  border: 1px solid var(--hair, var(--border, #e6eae3));
  box-shadow: none;
  background: #fff;
}

.hs-cn-form__hd {
  font-size: 0.9375rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.hs-cn-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hs-cn-form .hs-phone-skill-field .hs-input,
.hs-cn-form .hs-phone-skill-field textarea.hs-input {
  width: 100%;
  box-sizing: border-box;
}

.hs-cn-form .hs-phone-skill-field textarea.hs-input {
  min-height: 88px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.hs-cn-only-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--ink-2, #3d4f42);
  margin: 0.5rem 0 1rem;
  cursor: pointer;
}

.hs-cn-only-row input {
  margin-top: 3px;
}

.hs-cn-form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hs-cn-form__foot .hs-btn svg {
  width: 16px;
  height: 16px;
}

.hs-cn-form__del {
  margin-left: auto;
  color: #c0392b !important;
}

@media (max-width: 720px) {
  .hs-cn-rec-grid {
    grid-template-columns: 1fr;
  }

  .hs-cn-row__top {
    flex-direction: column;
    align-items: stretch;
  }

  .hs-cn-me-what {
    width: 100%;
  }

  .hs-cn-me-seg > button .hs-cn-me-label {
    font-size: 12px;
  }

  .hs-cn-rec__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

:is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-save-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, #e8eeec);
  text-align: right;
}

@media (max-width: 720px) {
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-identity-row,
  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row__fields {
    grid-template-columns: 1fr;
  }

  :is(#ws-panel-agent-training, #ws-panel-agent-settings) .hs-personal-row--sub {
    grid-template-columns: 1fr;
  }
}

.hs-agent-history {
  margin-top: 1rem;
}

.hs-agent-history__toggle {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3, #6b7f72);
  list-style: none;
}

.hs-agent-history__toggle::-webkit-details-marker {
  display: none;
}

.hs-agent-history__toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.hs-agent-history[open] > .hs-agent-history__toggle::before {
  transform: rotate(90deg);
}

.hs-agent-history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.hs-agent-history__empty {
  margin: 0;
}

.hs-agent-history__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-muted, #f4f7f5);
}

.hs-agent-history__meta {
  flex: 1;
  min-width: 0;
}

.hs-agent-history__time {
  font-size: 0.75rem;
  color: var(--ink-3, #6b7f72);
  margin-bottom: 2px;
}

.hs-agent-history__summary {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink, #0e1b11);
  line-height: 1.4;
}

.hs-agent-history__badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.6875rem;
  color: var(--ink-3, #6b7f72);
  font-weight: 500;
}

.hs-agent-history__actions {
  flex-shrink: 0;
}

/* Collapsible test/preview (phone, chat, SMS) — flat like Conversations rows */
.hs-agent-preview-card {
  margin: var(--hs-space-3) 0 0;
  border: none;
  border-top: 1px solid var(--hair, #e7edea);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.hs-agent-preview-card__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.hs-agent-preview-card__summary::-webkit-details-marker {
  display: none;
}

.hs-agent-preview-card__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #111);
}

.hs-agent-preview-card__hint {
  margin: 0;
}

.hs-agent-preview-card__body {
  padding: 0 12px 14px;
  min-width: 0;
}

.hs-agent-preview-card[open] > .hs-agent-preview-card__summary {
  border-bottom: 1px solid var(--hair, #e7edea);
}

.hs-agent-title-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.hs-agent-title-toggle .hs-chatbot-preview-section__title,
.hs-agent-title-toggle h3 {
  margin: 0;
  min-width: 0;
}

.hs-agent-title-toggle .hs-chatbot-preview-section__actions {
  margin-left: auto;
}

.hs-chatbot-preview-section__head.hs-agent-title-toggle {
  padding: 4px 0 12px;
  flex-wrap: nowrap;
}

.hs-chatbot-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin-bottom: 8px;
}

.hs-email-agent-tools {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Email keeps legacy class alias for any leftover markup */
#ws-panel-agent-email .hs-email-page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

#ws-panel-agent-email .hs-email-page-head > div:first-child,
#ws-panel-agent-email .hs-email-page-head .hs-portal-section__head-row {
  min-width: 0;
}

#ws-panel-agent-email .hs-email-page-head .hs-portal-section__title {
  width: 100%;
  padding: 0;
  text-align: left;
}

#ws-panel-agent-email .hs-email-page-head .sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2, var(--hs-neutral-600));
  line-height: 1.4;
}

.hs-email-gmail-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel-2, #fafcfb);
  border: 1px solid var(--hair, #e7edea);
}

.hs-email-gmail-banner strong {
  display: block;
  font-size: 0.9rem;
}

.hs-email-gmail-banner p {
  margin: 0;
  color: var(--ink-2, #4a5c52);
  font-size: 0.82rem;
  line-height: 1.35;
}

.hs-email-gmail-banner--warn {
  background: rgba(180, 90, 20, 0.08);
  border-color: rgba(180, 90, 20, 0.25);
}

#ws-panel-agent-email .hs-email-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: var(--panel, #fff);
}

#ws-panel-agent-email .hs-email-health > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 11px 14px;
  color: var(--ink-2, #4a5c52);
  font-size: 0.76rem;
  white-space: nowrap;
}

#ws-panel-agent-email .hs-email-health > span + span {
  border-left: 1px solid var(--hair, #e7edea);
}

#ws-panel-agent-email .hs-email-health strong {
  color: var(--ink, #17231d);
  font-size: inherit;
}

#ws-panel-agent-email .hs-email-health i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-3, #89958f);
}

#ws-panel-agent-email .hs-email-health i.is-ready {
  background: var(--accent-2, #0d8a58);
}

#ws-panel-agent-email .hs-email-agent-connect {
  margin: 0;
}

#ws-panel-agent-email .hs-ptool-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
}

#ws-panel-agent-email .hs-email-connected-accounts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin-top: 8px;
  padding-top: 4px;
}

#ws-panel-agent-email .hs-email-connected-accounts > header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #17231d);
}

#ws-panel-agent-email .hs-email-account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ws-panel-agent-email .hs-email-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: var(--panel, #fff);
}

#ws-panel-agent-email .hs-email-account-item__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--panel-2, #fafcfb);
  overflow: hidden;
}

#ws-panel-agent-email .hs-email-account-item__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

#ws-panel-agent-email .hs-email-account-item__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

#ws-panel-agent-email .hs-email-account-item__copy strong {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink, #17231d);
  word-break: break-all;
}

#ws-panel-agent-email .hs-email-account-item__copy .sub {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-2, #4a5c52);
}

#ws-panel-agent-email .hs-email-connected-accounts > .hs-btn {
  align-self: flex-start;
}

/* Separated cards — match chatbot Appearance / phone tools */
#ws-panel-agent-email .hs-ptool {
  overflow: hidden;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 16px;
  background: var(--panel, #fff);
  box-shadow: none;
}

#ws-panel-agent-email .hs-ptool__head {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

#ws-panel-agent-email .hs-ptool__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 12px 14px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}

#ws-panel-agent-email .hs-ptool__row.is-btn {
  flex: 1 1 auto;
  cursor: pointer;
}

#ws-panel-agent-email .hs-ptool__row.is-btn:hover {
  background: var(--panel-2, #fafcfb);
}

#ws-panel-agent-email .hs-ptool__tile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  color: var(--accent-2, #0d7a4e);
  background: var(--accent-tint, #e6fbf1);
}

#ws-panel-agent-email .hs-ptool__tile svg {
  width: 16px;
  height: 16px;
}

#ws-panel-agent-email [data-email-tool="autoreply"] .hs-ptool__tile {
  color: #76520d;
  background: #fbf3df;
}

#ws-panel-agent-email [data-email-tool="drafts"] .hs-ptool__tile {
  color: #315e91;
  background: #eaf2fb;
}

#ws-panel-agent-email .hs-ptool__txt {
  min-width: 0;
  flex: 1;
}

#ws-panel-agent-email .hs-ptool__name,
#ws-panel-agent-email .hs-ptool__sub {
  display: block;
}

#ws-panel-agent-email .hs-ptool__name {
  font-size: 0.91rem;
  font-weight: 700;
}

#ws-panel-agent-email .hs-ptool__sub {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-2, #4a5c52);
  font-size: 0.77rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ws-panel-agent-email .hs-ptool__chev {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--ink-3, #7a8a82);
  transition: transform 160ms ease;
}

#ws-panel-agent-email .hs-ptool.is-open .hs-ptool__chev {
  transform: rotate(180deg);
}

#ws-panel-agent-email .hs-ptool__state {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-right: 14px;
}

#ws-panel-agent-email .hs-ptool__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

#ws-panel-agent-email .hs-ptool.is-open .hs-ptool__body {
  grid-template-rows: 1fr;
}

#ws-panel-agent-email .hs-ptool__body > div {
  overflow: hidden;
}

#ws-panel-agent-email .hs-ptool__body-in {
  padding: 16px;
  border-top: 1px solid var(--hair, #e7edea);
}

#ws-panel-agent-email .hs-ptool__blab {
  margin-bottom: 12px;
  color: var(--ink-2, #4a5c52);
  font-size: 0.82rem;
  line-height: 1.5;
}

#ws-panel-agent-email .hs-email-alert-intro {
  margin-bottom: 14px;
}

#ws-panel-agent-email .hs-email-alert-intro p {
  margin: 4px 0 10px;
  color: var(--ink-2, #4a5c52);
  font-size: 0.8rem;
  line-height: 1.45;
}

#ws-panel-agent-email .hs-email-alert-options {
  overflow: hidden;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
}

#ws-panel-agent-email .hs-email-alert-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 10px 12px;
  cursor: pointer;
}

#ws-panel-agent-email .hs-email-alert-option + .hs-email-alert-option {
  border-top: 1px solid var(--hair, #e7edea);
}

#ws-panel-agent-email .hs-email-alert-option:hover {
  background: var(--panel-2, #fafcfb);
}

#ws-panel-agent-email .hs-email-alert-option strong,
#ws-panel-agent-email .hs-email-alert-option small {
  display: block;
}

#ws-panel-agent-email .hs-email-alert-option strong {
  font-size: 0.84rem;
}

#ws-panel-agent-email .hs-email-alert-option small {
  margin-top: 2px;
  color: var(--ink-3, #7a8a82);
  font-size: 0.73rem;
  line-height: 1.35;
}

#ws-panel-agent-email .hs-email-alert-option input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--accent-2, #0d8a58);
}

#ws-panel-agent-email .hs-email-alert-custom {
  margin-top: 16px;
}

#ws-panel-agent-email .hs-email-alert-custom .hs-email-field-label {
  margin-bottom: 7px;
}

#ws-panel-agent-email .hs-email-alert-custom .hs-email-source-chips {
  margin-bottom: 9px;
}

#ws-panel-agent-email .hs-email-load-error {
  padding: 22px;
  border: 1px solid rgba(180, 70, 40, 0.25);
  border-radius: 16px;
  background: rgba(180, 70, 40, 0.06);
}

#ws-panel-agent-email .hs-email-load-error p {
  margin: 5px 0 14px;
  color: var(--ink-2, #4a5c52);
}

#ws-panel-agent-email .hs-email-disabled-card {
  margin: 0;
}

#ws-panel-agent-email .hs-email-loading {
  gap: 12px;
}

#ws-panel-agent-email .hs-email-loading__bar,
#ws-panel-agent-email .hs-email-loading__line,
#ws-panel-agent-email .hs-email-loading__card {
  border-radius: 12px;
  background: var(--panel-2, #f3f6f4);
  animation: hs-email-loading-pulse 1.4s ease-in-out infinite;
}

#ws-panel-agent-email .hs-email-loading__bar {
  height: 58px;
}

#ws-panel-agent-email .hs-email-loading__line {
  width: 72%;
  height: 13px;
}

#ws-panel-agent-email .hs-email-loading__card {
  height: 66px;
}

@keyframes hs-email-loading-pulse {
  50% { opacity: 0.55; }
}

.hs-email-sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-email-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
}

.hs-email-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair, #e7edea);
  background: #fff;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  color: inherit;
}

.hs-email-source-chip:hover {
  border-color: rgba(157, 54, 54, 0.3);
  background: rgba(157, 54, 54, 0.05);
}

.hs-email-source-chip span:last-child {
  opacity: 0.55;
  font-size: 1rem;
  line-height: 1;
}

.hs-email-sources-empty {
  margin: 0;
}

.hs-email-source-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hs-email-source-add .hs-email-field {
  flex: 1;
  min-width: 0;
}

.hs-email-field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}

.hs-email-field:focus {
  outline: none;
  border-color: var(--accent-2, #0d8a58);
  box-shadow: 0 0 0 3px rgba(13, 138, 88, 0.11);
}

.hs-email-field-label {
  display: block;
  margin-bottom: -4px;
  font-size: 0.78rem;
  font-weight: 700;
}

.hs-email-field-label span {
  color: var(--ink-3, #7a8a82);
  font-weight: 500;
}

.hs-email-field-help {
  margin: -3px 0 0;
  font-size: 0.75rem;
}

.hs-email-research-btn {
  align-self: flex-start;
}

.hs-email-tone {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hs-email-tone-opt {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair, #e7edea);
  background: #fff;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  color: inherit;
}

.hs-email-tone-opt.is-selected {
  border-color: rgba(15, 61, 46, 0.45);
  background: rgba(15, 61, 46, 0.08);
  font-weight: 600;
}

.hs-email-tone-opt:focus-visible {
  outline: 2px solid var(--accent-2, #0d8a58);
  outline-offset: 2px;
}

.hs-email-tone-custom {
  margin-top: 8px;
}

.hs-email-source-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.hs-email-source-suggest {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--hair, #e7edea);
  background: #fff;
  cursor: pointer;
}

.hs-email-source-suggest .sub {
  display: block;
  margin-top: 2px;
}

.hs-email-credit-line {
  margin: 8px 0 12px;
  font-size: 0.92rem;
}

.hs-email-draft-ready {
  margin-top: 4px;
}

#ws-panel-agent-email .hs-email-risk-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(154, 105, 19, 0.22);
  border-radius: 12px;
  background: rgba(154, 105, 19, 0.06);
  font-size: 0.8rem;
}

#ws-panel-agent-email .hs-email-risk-note span {
  color: var(--ink-2, #4a5c52);
}

#ws-panel-agent-email .hs-email-config-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 10px;
}

#ws-panel-agent-email .hs-email-config-step p {
  margin: 2px 0 0;
  font-size: 0.77rem;
}

#ws-panel-agent-email .hs-email-step-number {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--panel-3, #eef2ec);
  font-size: 0.72rem;
  font-weight: 700;
}

#ws-panel-agent-email .hs-email-mention-label {
  margin-top: 14px;
  margin-bottom: 6px;
}

#ws-panel-agent-email .hs-email-confirm {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(154, 105, 19, 0.3);
  border-radius: 12px;
  background: #fffaf0;
}

#ws-panel-agent-email .hs-email-confirm p {
  margin: 5px 0 12px;
  color: var(--ink-2, #4a5c52);
  font-size: 0.8rem;
  line-height: 1.45;
}

#ws-panel-agent-email .hs-email-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#ws-panel-agent-email .hs-email-confirm__warning {
  color: #9a5f13;
  font-weight: 700;
}

@media (max-width: 899px) {
  #ws-panel-agent-email .hs-email-page-head {
    display: none;
  }
}

@media (max-width: 699px) {
  #ws-panel-agent-email .hs-email-health {
    grid-template-columns: 1fr;
  }

  #ws-panel-agent-email .hs-email-health > span {
    min-height: 40px;
  }

  #ws-panel-agent-email .hs-email-health > span + span {
    border-top: 1px solid var(--hair, #e7edea);
    border-left: 0;
  }

  #ws-panel-agent-email .hs-ptool__row {
    min-height: 64px;
    padding: 12px 8px 12px 12px;
    gap: 10px;
  }

  #ws-panel-agent-email .hs-ptool__state {
    padding-right: 10px;
  }

  #ws-panel-agent-email .hs-ptool__sub {
    max-width: 180px;
  }

  #ws-panel-agent-email .hs-ptool__body-in {
    padding: 14px;
  }

  .hs-email-source-add {
    align-items: stretch;
  }

  .hs-email-source-add .hs-btn,
  .hs-email-research-btn {
    min-height: 44px;
  }

  .hs-email-tone-opt {
    min-height: 44px;
  }
}

.hs-st-request-integrations {
  margin-top: 1.75rem;
  min-width: 0;
  max-width: 560px;
  padding: 16px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: var(--panel, #fff);
}

.hs-st-request-integrations .hs-ptool__phead h3 {
  font-size: 1rem;
}

.hs-st-request-integrations .hs-ptool__phead .sub {
  margin-top: 2px;
  font-size: 0.8rem;
}

.hs-st-request-integrations__search {
  margin-top: 10px;
}

.hs-st-request-integrations__search .hs-input {
  width: 100%;
  min-height: 40px;
}

.hs-st-request-integrations__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--accent-tint-border, #d4ebe4);
  border-radius: 10px;
  background: var(--accent-tint, #f4faf8);
}

.hs-st-request-int__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hs-st-request-int__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
  background: #fff;
}

.hs-st-request-int__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.hs-st-request-int__name {
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-st-request-int__type {
  font-size: 0.7rem;
  color: var(--hs-text-muted, #66756d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ws-panel-agent-phone,
#ws-panel-agent-email,
#ws-panel-agent-chatbot,
#ws-panel-agent-sms,
#ws-panel-conversations,
#ws-panel-scheduled-tasks {
  max-width: 100%;
}

#ws-panel-agent-phone,
#ws-panel-agent-email,
#ws-panel-conversations,
#ws-panel-scheduled-tasks {
  overflow-x: clip;
}

/* Each of those four panels is exactly as wide as the wallet cards it holds —
   panel and card share the same left and right edge to the pixel. So the clip
   above cut every card's lift at its own border box: a hard vertical line down
   both sides of the stack, and the only shadow still showing was the wedge
   outside each rounded corner, which read as four grey blobs per card.

   The clip stays — it is what keeps a wide table or a long unbroken string
   from scrolling the page sideways (ef2d26a). The clip EDGE moves: 60px of
   padding pushes it out of the shadow's way, and an equal negative margin puts
   the content box back exactly where it was, so no card shifts by a pixel.
   `max-width` has to grow by both gutters or the cap claws the 120px straight
   back out of the content.

   `overflow-clip-margin` is the property built for this and does not work
   here: Chromium only honours it when BOTH axes clip, and these panes need
   `overflow-y: visible` — an open card's popover shadow pools below it.

   Desktop only, because the clip is desktop-only in practice: the mobile block
   further down this file already replaces it with `overflow: visible` on the
   phone pane and `overflow-x: hidden` on the rest, and pins `max-width: 100%`
   at a specificity this rule would have to fight to no purpose.

   60px clears the widest lift a card takes — `--hs-glass-lift-strong` is
   `0 12px 34px`, an open card takes `--hs-elevation-popover` — and is the same
   60px the first card's `clip-path` uses in `hs-bridge-components.css`.
   `.hs-portal-main` still clips at the 36px page gutter, so the slack cannot
   reach the viewport edge. */
@media (min-width: 900px) {
  #ws-panel-agent-phone,
  #ws-panel-agent-email,
  #ws-panel-conversations,
  #ws-panel-scheduled-tasks {
    --hs-pane-shadow-gutter: 60px;
    padding-inline: var(--hs-pane-shadow-gutter);
    margin-inline: calc(-1 * var(--hs-pane-shadow-gutter));
    max-width: calc(100% + 2 * var(--hs-pane-shadow-gutter));
  }
}

#ws-panel-agent-phone .hs-phone-tools-section,
#ws-panel-agent-phone .hs-ptool-list,
#ws-panel-agent-phone .hs-chatbot-preview-frame,
#ws-panel-agent-chatbot,
#ws-panel-agent-sms {
  min-width: 0;
}

@media (max-width: 899px) {
  .hs-chatbot-demo,
  .hs-chatbot-stage {
    min-height: 0;
    padding: 12px 0;
  }

  .hs-chatbot-preview-section__head {
    padding-left: 0;
    padding-right: 0;
  }

  /* The wrapper owns the sideways scroll — it carries `hs-seg-scroll`, and the
     carve-out in hs-bridge-components.css gives the raised thumb the room its
     lift and shadow need. The track itself must NOT scroll: its scroll box
     clips 2px inside the pill, which erases the shadow and raises a phantom
     vertical scrollbar beside the tabs. */
  .hs-agents-subtabs-wrap {
    overflow-x: auto;
    max-width: 100%;
    touch-action: pan-x pan-y;
  }

  /* Clip horizontal bleed for most agent panes; Chatbot/SMS/Phone hero must paint under the toolbar. */
  .hs-portal-section--agents:not(:has(#ws-panel-agent-chatbot.is-active)):not(:has(#ws-panel-agent-sms.is-active)):not(:has(#ws-panel-agent-phone.is-active)),
  .hs-portal-section--agents:not(:has(#ws-panel-agent-chatbot.is-active)):not(:has(#ws-panel-agent-sms.is-active)):not(:has(#ws-panel-agent-phone.is-active))
    .hs-portal-section__body--agents,
  .hs-portal-content-pane:not(#ws-panel-agent-chatbot):not(#ws-panel-agent-sms):not(#ws-panel-agent-phone) {
    overflow-x: hidden;
    max-width: 100%;
  }

  .hs-portal-section--agents:has(#ws-panel-agent-chatbot.is-active),
  .hs-portal-section--agents:has(#ws-panel-agent-sms.is-active),
  .hs-portal-section--agents:has(#ws-panel-agent-phone.is-active),
  .hs-portal-section--agents:has(#ws-panel-agent-chatbot.is-active) .hs-portal-section__body--agents,
  .hs-portal-section--agents:has(#ws-panel-agent-sms.is-active) .hs-portal-section__body--agents,
  .hs-portal-section--agents:has(#ws-panel-agent-phone.is-active) .hs-portal-section__body--agents,
  #ws-panel-agent-chatbot.is-active,
  #ws-panel-agent-sms.is-active,
  #ws-panel-agent-phone.is-active {
    overflow: visible;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-voice-orb,
  .hs-callcard.live .call-id span:last-child,
  .hs-ws-toast,
  .typing i {
    animation: none !important;
    transition: none !important;
  }
}

/* Chatbot theme toggle + brand accent hints */
.hs-chatbot-theme-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(14, 27, 17, 0.06);
  gap: 2px;
}
.hs-chatbot-theme-toggle__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5750;
  cursor: pointer;
}
.hs-chatbot-theme-toggle__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hs-chatbot-theme-toggle__opt.is-on {
  background: #fff;
  color: var(--hs-everglade-900, #0e1b11);
  box-shadow: 0 1px 4px rgba(14, 27, 17, 0.12);
}
.hs-chatbot-accent-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.hs-chatbot-accent-hints--inline {
  margin-top: 0;
  margin-left: 4px;
}
.hs-chatbot-accent-hint {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(14, 27, 17, 0.18);
  background: var(--hint, #43e5a4);
  cursor: pointer;
  padding: 0;
}
.hs-chatbot-look-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
  margin-top: 4px;
}
.hs-chatbot-look-row .hs-chatbot-theme-toggle-field {
  flex: 0 0 auto;
}
.hs-chatbot-look-row .hs-chatbot-colors-row {
  flex: 1 1 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0;
}
.hs-chatbot-copy-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hs-chatbot-header-tag {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 27, 17, 0.03);
  border: 1px solid rgba(14, 27, 17, 0.06);
}
.hs-chatbot-header-tag__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.hs-chatbot-header-preview {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e7edea;
}
.hs-chatbot-header-preview__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hs-chatbot-header-preview__identity img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e8eee9;
}
.hs-chatbot-header-preview__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hs-chatbot-header-preview__titles strong {
  font-size: 15px;
  line-height: 1.2;
  color: #17241c;
}
.hs-chatbot-header-preview__identity.is-solo .hs-chatbot-header-preview__titles strong {
  font-size: 17px;
}
.hs-chatbot-header-preview__titles .sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(14, 27, 17, 0.55);
}
.hs-chatbot-copy-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .hs-chatbot-copy-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hs-chatbot-copy-grid .hs-chatbot-field--message,
  .hs-chatbot-copy-grid .hs-chatbot-voice-row {
    grid-column: 1 / -1;
  }
}

/* Keep launcher preview labels visible on mobile in chatbot settings */
.hs-chatbot-launcher-grid .julia-chat-fab__label,
.hs-chatbot-fab-option .julia-chat-fab__label {
  display: inline !important;
}
.hs-chatbot-launcher-grid .julia-chat-fab__label-short,
.hs-chatbot-fab-option .julia-chat-fab__label-short {
  display: none !important;
}

@media (max-width: 520px) {
  /* Prefer short label in tight settings preview so the avatar stays inside the pill */
  .hs-chatbot-launcher-grid .julia-chat-fab--pill .julia-chat-fab__label {
    display: none !important;
  }
  .hs-chatbot-launcher-grid .julia-chat-fab--pill .julia-chat-fab__label-short {
    display: inline !important;
  }
}

/* A2P full page + compact form */
#ws-panel-agent-sms:has(#ws-a2p-fullpage) .hs-agent-page-head {
  display: none;
}

.hs-a2p-fullpage__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.hs-a2p-fullpage__head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.hs-a2p-section--compact .hs-chatbot-editor__grid {
  gap: 12px 12px;
}
.hs-a2p-section--compact .hs-chatbot-field {
  margin: 0;
}
.hs-a2p-section--compact .hs-chatbot-field label {
  font-size: 0.8125rem;
  margin-bottom: 4px;
}
.hs-a2p-section--compact .hs-chatbot-field .hs-input {
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
  font-size: 0.9375rem;
  line-height: 1.4;
  border-radius: 10px;
}
.hs-a2p-section--compact .hs-chatbot-field select.hs-input {
  height: 40px;
  min-height: 40px;
  padding: 0 34px 0 12px;
  font-size: 0.9375rem;
}
/* Textareas size to their content — JS autogrow tops this up past 3 lines. */
.hs-a2p-section--compact .hs-chatbot-field textarea.hs-input {
  height: auto;
  min-height: 4.9rem;
  line-height: 1.5;
  /* auto, not hidden: if a reflow outruns the autogrow, scroll beats clipping. */
  overflow-y: auto;
  resize: vertical;
}
.hs-a2p-section--compact .hs-chatbot-field-hint {
  margin: 4px 0 0;
  font-size: 0.78rem;
}
.hs-a2p-section--compact h4 {
  margin: 20px 0 8px;
  font-size: 0.9rem;
}
/* Only the first group hugs the top — the campaign group needs air above it. */
.hs-a2p-section--compact .hs-a2p-fields > h4:first-child {
  margin-top: 0;
}
.hs-a2p-lead {
  margin: 0 0 10px;
}

.hs-a2p-help-blurb {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(67, 229, 164, 0.12);
  color: var(--hs-everglade-900, #0e1b11);
  font-size: 0.875rem;
  line-height: 1.4;
}

.hs-a2p-pricing {
  margin: 0.75rem 0;
  padding: 0.75rem 0.85rem;
}
.hs-a2p-unlock-wrap {
  margin-top: 12px;
}
.hs-a2p-unlock.hs-btn {
  min-height: 36px;
  box-shadow: none !important;
}
.hs-a2p-unlock__sub {
  font-size: 0.85rem;
  color: #5a6b62;
}

/* Richer conversation rows / bubbles */
.hs-activity-row--action {
  box-shadow: inset 3px 0 0 #d97706;
  background: rgba(217, 119, 6, 0.05);
}
.hs-activity-row--action:hover,
.hs-activity-row--action.hs-activity-row--selected {
  background: rgba(217, 119, 6, 0.09);
}
.hs-activity-row--handled {
  box-shadow: inset 3px 0 0 #16a34a;
}
.hs-chat-msg--action .hs-chat-bubble {
  border: 1px solid rgba(217, 119, 6, 0.35);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.12);
}
.hs-chat-msg--handled .hs-chat-bubble {
  border: 1px solid rgba(22, 163, 74, 0.28);
}
.hs-chat-action-banner,
.hs-chat-handled-banner {
  display: inline-flex;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hs-chat-action-banner {
  background: rgba(217, 119, 6, 0.14);
  color: #9a3412;
}
.hs-chat-handled-banner {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}
.hs-st-report-shortcode {
  margin: 8px 0 0;
}

/* User dashboard — chatbot workspace */
#ws-panel-agent-chatbot .hs-chatbot-preview-section {
  overflow: hidden;
  border-radius: 20px;
}


#ws-panel-agent-chatbot .hs-chatbot-preview-section > .hs-chatbot-publish-notice {
  margin: 0;
  padding: 10px 26px;
  color: #80520c;
  border-bottom: 1px solid #f1dfb9;
  background: #fff9eb;
  font-size: 0.8125rem;
}


#ws-panel-agent-chatbot .hs-chatbot-preview-toolbar {
  max-width: none;
  margin-bottom: 10px;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-frame {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(14, 27, 17, 0.12), 0 2px 6px rgba(14, 27, 17, 0.05);
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--inline .julia-chat-panel {
  height: clamp(500px, 68vh, 620px);
  min-height: 500px;
  max-height: 620px;
}

#ws-panel-agent-chatbot .hs-chatbot-tools {
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 26px 28px 28px;
  background: var(--panel, #fff);
}

#ws-panel-agent-chatbot .hs-chatbot-tools__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

#ws-panel-agent-chatbot .hs-chatbot-tools__head h3 {
  margin: 0;
  color: var(--ink, #17241c);
  font-size: 1.05rem;
}


#ws-panel-agent-chatbot .hs-chatbot-appearance {
  gap: 10px;
}


#ws-panel-agent-chatbot .hs-chatbot-tools .hs-chatbot-embed-block {
  margin-top: 18px;
  padding: 18px 2px 0;
}

#ws-panel-agent-chatbot .hs-chatbot-tools .hs-chatbot-embed__head h3 {
  font-size: 0.9rem;
}

@media (max-width: 1100px) {

  #ws-panel-agent-chatbot .hs-chatbot-tools {
    padding: 20px;
  }
}

@media (max-width: 899px) {
  #ws-panel-agent-chatbot .hs-chatbot-preview-section {
    overflow: visible;
    border-radius: 0;
  }


  #ws-panel-agent-chatbot .hs-chatbot-preview-section > .hs-chatbot-publish-notice {
    margin: 12px 0 0;
    padding: 11px 13px;
    border: 1px solid #f1dfb9;
    border-radius: 12px;
  }


  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--inline .julia-chat-panel {
    height: min(52dvh, 480px);
    min-height: 380px;
    max-height: 480px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-tools {
    width: 100%;
    padding: 0;
    background: transparent;
  }

  #ws-panel-agent-chatbot .hs-chatbot-tools__head {
    margin: 0 2px 12px;
  }


  #ws-panel-agent-chatbot .hs-chatbot-tools .hs-chatbot-embed-block {
    margin-top: 14px;
    padding: 16px 2px 0;
  }

  #ws-panel-agent-chatbot .hs-chatbot-tools .hs-chatbot-embed__head {
    align-items: flex-start;
    gap: 12px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-tools .hs-chatbot-embed__head .hs-btn {
    min-height: 44px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__head {
    flex-wrap: nowrap;
  }

  #ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__head .hs-ptool__state {
    width: auto;
    justify-content: flex-end;
    padding: 0 4px 0 0;
  }

  #ws-panel-agent-chatbot .hs-chatbot-enable__actions .hs-btn {
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  #ws-panel-agent-chatbot .hs-chatbot-tools__head h3 {
    max-width: 14rem;
  }

  #ws-panel-agent-chatbot .hs-chatbot-launcher-grid {
    display: block;
    gap: 0;
  }

  #ws-panel-agent-chatbot .hs-chatbot-launcher-option {
    min-width: 0;
    padding: 8px 0;
  }

  #ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage {
    overflow: visible;
  }

  #ws-panel-agent-chatbot .hs-chatbot-brand-row {
    align-items: center;
  }

  #ws-panel-agent-chatbot .hs-chatbot-colors-row {
    grid-template-columns: 1fr 1fr;
  }
}


/* Chatbot review refinements — single-column, direct widget preview */
#ws-panel-agent-chatbot .hs-chatbot-page-content {
  width: 100%;
  margin: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-page-content > .hs-chatbot-publish-notice {
  margin: 0 0 16px;
  padding: 11px 14px;
  color: #80520c;
  border: 1px solid #f1dfb9;
  border-radius: 12px;
  background: #fff9eb;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview {
  padding: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview__head,
#ws-panel-agent-chatbot .hs-chatbot-tools__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview__head h2,
#ws-panel-agent-chatbot .hs-chatbot-tools__head h2 {
  margin: 0;
  color: var(--ink, #17241c);
  font-size: 1rem;
  font-weight: 700;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview__head .sub,
#ws-panel-agent-chatbot .hs-chatbot-tools__head .sub {
  margin: 4px 0 0;
  font-size: 0.8rem;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview > .hs-chatbot-preview-wrap {
  width: min(100%, 440px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 20px;
  background: var(--panel, #fff);
  box-shadow: 0 12px 34px rgba(14, 27, 17, 0.09);
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--inline .julia-chat-panel {
  height: 480px;
  min-height: 480px;
  max-height: 480px;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
}

#ws-panel-agent-chatbot .hs-chatbot-tools {
  width: 100%;
  margin-top: 34px;
  padding: 0;
  background: transparent;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance {
  gap: 12px;
}


#ws-panel-agent-chatbot .hs-chatbot-launcher-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option {
  min-width: 0;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__label {
  font-size: 0.78rem;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage {
  align-items: center;
  justify-content: flex-end;
  min-height: 56px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 14px;
  background: var(--panel-2, #fafcfb);
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control .hs-chatbot-brand-row__avatar {
  width: 56px;
  height: 56px;
  margin: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control .hs-chatbot-brand-row__fields {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control .hs-chatbot-field__label {
  margin: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control__hint {
  margin: 0;
  font-size: 0.75rem;
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control .hs-btn {
  margin: 0;
  min-height: 40px;
}

#ws-panel-agent-chatbot .hs-chatbot-look-row {
  align-items: flex-start;
}

#ws-panel-agent-chatbot .hs-chatbot-tools .hs-chatbot-embed-block {
  margin-top: 22px;
  padding-top: 22px;
}

@media (max-width: 899px) {
  #ws-panel-agent-chatbot .hs-chatbot-page-content {
    width: 100%;
  }

  #ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--inline .julia-chat-panel {
    height: min(48dvh, 400px);
    min-height: 340px;
    max-height: 400px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-tools {
    margin-top: 28px;
  }

}

@media (max-width: 560px) {
  #ws-panel-agent-chatbot .hs-chatbot-launcher-grid {
    grid-template-columns: 1fr;
  }

  #ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage {
    min-height: 88px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-photo-control {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-photo-control .hs-chatbot-brand-row__avatar {
    width: 52px;
    height: 52px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-photo-control .hs-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Chatbot presentation refinements */
#ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-direct-preview__head {
  display: block;
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 0 auto 18px;
  text-align: center;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-direct-preview__head h2,
#ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-direct-preview__head h2 {
  margin: 0;
  color: #0a0a0a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-stage {
  position: relative;
  width: 100%;
  padding: 42px 24px;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background-color: #c9d8ef;
  background-image: url('/assets/chatbot-preview-backdrop.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-wrap {
  width: min(100%, 420px);
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-actions {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-actions .hs-btn {
  min-height: 36px;
}

/* No accent-painted header here. The preview used to force the header green —
   first on every theme, then on Frosted alone — so what the owner previewed was
   never what their visitors saw. Each theme now paints its own header, and
   Frosted matches workspace Julia. */

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel__foot {
  margin: 0;
  padding: 10px 12px 8px;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-field .hs-chatbot-field__label,
#ws-panel-agent-chatbot .hs-chatbot-color-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Light / Dark / Frosted tabs. The track hugs its labels and splits into equal
   columns on its own (hs-bridge-components.css, `.sgc` = inline-grid +
   fit-content), so this only spaces the label and hint above it. */
#ws-panel-agent-chatbot .hs-chatbot-theme-field {
  margin: 0 0 18px;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-field .hs-chatbot-field__label {
  margin-bottom: 2px;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-field .hs-chatbot-field-hint {
  margin: 0 0 8px;
  font-size: 0.75rem;
}

#ws-panel-agent-chatbot .hs-chatbot-look-row {
  align-items: flex-start;
}

#ws-panel-agent-chatbot .hs-chatbot-colors-block {
  flex: 1 1 220px;
  min-width: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-colors-block .hs-chatbot-field-hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
}

#ws-panel-agent-chatbot .hs-chatbot-header-text-field > .hs-chatbot-field__label {
  display: block;
  margin: 0 0 8px;
}

#ws-panel-agent-chatbot .hs-chatbot-header-text-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#ws-panel-agent-chatbot .hs-chatbot-header-text-controls .hs-input {
  flex: 1 1 auto;
  min-width: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-header-text-controls .hs-agent-switch {
  flex: 0 0 auto;
}

#ws-panel-agent-chatbot .hs-chatbot-header-text-field .hs-chatbot-field-hint {
  margin: 6px 0 0;
}

#ws-panel-agent-chatbot .hs-chatbot-header-text-controls .hs-input:disabled {
  opacity: 0.55;
}

#ws-panel-agent-chatbot .hs-chatbot-field--message > label {
  margin-bottom: 2px;
}

#ws-panel-agent-chatbot .hs-chatbot-field--message .hs-chatbot-field-hint {
  margin: 0 0 8px;
  font-size: 0.75rem;
}

#ws-panel-agent-chatbot .hs-chatbot-field--message textarea.hs-chatbot-message-input {
  min-height: 3.75rem;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section {
  padding: 20px 0;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section:first-child {
  padding-top: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section:last-child {
  padding-bottom: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section + .hs-chatbot-editor-section {
  border-top: 1px solid var(--hair, #e7edea);
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section__head {
  margin-bottom: 14px;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section__head strong,
#ws-panel-agent-chatbot .hs-chatbot-editor-section__head span {
  display: block;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section__head strong {
  font-size: 0.9rem;
}

#ws-panel-agent-chatbot .hs-chatbot-editor-section__head .sub {
  margin-top: 2px;
  font-size: 0.77rem;
}


/* Chatbot review follow-up — stage preview, icon radios, appearance drawer */
#ws-panel-agent-chatbot .hs-chatbot-preview-stage {
  padding: 36px 20px 32px;
  border: 0;
  border-radius: 24px;
  /* visible so the panel drop-shadow isn’t clipped under the widget */
  overflow: visible;
  background-color: #c9d8ef;
  background-image: url('/assets/chatbot-preview-backdrop.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-wrap {
  position: relative;
  width: min(100%, 420px);
  min-height: 480px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: normal;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: visible;
  background: transparent;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab.julia-chat-fab--stage-enter {
  animation: julia-chat-stage-fab-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Minimized stage cue: subtle arrow + label pointing at the launcher.
   Sit clear of the fab (58px + 18px inset) and its pulse ring so the arrow
   isn’t covered by the chat icon. */
#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint {
  position: absolute;
  right: 112px;
  bottom: 34px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(200px, calc(100% - 140px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a9690;
  cursor: pointer;
  text-align: right;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage:has(.julia-chat-fab--pill) .julia-chat-stage-hint {
  /* Pill fab is wider — keep hint to its left with a clear gap */
  right: min(240px, calc(100% - 28px));
  bottom: 36px;
  max-width: min(180px, calc(100% - 260px));
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint[hidden] {
  display: none !important;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint__text {
  font-family: var(--font, var(--hs-font-ui, Inter, system-ui, sans-serif));
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: #8a9690;
  text-shadow: none;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint__arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 14px;
  color: #9aa6a0;
  opacity: 0.9;
  animation: julia-chat-stage-hint-nudge 2.8s ease-in-out infinite;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage:not(.is-open) .julia-chat-fab__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: rgba(67, 167, 229, 0.34);
  transform: scale(0.86);
  animation: julia-chat-stage-fab-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab .julia-chat-fab__avatar-wrap {
  z-index: 2;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab .julia-chat-panel-avatar,
#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab__label,
#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab__label-short {
  position: relative;
  z-index: 1;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage.is-open .julia-chat-fab__pulse {
  display: none;
}

@keyframes julia-chat-stage-fab-pulse {
  0%,
  100% {
    transform: scale(0.86);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.18;
  }
}

@keyframes julia-chat-stage-hint-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    /* Nudge toward the fab without overlapping it */
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage:not(.is-open) .julia-chat-fab__pulse,
  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint__arrow {
    animation: none;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage:not(.is-open) .julia-chat-fab__pulse {
    opacity: 0.28;
    transform: scale(1);
  }
}

@media (max-width: 560px) {
  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-stage-hint {
    right: 100px;
    bottom: 28px;
    max-width: min(140px, calc(100% - 120px));
  }
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab--compact {
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Liquid glass, same recipe as the workspace dock disc and the live launcher
   (--hs-dock-* / --julia-chat-glass-*). Sizing is preview-only; the glass is
   not — a softer blur here made the preview icon a different object. */
#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab--compact .julia-chat-panel-avatar {
  width: 54px;
  height: 54px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab--compact .julia-chat-panel-avatar img,
#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab--pill .julia-chat-panel-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab--pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  overflow: visible;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab--pill .julia-chat-panel-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  overflow: hidden;
  border-radius: 50%;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage .julia-chat-fab[hidden] {
  display: none !important;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage .julia-chat-panel {
  position: absolute;
  right: 12px;
  bottom: 12px;
  box-sizing: border-box;
  display: flex;
  width: min(420px, calc(100% - 24px));
  height: 480px;
  min-height: 480px;
  max-height: 480px;
  border: 1px solid #dbe4df !important;
  border-radius: 20px;
  /* Match SMS wrap lift — soft under-card shadow that isn’t clipped by the stage */
  box-shadow:
    0 10px 28px rgba(14, 27, 17, 0.12),
    0 2px 6px rgba(14, 27, 17, 0.05);
  transform-origin: bottom right;
}

/* The hairline above is a light grey that reads as a halo around the dark
   theme. Same job, dark-theme value. */
#ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage .julia-chat-panel--theme-dark {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

#ws-panel-agent-chatbot .julia-chat-dock--stage .julia-chat-voice-btn.is-slot-hidden {
  visibility: hidden;
  pointer-events: none;
}

#ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage .julia-chat-panel.julia-chat-panel--stage-enter {
  animation: julia-chat-stage-open 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel__thread-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel__foot {
  flex: 0 0 auto;
  padding: 10px 12px;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-minimize,
#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-minimize {
  display: inline-flex;
}

/* Light chrome for the header buttons — not on the dark theme, where a white
   pill with dark text sits on a near-black header. */
#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel:not(.julia-chat-panel--theme-dark) .julia-chat-header-action,
#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-header-action {
  border-color: rgba(14, 27, 17, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #0e1b11;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel:not(.julia-chat-panel--theme-dark) .julia-chat-header-action:hover,
#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-header-action:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #0e1b11;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel--theme-dark .julia-chat-header-action {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #f0fff3;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-panel--theme-dark .julia-chat-header-action:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #f0fff3;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-header-action:disabled,
#ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-header-action:disabled {
  opacity: 0.55;
  cursor: wait;
}

#ws-panel-agent-chatbot .hs-chatbot-preview-actions {
  display: flex;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 2px;
}

@keyframes julia-chat-stage-open {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes julia-chat-stage-fab-in {
  from {
    opacity: 0;
    transform: scale(0.84);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#ws-panel-agent-chatbot .hs-chatbot-appearance,
#ws-panel-agent-chatbot .hs-chatbot-enable {
  width: 100%;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool {
  overflow: hidden;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 16px;
  background: var(--panel, #fff);
}

#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__head {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__head .hs-ptool__row.is-btn {
  flex: 1 1 auto;
  min-width: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__head .hs-ptool__state {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: none;
  gap: 10px;
  padding-right: 4px;
}

#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__head .hs-ptool__chev--expand {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 0;
  margin-right: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3, #6b776f);
  cursor: pointer;
}

#ws-panel-agent-chatbot .hs-chatbot-enable__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__row,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__row.is-btn:hover,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__row.is-btn:hover {
  background: var(--panel-2, #fafcfb);
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__tile,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #315e91;
  background: #e8f2fc;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__tile svg,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__tile svg {
  width: 16px;
  height: 16px;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__txt,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__txt {
  flex: 1 1 auto;
  min-width: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__name,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__name {
  display: block;
  font-size: 0.91rem;
  font-weight: 700;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__sub,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-3, #6b776f);
}

#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__sub.is-off {
  color: #b45309;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__chev,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--ink-3, #6b776f);
  transition: transform 160ms ease;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__chev svg,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__chev svg {
  width: 16px;
  height: 16px;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool.is-open .hs-ptool__chev,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool.is-open .hs-ptool__chev {
  transform: rotate(180deg);
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__body,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool.is-open .hs-ptool__body,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool.is-open .hs-ptool__body {
  grid-template-rows: 1fr;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__body > div,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__body > div {
  overflow: hidden;
}

#ws-panel-agent-chatbot .hs-chatbot-appearance .hs-ptool__body-in,
#ws-panel-agent-chatbot .hs-chatbot-enable .hs-ptool__body-in {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--hair, #e7edea);
}

#ws-panel-agent-chatbot .hs-chatbot-appearance__content,
#ws-panel-agent-chatbot .hs-chatbot-enable__content {
  width: 100%;
}

#ws-panel-agent-chatbot .hs-chatbot-enable__hint {
  margin: 0 0 10px;
}

#ws-panel-agent-chatbot .hs-chatbot-enable__snippet,
#ws-panel-agent-chatbot .hs-chatbot-enable textarea#ws-chatbot-snippet {
  display: block;
  width: 100%;
  min-height: 168px;
  height: 168px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--hair, #e7edea);
  border-radius: 12px;
  background: var(--panel-2, #f7faf8);
  color: var(--ink, #17241c);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

#ws-panel-agent-chatbot .hs-chatbot-embed-capture {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#ws-panel-agent-chatbot .hs-chatbot-enable .hs-chatbot-embed-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-grid {
  display: block;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option,
#ws-panel-agent-chatbot .hs-chatbot-launcher-option.is-selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 220px);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 0 10px 44px;
  border: 0;
  border-bottom: 1px solid var(--hair, #e7edea);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option:last-child {
  border-bottom: 0;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__label {
  font-size: 0.875rem;
  font-weight: 650;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 56px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab {
  /* relative, NOT static: the glass pill paints itself with an absolutely
     positioned ::before at inset 0. Static handed that ::before to the next
     positioned ancestor — the option row — so a full-row sheet of blur(30px)
     washed the row's own label and radio dial into an unreadable smear
     (2026-08 audit, UI-026). Relative keeps the fab in flow, which is all
     static was doing here, and pins the glass to the pill. */
  position: relative;
  transform: none !important;
  pointer-events: none;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--compact {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Same liquid glass as the stage preview and the live launcher. */
#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--compact .julia-chat-panel-avatar {
  width: 48px;
  height: 48px;
  padding: 2.5px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--compact .julia-chat-panel-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--julia-chat-accent-text, #0e1b11);
  background: var(--julia-chat-accent, #43e5a4);
  overflow: visible;
  box-shadow:
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill .julia-chat-panel-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill .julia-chat-panel-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill .julia-chat-fab__label,
#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill .julia-chat-fab__label-short {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill.julia-chat-fab--glass {
  isolation: isolate;
  background: transparent;
  border: none;
  box-shadow:
    0 10px 28px rgba(14, 27, 17, 0.14),
    0 2px 8px rgba(14, 27, 17, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#ws-panel-agent-chatbot .hs-chatbot-launcher-option__stage .julia-chat-fab--pill.julia-chat-fab--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--julia-chat-glass-bg, rgba(255, 255, 255, 0.36));
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  pointer-events: none;
  overflow: hidden;
}

#ws-panel-agent-chatbot .hs-chatbot-photo-control {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Chatbot appearance controls */
#ws-panel-agent-chatbot .hs-chatbot-photo-control {
  grid-template-columns: 58px minmax(0, 1fr);
}

#ws-panel-agent-chatbot .hs-chatbot-avatar-edit {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

#ws-panel-agent-chatbot .hs-chatbot-avatar-edit .hs-chatbot-brand-row__avatar {
  width: 58px;
  height: 58px;
  transition: filter 160ms ease, transform 160ms ease;
}

#ws-panel-agent-chatbot .hs-chatbot-avatar-edit__icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #17241c;
  box-shadow: 0 3px 9px rgba(14, 27, 17, 0.2);
}

/* The smallest rung of the scale. 11px was below the size at which a stroked
   glyph stays legible — the pencil read as a smudge on the avatar. */
#ws-panel-agent-chatbot .hs-chatbot-avatar-edit__icon svg {
  width: 14px;
  height: 14px;
}

#ws-panel-agent-chatbot .hs-chatbot-avatar-edit:hover .hs-chatbot-brand-row__avatar {
  filter: brightness(0.92);
  transform: scale(0.98);
}

#ws-panel-agent-chatbot .hs-chatbot-avatar-edit:focus-visible {
  outline: 3px solid rgba(67, 229, 164, 0.45);
  outline-offset: 3px;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  width: 100%;
  gap: 8px;
  padding: 0;
  background: transparent;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt {
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  color: var(--ink-2, #3d4a42);
  border: 1px solid var(--hair, #dfe5e1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 27, 17, 0.03);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt:hover {
  border-color: #afbbb4;
  transform: translateY(-1px);
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt.is-on {
  color: var(--hs-everglade-900, #0e1b11);
  border-color: #20a36a;
  box-shadow: 0 0 0 2px rgba(67, 229, 164, 0.22), 0 5px 14px rgba(14, 27, 17, 0.08);
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt:has(input:focus-visible) {
  outline: 3px solid rgba(67, 229, 164, 0.38);
  outline-offset: 2px;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__preview {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  width: 100%;
  height: 34px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(14, 27, 17, 0.09);
  border-radius: 7px;
  background: #f5f7f6;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__preview i {
  display: block;
  width: 66%;
  height: 4px;
  border-radius: 999px;
  background: #d7ded9;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__preview i:last-child {
  width: 42%;
  margin-left: auto;
  background: var(--hs-aqua, #43e5a4);
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt--dark .hs-chatbot-theme-toggle__preview {
  border-color: #17241c;
  background: #17241c;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt--dark .hs-chatbot-theme-toggle__preview i {
  background: #68756d;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt--dark .hs-chatbot-theme-toggle__preview i:last-child {
  background: var(--hs-aqua, #43e5a4);
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__opt--glass .hs-chatbot-theme-toggle__preview {
  border-color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(223, 239, 255, 0.54)),
    #dcecff;
  box-shadow: inset 0 1px 0 #fff;
}

#ws-panel-agent-chatbot .hs-chatbot-theme-toggle__name {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 899px) {
  /*
   * Full-bleed hero starts under the Handshake toolbar (behind title glass)
   * so the header fade reads against the backdrop on first paint.
   * Chatbot/SMS widget size stays fixed — only the backdrop box grows upward.
   *
   * Ancestors must not clip: overflow-x:hidden forces overflow-y:auto in browsers
   * and was cutting the pulled-up backdrop into a crisp white line.
   */
  .hs-portal-section--agents:has(#ws-panel-agent-chatbot.is-active),
  .hs-portal-section--agents:has(#ws-panel-agent-sms.is-active),
  .hs-portal-section--agents:has(#ws-panel-agent-phone.is-active),
  .hs-portal-section--agents:has(#ws-panel-agent-chatbot.is-active) .hs-portal-section__body--agents,
  .hs-portal-section--agents:has(#ws-panel-agent-sms.is-active) .hs-portal-section__body--agents,
  .hs-portal-section--agents:has(#ws-panel-agent-phone.is-active) .hs-portal-section__body--agents,
  #ws-panel-agent-chatbot.is-active,
  #ws-panel-agent-sms.is-active,
  #ws-panel-agent-phone.is-active,
  #ws-panel-agent-chatbot .hs-agent-pane,
  #ws-panel-agent-sms .hs-agent-pane,
  #ws-panel-agent-phone .hs-agent-pane,
  #ws-panel-agent-chatbot .hs-chat-messaging-tab,
  #ws-panel-agent-sms .hs-chat-messaging-tab,
  #ws-panel-agent-chatbot .hs-chatbot-page-content,
  #ws-panel-agent-sms .hs-sms-page-content,
  #ws-panel-agent-phone .hs-phone-page-content,
  #ws-panel-agent-chatbot .hs-chatbot-direct-preview,
  #ws-panel-agent-sms .hs-chatbot-direct-preview,
  #ws-panel-agent-phone .hs-phone-direct-preview {
    overflow: visible;
  }

  #ws-panel-agent-chatbot .hs-agent-pane,
  #ws-panel-agent-sms .hs-agent-pane,
  #ws-panel-agent-phone .hs-agent-pane {
    padding-top: 0;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage,
  #ws-panel-agent-sms .hs-sms-preview-stage,
  #ws-panel-agent-phone .hs-phone-preview-stage {
    /* Prefer live chrome; fallback includes safe-area so first paint clears the toolbar. */
    --ws-agent-hero-topbar: var(
      --ws-mobile-topbar-h,
      calc(52px + env(safe-area-inset-top, 0px))
    );
    --ws-agent-hero-chrome: var(
      --ws-mobile-chrome-h,
      calc(var(--ws-agent-hero-topbar) + 72px)
    );
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    /* Grow backdrop upward under toolbar + title; widget stays put via matching padding. */
    margin: calc(-1 * var(--ws-agent-hero-chrome)) 0 0;
    padding: calc(var(--ws-agent-hero-chrome) + 12px) 0 16px;
    overflow: hidden;
    border-radius: 0;
    background-position: center top;
    background-size: cover;
    transform: translateX(-50%);
  }

  /*
   * Phone mobile: the colour is a compact full-bleed wash under the toolbar
   * that carries the collapsed call card and fades out beneath it.
   */
  #ws-panel-agent-phone .hs-phone-preview-stage {
    --ws-phone-hero-band: calc(var(--ws-agent-hero-chrome) + 130px);
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: calc(var(--ws-agent-hero-chrome) + 16px);
    padding-bottom: 16px;
    overflow: visible;
    background-color: transparent;
    background-image: none;
  }

  #ws-panel-agent-phone .hs-phone-preview-stage::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 0;
    width: 100vw;
    height: var(--ws-phone-hero-band);
    transform: translateX(-50%);
    pointer-events: none;
    background-color: #c9d8ef;
    background-image: url('/assets/phone-preview-backdrop.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    /* Soft exit so the colour washes into the page under the callcard top */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      transparent 100%
    );
  }

  #ws-panel-agent-phone .hs-phone-preview-stage .hs-phone-preview-card {
    width: calc(100% - 32px);
    max-width: none;
    margin: 0 16px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-direct-preview__head,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-direct-preview__head {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 16px 12px;
    box-sizing: border-box;
    text-align: center;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-wrap,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-preview-wrap {
    width: calc(100% - 32px);
    min-height: 352px;
    height: 352px;
    max-height: 352px;
    margin-right: 16px;
    margin-left: 16px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-wrap .julia-chat-dock--stage,
  #ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage .julia-chat-panel,
  #ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-dock--inline,
  #ws-panel-agent-sms .hs-sms-preview-stage .julia-chat-dock--inline .julia-chat-panel {
    min-height: 352px;
    height: 352px;
    max-height: 352px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-direct-preview .julia-chat-dock--stage .julia-chat-panel {
    width: 100%;
    right: 0;
    bottom: 0;
    border-radius: 18px;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--mobile-fixed-open:not(.julia-chat-dock--stage-mobile-fullscreen) .julia-chat-minimize,
  #ws-panel-agent-sms .julia-chat-dock--mobile-fixed-open:not(.julia-chat-dock--stage-mobile-fullscreen) .julia-chat-minimize,
  #ws-panel-agent-chatbot .julia-chat-dock--mobile-fixed-open .julia-chat-fab,
  #ws-panel-agent-sms .julia-chat-dock--mobile-fixed-open .julia-chat-fab,
  #ws-panel-agent-chatbot .julia-chat-dock--mobile-fixed-open .julia-chat-stage-hint,
  #ws-panel-agent-sms .julia-chat-dock--mobile-fixed-open .julia-chat-stage-hint {
    display: none !important;
  }

  #ws-panel-agent-chatbot .julia-chat-dock--mobile-fixed-open .julia-chat-panel,
  #ws-panel-agent-sms .julia-chat-dock--mobile-fixed-open .julia-chat-panel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  #ws-panel-agent-chatbot .hs-chatbot-preview-stage .hs-chatbot-preview-actions,
  #ws-panel-agent-sms .hs-sms-preview-stage .hs-chatbot-preview-actions {
    padding: 0 16px;
  }

  #ws-panel-agent-chatbot .hs-chatbot-photo-control {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  #ws-panel-agent-chatbot .hs-chatbot-theme-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Inline SMS preview uses the same mobile composer takeover as the staged chatbot. */
@media (max-width: 760px) {
  body.julia-chat-composer-fullscreen #ws-panel-agent-sms .hs-sms-preview-stage,
  body.julia-chat-composer-fullscreen #ws-panel-agent-sms .hs-chatbot-preview-wrap,
  body.julia-chat-composer-fullscreen #ws-panel-agent-sms .hs-chatbot-direct-preview {
    overflow: visible !important;
  }

  .julia-chat-dock--inline.julia-chat-dock--stage-mobile-fullscreen {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: rgba(10, 14, 12, 0.32) !important;
    z-index: 12050 !important;
    /* top/height come from JS visualViewport so the keyboard is respected */
  }

  .julia-chat-dock--inline.julia-chat-dock--stage-mobile-fullscreen .julia-chat-dock__shadow-room {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
  }

  .julia-chat-dock--inline.julia-chat-dock--stage-mobile-fullscreen .julia-chat-minimize {
    display: flex !important;
  }

  .julia-chat-dock--inline.julia-chat-dock--stage-mobile-fullscreen .julia-chat-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    border: 1px solid rgba(219, 228, 223, 0.95) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow:
      0 18px 50px rgba(14, 27, 17, 0.22),
      0 2px 8px rgba(14, 27, 17, 0.08) !important;
  }
}

/* ---- Conversations filter: labelled, like the one on Tasks ---------------
   The label collapses to the glyph on narrow screens, where the dock and the
   header are already competing for the same row. */
.hs-conv-filters-toggle__label {
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
}

.hs-tasks-filter-button__label {
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
}

@media (max-width: 760px) {
  .hs-conv-filters-toggle__label,
  .hs-tasks-filter-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- Inline task links: 24px hit area ------------------------------------
   These render as 19px text links inside a task card, under WCAG 2.5.8's 24px
   minimum target. The look is unchanged; only the area you can hit grows. */
.hs-tasks-source-link {
  min-height: var(--hs-size-target-min);
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Close and remove buttons — one icon, two sizes

   Seventeen of these were the TEXT character `×` (U+00D7, multiplication sign)
   sized with `font-size`. That has three problems no amount of tuning fixes:
   the glyph is optically off-centre in its em box, its stroke weight comes from
   the UI font rather than from the 2px the rest of the icon set uses, and its
   size is expressed in a unit unrelated to the icon scale — so these controls
   were 20px, 18px, 16px and 13px "icons" with no relationship to each other.

   They are all the same stroked path now, at 16px inside a control and 14px
   inside a chip or tag, matching the 14/16/20/24 scale.
   ============================================================ */
:is(.hs-tasks-modal__close, .hs-cf-portal__close, .hs-personal-tag-modal__close,
  .hs-adm-agent-ix__sheet-close, .call-idle-close, .hs-conv-sheet__close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:is(.hs-tasks-modal__close, .hs-cf-portal__close, .hs-personal-tag-modal__close,
  .hs-adm-agent-ix__sheet-close, .call-idle-close) svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Inside a tag, a chip or a field affordance the control itself is ~20px, so
   the glyph takes the small rung. */
:is(.hs-knowledge-tag__delete, .julia-chat-attach-preview__remove,
  .hs-tasks-composer__due-clear) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:is(.hs-knowledge-tag__delete, .julia-chat-attach-preview__remove,
  .hs-tasks-composer__due-clear) svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ============================================================
   Live call, without the takeover — 2026-08

   The centred modal over a scrim hid the one thing an owner is mid-call to
   tune: the Tools & settings list. Three states replace it, all holding the
   SAME mounted card so the session never drops:

     in-flow   the card in the strip where Call was clicked
     pill      the lander's mini call bar, morphing in when the card scrolls
               out of view (ws-minicall, ported from lander-v3)
     docked    #ws-voice-call-shell, now a bottom-right panel the page stays
               interactive beside — the expand chip or the pill opens it

   Mobile keeps its full-screen treatment for the docked state: on a phone the
   call IS the screen, and that was already right.
   ============================================================ */

/* ---- in-flow: the strip swaps its pill for the live card ---- */
.hs-phone-direct-preview.is-call-active .hs-phone-preview-stage[hidden] {
  display: none;
}

/* The pill this replaces is short and sits clear of its neighbours. The call
   card is tall, and its expand chip is pinned inside the top-right corner, so
   in place it lands against whatever is directly above — on this page the
   business-info banner. The live strip carries its own room. */
.hs-phone-direct-preview.is-call-active {
  padding-top: 24px;
  padding-bottom: 16px;
}

.hs-phone-direct-preview .hs-phone-voice-mount-home {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.hs-phone-direct-preview .hs-phone-voice-mount-home .hs-callcard {
  animation: hs-phone-card-expand-in 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

.hs-voice-expand-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(249, 250, 242, 0.22);
  border-radius: 50%;
  background: rgba(14, 27, 17, 0.55);
  color: #f9faf2;
  cursor: pointer;
}

.hs-voice-expand-chip:hover {
  background: rgba(14, 27, 17, 0.75);
}

.hs-voice-expand-chip:focus-visible {
  outline: 2px solid var(--hs-border-focus, #0b7350);
  outline-offset: 2px;
}

/* The docked panel already has room for the transcript — the chip would only
   offer to open what is open. */
#ws-voice-call-shell .hs-voice-expand-chip {
  display: none;
}

/* ---- docked: bottom-right panel, page interactive beside it ---- */
@media (min-width: 900px) {
  #ws-voice-call-shell {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 24px 24px 0;
    /* The page stays live: only the panel takes the pointer. */
    pointer-events: none;
  }

  #ws-voice-call-shell .ws-voice-shell__scrim {
    display: none;
  }

  #ws-voice-call-shell .ws-voice-shell__panel {
    pointer-events: auto;
    max-width: 420px;
    max-height: min(72dvh, 640px);
    filter: drop-shadow(0 24px 48px rgba(14, 27, 17, 0.28));
  }

  /* The close arrow floated over a dark scrim before; now it floats over the
     page, so it dresses light. It minimizes — ending lives in the card. */
  #ws-voice-call-shell .ws-voice-shell__close {
    border-color: rgba(14, 27, 17, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: #17241c;
  }
}

/* The scroll lock made sense under a modal; a docked panel must let the page
   scroll. Phones keep the lock — there the call still takes the screen. */
body.hs-ws-voice-modal-open,
html.hs-ws-voice-modal-open {
  overflow: auto;
}

@media (max-width: 899px) {
  body.hs-ws-voice-modal-open,
  html.hs-ws-voice-modal-open {
    overflow: hidden;
  }
}

/* ---- the mini call pill (ported from lander-v3's .minicall) ----
   Styles are a namespaced copy, not a shared file: the lander sheet carries a
   page of unrelated rules, and the pill's geometry here answers to the
   workspace chrome (mobile topbar, portal scroller), not the lander's. */
.ws-minicall {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  color: #f9faf2;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.ws-minicall[hidden] {
  display: none;
}

.ws-minicall-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: #0e1b11;
  box-shadow: 0 18px 40px -18px rgba(14, 27, 17, var(--mini-shadow, 0.65));
  transform-origin: 50% 50%;
  will-change: transform;
}

.ws-minicall-wave,
.ws-minicall-meta,
.ws-minicall-end {
  position: relative;
  z-index: 1;
  opacity: var(--mini-content, 1);
}

@media (min-width: 900px) {
  .ws-minicall {
    top: 16px;
    right: 24px;
    width: min(380px, calc(100vw - 48px));
  }
}

@media (max-width: 899px) {
  .ws-minicall {
    top: calc(max(48px, env(safe-area-inset-top, 0px) + 40px) + 8px);
    left: 16px;
    right: 16px;
  }
}

.ws-minicall-wave {
  --mini-gain: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}

.ws-minicall-wave span {
  --mini-floor: 0.22;
  --mini-peak: 1;
  display: block;
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: #43e5a4;
  transform: scaleY(var(--mini-floor));
  animation: wsMiniWave 1.1s ease-in-out infinite;
}

.ws-minicall-wave span:nth-child(2) { animation-delay: 0.13s; }
.ws-minicall-wave span:nth-child(3) { animation-delay: 0.27s; }
.ws-minicall-wave span:nth-child(4) { animation-delay: 0.4s; }

@keyframes wsMiniWave {
  0%, 100% { transform: scaleY(var(--mini-floor)); }
  50% { transform: scaleY(max(var(--mini-floor), calc(var(--mini-peak) * var(--mini-gain)))); }
}

.ws-minicall[data-call="connecting"] .ws-minicall-wave span {
  --mini-floor: 0.25;
  --mini-peak: 0.5;
  animation-duration: 1.8s;
  opacity: 0.6;
}

.ws-minicall[data-call="live"] .ws-minicall-wave span {
  --mini-floor: 0.3;
  --mini-peak: 0.62;
  animation-duration: 1.4s;
  opacity: 0.8;
}

.ws-minicall[data-call="agent"] .ws-minicall-wave span {
  --mini-peak: 1;
  animation-duration: 0.62s;
}

.ws-minicall[data-call="you"] .ws-minicall-wave span {
  --mini-peak: 0.88;
  animation-duration: 0.5s;
  background: #f9faf2;
}

.ws-minicall[data-call="you"] .ws-minicall-meta b {
  color: #f9faf2;
}

.ws-minicall[data-call="ended"] .ws-minicall-wave span {
  animation: none;
  transform: scaleY(0.22);
  background: rgba(249, 250, 242, 0.4);
}

.ws-minicall[data-call="ended"] .ws-minicall-meta b {
  color: rgba(249, 250, 242, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .ws-minicall-wave span { animation: none; transform: scaleY(0.4); }
  .ws-minicall-wave span:nth-child(2) { transform: scaleY(0.85); }
  .ws-minicall-wave span:nth-child(3) { transform: scaleY(0.6); }
  .ws-minicall-wave span:nth-child(4) { transform: scaleY(0.95); }
}

.ws-minicall-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.ws-minicall-meta b {
  font-family: var(--hs-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #43e5a4;
}

.ws-minicall-meta i {
  font-style: normal;
  font-family: var(--hs-font-ui);
  font-size: 14px;
  color: rgba(252, 251, 250, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-minicall-end {
  flex: none;
  padding: 7px 14px;
  border: 1px solid rgba(249, 250, 242, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #f9faf2;
  font-family: var(--hs-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ws-minicall-end:hover {
  background: rgba(226, 62, 62, 0.85);
  border-color: transparent;
}

/* ============================================================
   Chatbot & SMS — editor beside a live preview (2026-08)

   The widget preview used to float centred and full-width with the settings
   folded somewhere below it, which read as decoration. Wide screens now pair
   them: settings in the left column, the preview docked right and staying put
   (sticky) while the owner scrolls the controls that drive it. Below the
   breakpoint nothing here applies and the pages keep their vertical stack —
   preview first, settings after.

   CSS only: both pages already render one container with the preview section
   and the tools as siblings, so the grid re-seats what exists.
   ============================================================ */
@media (min-width: 1200px) {
  /* Both tracks are capped and the pair is centred, rather than letting the
     settings column absorb every spare pixel. At 1440 the old `1fr` gave it
     948px, so a 12-character "Button text" field spanned the whole screen and
     each launcher option put its label at the far left and its preview at the
     far right — one control reading as two. 680px is a form measure; the
     preview column is sized to the widget it holds. */
  #ws-panel-agent-chatbot .hs-chatbot-page-content,
  #ws-panel-agent-sms .hs-sms-page-content {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(340px, 440px);
    justify-content: center;
    gap: 20px;
    align-items: start;
    /* Must equal the preview's sticky `top` below. The preview pane is the
       first thing in the scroll port, so sticky engages at rest and drags it
       down by that offset — without matching padding here the settings column
       starts higher than the preview and the two columns never line up. */
    padding-top: 16px;
  }

  /* The A2P banner concerns the whole page, not one column. */
  #ws-panel-agent-sms .hs-sms-page-content > .hs-sms-status-card {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #ws-panel-agent-chatbot .hs-chatbot-page-content > .hs-chatbot-direct-preview {
    grid-column: 2;
    grid-row: 1;
  }

  /* The stacked layout below this breakpoint puts the settings under the
     preview and needs that top margin. Side by side it is pure misalignment —
     "Appearance & greeting" has to start on the preview frame's top edge. */
  #ws-panel-agent-chatbot .hs-chatbot-page-content > .hs-chatbot-tools {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }

  #ws-panel-agent-sms .hs-sms-page-content > .hs-chatbot-direct-preview {
    grid-column: 2;
    grid-row: 2;
  }

  /* The customize card (details element) takes the working column. */
  #ws-panel-agent-sms .hs-sms-page-content > details,
  #ws-panel-agent-sms .hs-sms-page-content > .hs-portal-panel-card {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  /* Two ids, because the stacked-layout margin is set at that weight too. */
  #ws-panel-agent-sms .hs-sms-page-content > #ws-sms-agent-settings-panel {
    margin-top: 0;
  }

  /* The preview pins while the left column scrolls. Sticky needs the row to be
     taller than the preview, which the settings column always is once a fold
     is open.

     No frame. This column briefly carried a white panel with browser-chrome
     dots and a "Live preview — updates as you edit" caption, which put three
     nested surfaces around one widget: fake window, stage, chat panel. The
     widget is already a white card, so the frame behind it read as an empty
     box with a title bar. `hs-bridge-components.css` had removed the inner
     stage for exactly that reason ("the page wash is the backdrop now") and
     this reintroduced the same mistake one level up. The widget floats on the
     wash, like the phone, social and email previews. */
  :is(#ws-panel-agent-chatbot, #ws-panel-agent-sms)
    :is(.hs-chatbot-page-content, .hs-sms-page-content) > .hs-chatbot-direct-preview {
    position: sticky;
    top: 16px;
    margin: 0;
  }

  :is(#ws-panel-agent-chatbot, #ws-panel-agent-sms)
    :is(.hs-chatbot-page-content, .hs-sms-page-content) > .hs-chatbot-direct-preview .hs-chatbot-preview-stage {
    min-height: 480px;
  }

  /* Chat card top edge == settings card top edge.

     Both columns start on the same grid line, but the widget then sat lower
     than "Appearance & greeting" / "Customize" and the pair read as accidental.
     The stage adds 24px of top padding (hs-bridge-components.css,
     `padding-block`, !important). Cancelling all of it is right on SMS, where
     the dock is inline. On chatbot the panel is absolutely positioned
     `bottom: 12px` in a box its own height, so it already floats 12px above the
     stage — leave 12px there and the two offsets cancel. */
  #ws-panel-agent-chatbot .hs-chatbot-page-content > .hs-chatbot-direct-preview .hs-chatbot-preview-stage {
    padding-block-start: 12px !important;
  }

  #ws-panel-agent-sms .hs-sms-page-content > .hs-chatbot-direct-preview .hs-sms-preview-stage {
    padding-block-start: 0 !important;
  }
}