/* ============================================================================
   Talk to a human — a contact-card window wrapping a real HubSpot form
   (portal 7937560, form 1d14ef76-d84a-4263-b5e5-035b421b11ad), embedded via
   HubSpot's "developer" raw-HTML mode (js.hsforms.net/.../developer/*.js +
   a .hs-form-html div) specifically because that mode renders plain form
   markup instead of an iframe, so it can be restyled here to match the
   supplied mockup. Every selector is prefixed .talk- / #win-talk; the
   .hsfc-* rules target HubSpot's own field/button classes (confirmed by
   inspecting the live embed — not guessed) and win on specificity alone
   (#win-talk .hsfc-Button beats HubSpot's own [data-hsfc-id=Renderer]
   .hsfc-Button), no !important needed.
   ========================================================================== */

#win-talk {
  /* 60vh is a FLOOR (min-height), not a fixed height: at normal zoom the
     content fits inside it exactly, but a min rather than a fixed height
     means that if content ever needs more room (e.g. larger browser zoom,
     which scales this content's fixed px sizes but not the vh-based
     formula), the window grows taller instead of clipping or scrolling. */
  min-height: 60vh;
  min-width: 330px;
  max-width: 420px;
  cursor: default;      /* only the title bar drags */
  touch-action: auto;
}

.talk-chrome {
  --talk-line: #000000;
  --talk-bar: #F5F4F0;
  --talk-bg: #ECECEC;
  --talk-ink: #3A1440;
  --talk-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 12px;
  background: var(--talk-bg);
  border: 1px solid var(--talk-line);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* No overflow:hidden here (unlike flyer/folder/video-viewer): the phone
     field's country dropdown needs to escape the card when open. Corners
     still read as rounded because each opaque child rounds its own edge
     to match (.talk-titlebar below), not because the chrome clips them. */
}

/* --- Title bar --- */
.talk-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 40px;
  padding: 0 12px;
  background: var(--talk-bar);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--talk-line);
  cursor: grab;
}
.talk-chrome .talk-titlebar:active { cursor: grabbing; }

.talk-lights { display: flex; gap: 6px; flex: none; }
.talk-lights i {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--talk-line);
}
.talk-lights i:nth-child(1) { background: #FF8875; }
.talk-lights i:nth-child(2) { background: #FFE78E; }
.talk-lights i:nth-child(3) { background: #94E9BC; }

.talk-name {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.talk-spacer { width: 45px; flex: none; }

/* --- Body --- */
.talk-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: if content is ever taller than the box (e.g. a
     short viewport shrinks #win-talk's height below the content's natural
     size), centering would overflow equally in both directions — including
     upward, into the title bar. flex-start keeps the top pinned so any
     overflow only ever spills off the bottom. */
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  /* 32px of breathing room above the illustration, 40px inset on the other
     three sides — the full-width fields span the card minus this inset. */
  padding: 32px 40px 40px;
  text-align: center;
}

.talk-illustration { width: 80px; height: auto; margin: 0 0 26px; flex: none; }
/* Inactive variant illustrations (talk.js toggles the hidden attribute).
   Explicit rule per the pllm lesson: an element's own display can beat the
   UA's [hidden] rule, so never rely on the attribute alone. */
.talk-illustration[hidden] { display: none; }
/* The Sponsored-Ad mark is now the padlocked plum + AI-SECURE lockup, which
   is TALLER than wide (115x144) — the reverse of the 124x66 wordmark it
   replaced, whose 110px width existed to stop it rendering small. Sizing by
   height keeps it in line with the other marks instead of towering over them. */
.talk-illustration[data-talk-illo="plum"] { width: auto; height: 104px; }
/* The closing-the-doc mark is the only landscape one (152x115), so the shared
   80px width would render it ~60px tall — visibly the runt beside marks that
   stand 65-98px. Widened until its height lands in that band. */
.talk-illustration[data-talk-illo="closing"] { width: 104px; }

.talk-title {
  font-family: var(--talk-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  line-height: 1.2;
  color: var(--talk-ink);
  margin-bottom: 5px;
}
.talk-title em { font-style: italic; font-weight: 500; }

.talk-sub {
  font-size: 14px;
  line-height: 1.35;
  color: var(--talk-ink);
  margin-bottom: 40px;
}

.talk-hsform { width: 100%; }

/* ---------- HubSpot form overrides ---------- */
#win-talk .hsfc-Form { width: 100%; }
/* padding: 0 kills HubSpot's default 40px inner padding
   (--hsf-default-background__padding) so the fields span the full card. */
#win-talk .hsfc-Step__Content { display: flex; flex-direction: column; gap: 14px; padding: 0; }

/* HubSpot's own default styles put a 20px margin-bottom on every .hsfc-Row
   (stacking with the flex gap above, doubling the visible spacing) and a
   separate 40px margin-top on the button's wrapper row — reset both so the
   gap above is the only thing controlling field spacing. The button row gets
   no extra margin: the 14px gap (+ the button's own 2px margin-top) is the
   whole space between the phone field and the button, per user request. */
#win-talk .hsfc-Row { margin-bottom: 0; }
#win-talk .hsfc-NavigationRow { margin-top: 0; }
/* The NavigationRow also holds an Alerts div above the button that carries a
   20px margin even while empty — collapse it only when empty so a real
   submission alert still gets its spacing. */
#win-talk .hsfc-NavigationRow__Alerts:empty { margin: 0; }

/* Every field ships an empty label (no text) — this form is placeholder-driven. */
#win-talk .hsfc-FieldLabel { display: none; }

#win-talk .hsfc-TextInput {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: #EFEFEF;
  border: 1px solid var(--talk-line);
  border-radius: 6px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #000;
}
#win-talk .hsfc-TextInput::placeholder { color: #6B6B6B; }

#win-talk .hsfc-NumberInput { display: block; width: 100%; }

/* Phone field is a compound widget (country flag/caret + the tel input
   itself); the wrapper carries the bordered-box look and the inner input
   is reset to blend into it, rather than doubling the border. */
#win-talk .hsfc-PhoneInput {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 10px;
  background: #EFEFEF;
  border: 1px solid var(--talk-line);
  border-radius: 6px;
}
#win-talk .hsfc-PhoneInput .hsfc-TextInput {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: none;
  background: transparent;
}
/* HubSpot ships this as its own light-blue, gray-bordered "chip" (own
   background/border/border-radius/10px padding) — reset all of it so the
   flag+caret sit flush against the field's own left edge and blend into
   its background instead of reading as a separate control. */
#win-talk .hsfc-PhoneInput__FlagAndCaret {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

#win-talk .hsfc-ErrorAlert {
  text-align: left;
  font-size: 10px;
  color: #C81E3A;
  margin-top: -3px;
}

#win-talk .hsfc-Button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 2px;
  background: var(--plum-red);
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
#win-talk .hsfc-Button:hover { opacity: 0.92; }

/* ---------- Modal backdrop (inserted/removed by talk.js) ---------- */
/* z 8500 sits above every normal window (the platform's dynamic z counter
   starts at 100) but below the dock (9000) and topbar (9500): the desktop
   blurs behind the form while the dock and topbar stay sharp and usable.
   talk.js pins #win-talk itself to 8600 while open, just above this. */
.talk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: talk-backdrop-in 200ms ease-out;
}
@keyframes talk-backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .talk-backdrop { animation: none; }
}

/* ============================================================================
   Mobile (<=767px) — interior only. css/mobile.css already turns #win-talk
   into a bottom sheet (position, height, max-height, .talk-chrome's rounded
   top corners) and hides .talk-lights globally; this block only reflows the
   sheet's own content for a ~355px-wide card.
   ========================================================================== */
@media (max-width: 767px) {
  /* Balanced the now-hidden traffic-light cluster on desktop; with the
     lights gone (css/mobile.css), keep it out of flow so .talk-name centers. */
  .talk-spacer { display: none; }

  /* The mobile card floats above the dock's peeking band (css/mobile.css
     positions #win-talk), so all four corners round. .talk-chrome has no
     overflow:hidden (the HubSpot country dropdown must escape) — corners
     are drawn by the opaque children, so both need matching radii. */
  .talk-titlebar { border-radius: 16px 16px 0 0; }

  .talk-body {
    padding: 24px 20px 28px;
    /* Lets a tall form (illustration + copy + full HubSpot form) scroll
       inside the sheet instead of overflowing past its max-height. */
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
  }

  .talk-title {
    font-size: 22px;
  }
}