/* ============================================================
   СП ВАНДА, chat widget (modern 2024 style)
   ============================================================ */

.vanda-chat-launcher,
.vanda-chat-window {
  --vanda-green: #014396;
  --vanda-green-light: #064EA1;
  --vanda-green-dark: #012F6B;
  --vanda-accent: #E3001B;     /* VANDA red accent (price / main CTA) */
  --vanda-bg: #f6f6f2;
  --vanda-text: #1a1a1a;
  --vanda-muted: #6b6b6b;
  --vanda-border: #e8e8e2;
  --vanda-card-bg: #ffffff;
  --vanda-radius: 18px;
  --vanda-radius-sm: 12px;
  --vanda-shadow-launcher: 0 12px 32px rgba(1, 67, 150, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
  --vanda-shadow-window: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ---------- Host-site CSS isolation ----------
   The widget is embedded into third-party sites (e.g. Bitrix templates) that
   ship VERY aggressive global selectors (`* { margin/line-height !important }`,
   `button { display:block; width:100%; float:left; position:static !important }`,
   `img { max-width; border !important }`, `div { text-align:center }`, ...).

   Two-layer defence:
   1. A comprehensive NON-important reset on the three top-level containers
      (`.vanda-teaser`, `.vanda-chat-launcher`, `.vanda-chat-window`) AND all
      their descendants (`* `). It neutralises host inheritance and host
      element-level rules that are NOT !important (the common case). It is
      declared BEFORE every widget class rule, so the widget's own class styles
      (same or higher specificity, later in source) always win.
   2. Point `!important` on layout-critical properties (positioning, flex
      containers, avatar sizing, the teaser × button) so a host rule such as
      `button { position: static !important }` cannot break the widget. Those
      live next to the components they protect, further down this file. */

.vanda-teaser,
.vanda-teaser *,
.vanda-chat-launcher,
.vanda-chat-launcher *,
.vanda-chat-window,
.vanda-chat-window * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  float: none;
  /* `inherit`, not `left`. A literal value here still beats a host `div {
     text-align: center }` (that rule is weaker), but it also lands on every
     descendant and therefore overrides the value inherited from our OWN
     containers — silently killing every `text-align: center` the widget sets
     on a wrapper (the confirm modal, the lead-form success panel). `inherit`
     defeats the host rule just as well and keeps our cascade intact; the three
     roots re-anchor the chain to `left` immediately below. */
  text-align: inherit;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  vertical-align: baseline;
  list-style: none;
  text-indent: 0;
  word-spacing: normal;
}

/* The roots anchor the inherited text-align, so nothing on the host page can
   leak an alignment into the widget through inheritance. */
.vanda-teaser,
.vanda-chat-launcher,
.vanda-chat-window {
  text-align: left;
}

/* Descendants inherit the widget font; containers set their own below. */
.vanda-teaser *,
.vanda-chat-launcher *,
.vanda-chat-window * {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

.vanda-chat-launcher,
.vanda-chat-window {
  font-family: -apple-system, "Segoe UI", "SF Pro Display", BlinkMacSystemFont, "Inter",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vanda-text);
}

/* Neutralise host `img`/`video` element rules (e.g. `img { max-width:40px;
   border:3px solid red !important }`) that would otherwise shrink card photos
   and slap borders on the consultant avatar. Component rules below re-assert
   the exact sizes they need with their own !important where it is critical. */
.vanda-teaser img,
.vanda-teaser video,
.vanda-chat-launcher img,
.vanda-chat-launcher video,
.vanda-chat-window img,
.vanda-chat-window video {
  max-width: none !important;
  border: none !important;
}

/* Buttons + form elements: kill UA + host-site defaults */
.vanda-chat-window button,
.vanda-chat-window input,
.vanda-chat-window textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}
.vanda-chat-window button:focus-visible {
  outline: 2px solid var(--vanda-green);
  outline-offset: 2px;
}

/* Typography reset inside the widget, Bitrix may have global margins */
.vanda-chat-window p,
.vanda-chat-window h1,
.vanda-chat-window h2,
.vanda-chat-window h3,
.vanda-chat-window h4,
.vanda-chat-window h5,
.vanda-chat-window h6,
.vanda-chat-window ul,
.vanda-chat-window li {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Anchor colour default, keep underline on the standalone «политика» link
   in the privacy note (.vanda-privacy-note a) and inside the consent
   checkbox label (.vanda-leadform-consent a) via their own rules below. */
.vanda-chat-window a {
  color: var(--vanda-green);
  text-decoration: none;
}

/* ---------- Launcher ---------- */

.vanda-chat-launcher {
  /* Layout-critical props carry !important so a host `button { position:static;
     display:block; width:100%; float:left; padding:12px !important }` cannot
     detach the launcher from its fixed corner. The size !important is mirrored
     in the responsive rules below (which are later in source, so they win). */
  position: fixed !important;
  bottom: 24px;
  right: 24px;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vanda-green-light), var(--vanda-green-dark));
  color: #fff;
  border: none;
  padding: 0 !important;
  cursor: pointer;
  box-shadow: var(--vanda-shadow-launcher);
  font-size: 26px;
  z-index: 99999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.25s ease-in, opacity 0.25s ease-in, box-shadow 0.18s ease;
}

/* Consultant media must fill the launcher regardless of host `* { margin }`. */
.vanda-chat-launcher .vanda-launcher-video {
  margin: 0 !important;
}

.vanda-chat-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 40px rgba(1, 67, 150, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Consultant video fills the launcher. pointer-events: none so the
   button itself keeps receiving clicks and hover.
   border-radius: inherit tracks the container shape, circle on mobile,
   rounded-rect on desktop, without duplication. */
.vanda-chat-launcher .vanda-launcher-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
  pointer-events: none;
  display: block;
}

/* Pulse ring, uses outline+outline-offset so it paints outside the element
   box and is NOT clipped by overflow:hidden on the launcher. */
.vanda-chat-launcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  outline: 2px solid rgba(6, 78, 161, 0);
  outline-offset: 0px;
  animation: vanda-pulse 2.4s infinite;
}

@keyframes vanda-pulse {
  0%   { outline-color: rgba(6, 78, 161, 0.5); outline-offset: 0px; }
  70%  { outline-color: rgba(6, 78, 161, 0);   outline-offset: 16px; }
  100% { outline-color: rgba(6, 78, 161, 0);   outline-offset: 0px; }
}

/* ---------- Launcher hidden while the chat is open ----------
   Single mechanism for ALL viewports (replaces the old phone-only
   display:none rule). widget.js toggles body.vanda-chat-open on open/close;
   that drives the scale+fade transition declared on .vanda-chat-launcher.
   After the fade-out finishes, widget.js adds .vanda-launcher-gone
   (visibility:hidden) and pauses the consultant video explicitly. */

body.vanda-chat-open .vanda-chat-launcher {
  transform: scale(0.3);
  opacity: 0;
  pointer-events: none;
}

/* Stop the pulse ring while the launcher is fading / hidden. */
body.vanda-chat-open .vanda-chat-launcher::after {
  animation: none;
}

.vanda-chat-launcher.vanda-launcher-gone {
  visibility: hidden;
}

/* Reduced motion: no scale/fade animation; widget.js mirrors this by
   hiding/showing instantly (no transitionend wait) and never autoplaying
   the launcher video. */
@media (prefers-reduced-motion: reduce) {
  .vanda-chat-launcher {
    transition: none;
  }
  .vanda-confirm-overlay,
  .vanda-confirm-modal {
    animation: none;
  }
}

/* ---------- Window ---------- */

.vanda-chat-window {
  position: fixed !important;
  float: none !important;
  margin: 0 !important;
  /* bottom aligned with launcher (24px); launcher is hidden while chat is open
     so no gap between the two is needed, window sits flush near the viewport edge. */
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  background: var(--vanda-card-bg);
  border-radius: var(--vanda-radius);
  box-shadow: var(--vanda-shadow-window);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", "SF Pro Display", BlinkMacSystemFont, "Inter",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  z-index: 99999;
  transform-origin: bottom right;
  animation: vanda-window-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vanda-window-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.vanda-chat-window.open {
  display: flex;
}

/* ---------- Header ---------- */

/* Header is a two-row stack: the control row (avatar + title + Заявка +
   Новый чат + Свернуть) and, under it, the always-visible manager phone.
   The control row is already at its width budget on a 380px panel, so the
   number gets its own row instead of squeezing the title into an ellipsis. */
.vanda-chat-header {
  background: linear-gradient(135deg, var(--vanda-green) 0%, var(--vanda-green-dark) 100%);
  color: #fff;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.vanda-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Always-visible manager phone (fail-safe, spec 2026-07-13). Shown in normal
   operation too, not only during an outage: whoever wants to call, calls.
   On phones it becomes a tap-to-call link. Translucent-white on the СП ВАНДА
   blue header gradient, so it reads as a peer of the Заявка button. */
.vanda-chat-window .vanda-header-phone {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vanda-chat-window .vanda-header-phone:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.vanda-chat-window .vanda-header-phone:active {
  background: rgba(255, 255, 255, 0.32);
}
.vanda-chat-window .vanda-header-phone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.vanda-header-phone-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vanda-header-phone-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.vanda-header-phone-number {
  /* Digit groups must never be split across lines. */
  white-space: nowrap;
}

.vanda-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

/* Consultant photo fills the round header avatar. */
.vanda-header-avatar .vanda-header-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.vanda-header-info {
  flex: 1;
  min-width: 0;
}

.vanda-header-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vanda-header-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vanda-header-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: #014396;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(1, 67, 150, 0.25);
}

/* "Новый чат" + "Свернуть" header buttons, pinned right; match the avatar's
   translucent style so they read as peers of the avatar rather than primary
   CTAs. The close button exists because the launcher (the old close toggle)
   is hidden while the chat is open. */
.vanda-chat-window .vanda-header-newchat,
.vanda-chat-window .vanda-header-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.vanda-chat-window .vanda-header-newchat:hover,
.vanda-chat-window .vanda-header-close:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.06);
}
.vanda-chat-window .vanda-header-newchat:active,
.vanda-chat-window .vanda-header-close:active {
  transform: scale(0.96);
}
.vanda-header-newchat svg,
.vanda-header-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* "Заявка" persistent header button, always visible, contrasts against
   the green gradient header. Placed before the new-chat icon. */
.vanda-chat-window .vanda-header-lead {
  flex-shrink: 0;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  letter-spacing: 0.01em;
}
.vanda-chat-window .vanda-header-lead:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.95);
  transform: scale(1.04);
}
.vanda-chat-window .vanda-header-lead:active {
  transform: scale(0.97);
}
.vanda-chat-window .vanda-header-lead:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.vanda-header-lead svg {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
}

/* On narrow viewports hide the text label and show only the icon so the
   header does not overflow. This covers the old 379px breakpoint and all
   phone-size screens in one rule. */
@media (max-width: 600px) {
  .vanda-chat-window .vanda-header-lead .vanda-header-lead-label {
    display: none;
  }
  .vanda-chat-window .vanda-header-lead {
    width: 30px;
    padding: 0;
    justify-content: center;
  }
  /* Phone becomes a full-width call bar: bigger tap target on touch screens. */
  .vanda-chat-window .vanda-header-phone {
    align-self: stretch;
    min-height: 34px;
    font-size: 14px;
  }
}

/* ---------- Messages area ---------- */

.vanda-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--vanda-bg);
  scroll-behavior: smooth;
}

/* Message-list children must never be squeezed. The host-CSS armour reset at the
   top of this file sets `min-height: 0` on every widget descendant, which kills
   the flex "automatic minimum size" — so with default `flex-shrink: 1` the
   browser compresses bubbles/forms/chip rows to a fraction of their content
   height once the log exceeds the window, and the text spills out and paints
   over the following cards. `.vanda-card` already carried this fix locally;
   scoping it to all direct children covers bubbles, quick replies, the lead
   form and anything added later. */
.vanda-chat-messages > * {
  flex-shrink: 0;
}

.vanda-chat-messages::-webkit-scrollbar {
  width: 6px;
}
.vanda-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* ---------- Bubbles ---------- */

.vanda-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: vanda-msg-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vanda-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vanda-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--vanda-green) 0%, var(--vanda-green-light) 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(1, 67, 150, 0.18);
}

.vanda-bubble.bot {
  align-self: flex-start;
  background: #fff;
  color: var(--vanda-text);
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.vanda-bubble a {
  color: var(--vanda-green);
  text-decoration: underline;
  word-break: break-all;
}

/* Blinking cursor at the end of a still-streaming bot bubble. Removed when
   the stream finishes so the bubble looks identical to the historical
   non-streamed ones in the log. */
.vanda-bubble.bot.vanda-bubble--streaming::after {
  content: "▍";
  display: inline-block;
  margin-left: 1px;
  color: var(--vanda-green);
  font-weight: 400;
  animation: vanda-cursor-blink 1s steps(2, end) infinite;
}

@keyframes vanda-cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ---------- Rescue card (server unreachable) ----------
   Replaces the old dead-end error bubble: the failure line plus a tappable
   manager phone, so the client always has a way out to a human. No lead form
   here, a submit would go nowhere while the server is down. */

.vanda-rescue.vanda-bubble.bot {
  max-width: 92%;
  background: #fff8ec;
  border: 1px solid #f2d9a8;
  box-shadow: 0 2px 10px rgba(180, 130, 30, 0.08);
}

.vanda-rescue-text {
  /* Sentence flows normally even though .vanda-bubble is pre-wrap. */
  white-space: normal;
}

/* The number is the point of this card: give it a pill-sized tap target that
   still reads inline in the sentence. Uses the СП ВАНДА brand blue, and
   overrides the generic `.vanda-bubble a { word-break: break-all }` so the
   digits never split. */
.vanda-rescue .vanda-rescue-phone {
  display: inline-block;
  margin: 2px 1px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--vanda-green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;
  transition: background 0.15s ease;
}
.vanda-rescue .vanda-rescue-phone:hover {
  background: var(--vanda-green-dark);
  text-decoration: none;
}
.vanda-rescue .vanda-rescue-phone:focus-visible {
  outline: 2px solid var(--vanda-green-dark);
  outline-offset: 2px;
}

/* ---------- Typing indicator ---------- */

.vanda-typing {
  align-self: flex-start;
  background: #fff;
  border-radius: 16px;
  border-bottom-left-radius: 6px;
  padding: 12px 16px;
  display: flex;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.vanda-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vanda-muted);
  animation: vanda-typing-bounce 1.2s infinite ease-in-out;
}
.vanda-typing span:nth-child(2) { animation-delay: 0.15s; }
.vanda-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes vanda-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Card ---------- */

.vanda-chat-window .vanda-card {
  align-self: stretch;
  background: var(--vanda-card-bg);
  border: 1px solid var(--vanda-border);
  border-radius: var(--vanda-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  min-height: 72px;             /* prevents body from collapsing if photo fails to load */
  flex-shrink: 0;               /* parent is flex column with gap, don't let cards squish */
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: vanda-msg-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vanda-chat-window .vanda-card:hover {
  border-color: var(--vanda-green-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 67, 150, 0.12);
}

.vanda-card-photo,
.vanda-card-photo-placeholder {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: block;
}

.vanda-card-photo {
  background: #eee;
  object-fit: cover;
}

.vanda-card-photo-placeholder {
  background: linear-gradient(135deg, #eaf1f9, #f6f9fc);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Inline SVG silhouette in a muted brand blue (was a 🏠 emoji, which read as
     cheap next to real catalog photos). Muted so it never competes with a real
     photo in the same list. */
  color: rgba(1, 67, 150, 0.45);
}

.vanda-card-photo-placeholder svg {
  width: 34px;
  height: 34px;
  display: block;
}

.vanda-card-body {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vanda-card-title {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--vanda-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* S2: server-rendered one-liner under the title.
   Slightly larger than .vanda-card-specs (12.5px vs 11px) and a colder grey,
   so the visual hierarchy reads title (bold) > subtitle (grey) > specs (tiny). */
.vanda-card-subtitle {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
  margin-top: 2px;
}

.vanda-card-specs {
  font-size: 11px;
  color: var(--vanda-muted);
  line-height: 1.3;
}

.vanda-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 3px;
}

.vanda-card-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--vanda-accent);
  letter-spacing: -0.01em;
}

.vanda-card-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--vanda-accent);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: gap 0.15s ease;
}

.vanda-card:hover .vanda-card-cta {
  gap: 6px;
}

/* ---------- Gallery card (photo-report) ---------- */
/* Inherits .vanda-card layout wholesale, only adds the "Фотоотчёт" badge. */

/* Galleries reuse the product-card layout (108×108 photo + body) wholesale,
   this selector just pins the type so the layout intent is explicit and the
   class has a real home in the stylesheet. */
.vanda-chat-window .vanda-card--gallery {
  flex-direction: row;
}

.vanda-chat-window .vanda-card--gallery .vanda-card-badge {
  display: inline-flex;
  align-items: center;
  background: var(--vanda-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------- Info card (compact link-card) ---------- */
/* No 108px photo, a smaller card with a brand-tinted icon block on the
   left and title + "Открыть →" on the right. Still a sibling of product
   cards: same border-radius and hover lift. */

.vanda-chat-window .vanda-card--info {
  min-height: 0;
  align-items: center;
}

/* ---------- Rental card (аренда offer) ---------- */
/* Same row layout as a product card, but the deal is labelled and the rate is
   coloured differently, so a monthly-ish rental rate can never be read as a
   purchase price sitting in the same thread. The period itself is NOT printed:
   rental_unit is unknown catalog-wide, see renderRentalCard() in widget.js. */

.vanda-card-deal {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  background: rgba(1, 67, 150, 0.10);
  color: var(--vanda-green);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  margin-bottom: 2px;
  white-space: nowrap;
}

.vanda-card-note {
  font-size: 10px;
  line-height: 1.3;
  color: var(--vanda-muted);
}

.vanda-chat-window .vanda-card--rental .vanda-card-price {
  /* Blue, not the red sale-price accent: different kind of number. */
  color: var(--vanda-green);
  font-size: 13px;
}

.vanda-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 10px 0 10px 12px;
  border-radius: 50%;
  background: rgba(1, 67, 150, 0.12);
  color: var(--vanda-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vanda-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.vanda-chat-window .vanda-card--info .vanda-card-body {
  padding: 9px 12px;
  gap: 4px;
}

.vanda-chat-window .vanda-card--info .vanda-card-bottom {
  padding-top: 0;
}

/* ---------- Input ---------- */

.vanda-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid var(--vanda-border);
}

.vanda-chat-input input {
  flex: 1;
  border: 1px solid var(--vanda-border);
  background: var(--vanda-bg);
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  color: var(--vanda-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vanda-chat-input input:focus {
  border-color: var(--vanda-green-light);
  background: #fff;
}
.vanda-chat-input input:focus-visible {
  outline: 2px solid var(--vanda-green);
  outline-offset: 2px;
}

.vanda-chat-input input::placeholder {
  color: var(--vanda-muted);
}

.vanda-chat-input button {
  border: none;
  background: linear-gradient(135deg, var(--vanda-green) 0%, var(--vanda-green-light) 100%);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(1, 67, 150, 0.25);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.vanda-chat-input button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(1, 67, 150, 0.35);
}

.vanda-chat-input button:disabled {
  background: #cfd0cb;
  box-shadow: none;
  cursor: not-allowed;
}

.vanda-chat-input button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Send button touch target - merged into the phone full-screen block below */

/* ---------- In-thread lead form card ----------
   Rendered inside .vanda-chat-messages as a sibling of the bubbles/cards.
   Inherits the brand variables from .vanda-chat-window (its ancestor). */

.vanda-chat-window .vanda-leadform {
  align-self: flex-start;
  width: 100%;
  max-width: 80%;
  background: var(--vanda-card-bg);
  border: 1px solid var(--vanda-border);
  border-radius: var(--vanda-radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  animation: vanda-msg-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vanda-leadform-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vanda-text);
  line-height: 1.3;
}

.vanda-leadform-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vanda-leadform-field label {
  font-size: 12px;
  color: var(--vanda-muted);
  font-weight: 600;
}
.vanda-leadform-field input {
  border: 1px solid var(--vanda-border);
  background: var(--vanda-bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--vanda-text);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vanda-leadform-field input:focus {
  border-color: var(--vanda-green-light);
  background: #fff;
}
.vanda-leadform-field input:focus-visible {
  outline: 2px solid var(--vanda-green);
  outline-offset: 2px;
}
.vanda-leadform-field .vanda-leadform-hint {
  font-size: 11px;
  color: var(--vanda-muted);
  font-weight: 400;
}
/* Phone format hint: hidden until the client has typed an incomplete number,
   so an untouched field never looks like it is already wrong. */
.vanda-leadform-field .vanda-leadform-hint {
  display: none;
}
.vanda-leadform-field .vanda-leadform-hint.show {
  display: block;
  color: #b03a2e;
}

.vanda-leadform-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--vanda-text);
  line-height: 1.35;
  cursor: pointer;
}
/* Custom checkbox, overrides the .vanda-chat-window input reset (specificity 0,2,1 > 0,1,1) */
.vanda-chat-window .vanda-leadform-consent input[type="checkbox"] {
  /* restore box model stripped by the global reset */
  appearance: none;
  -webkit-appearance: none;
  /* layout */
  margin-top: 2px;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  min-width: 17px;
  cursor: pointer;
  /* unchecked visual */
  background: #ffffff;
  border: 1.5px solid #b0b8c1;
  border-radius: 3px;
  /* position anchor for the checkmark pseudo-element */
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

/* checked state, fill green + white checkmark via SVG data-URI */
.vanda-chat-window .vanda-leadform-consent input[type="checkbox"]:checked {
  background: var(--vanda-green);
  border-color: var(--vanda-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* hover, darken border on unchecked */
.vanda-chat-window .vanda-leadform-consent input[type="checkbox"]:not(:checked):hover {
  border-color: var(--vanda-green);
}

/* keyboard focus */
.vanda-chat-window .vanda-leadform-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--vanda-green);
  outline-offset: 2px;
}
.vanda-leadform-consent a {
  color: var(--vanda-green);
  text-decoration: underline;
}

.vanda-leadform-error {
  font-size: 12px;
  color: #b03a2e;
  background: #fdecea;
  padding: 6px 10px;
  border-radius: 8px;
  display: none;
}
.vanda-leadform-error.show {
  display: block;
  line-height: 1.4;
}
/* Tap-to-call number inside the error box. Must never break its digits across
   lines, and stays readable against the error background. */
.vanda-leadform-error .vanda-leadform-phone {
  color: #b03a2e;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  word-break: normal;
}

.vanda-leadform-actions {
  display: flex;
  gap: 8px;
}
.vanda-chat-window .vanda-leadform-submit {
  flex: 1;
  border: none;
  background: linear-gradient(135deg, var(--vanda-green) 0%, var(--vanda-green-light) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.vanda-chat-window .vanda-leadform-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(1, 67, 150, 0.3);
}
.vanda-chat-window .vanda-leadform-submit:disabled {
  background: #cfd0cb;
  cursor: not-allowed;
  box-shadow: none;
}
.vanda-chat-window .vanda-leadform-cancel {
  border: 1px solid var(--vanda-border);
  background: #fff;
  color: var(--vanda-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.vanda-chat-window .vanda-leadform-cancel:hover {
  background: var(--vanda-bg);
  color: var(--vanda-text);
}

/* Success state, replaces the form fields after a successful submit. */
.vanda-leadform-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 6px;
  color: var(--vanda-text);
  font-size: 13.5px;
  line-height: 1.4;
}
.vanda-leadform-success::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(1, 67, 150, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4 10-10' stroke='%23014396' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  margin-bottom: 2px;
}

/* Reduced motion: drop the entry animation on the lead form card. */
@media (prefers-reduced-motion: reduce) {
  .vanda-chat-window .vanda-leadform {
    animation: none;
  }
}

/* ---------- Privacy disclaimer ---------- */

.vanda-privacy-note {
  font-size: 10.5px;
  color: var(--vanda-muted);
  line-height: 1.3;
  padding: 6px 14px 0 14px;
  background: #fff;
  border-top: 1px solid var(--vanda-border);
  text-align: center;
}
.vanda-privacy-note a {
  color: var(--vanda-green);
  text-decoration: underline;
}

/* Keyframes shared by the confirm modal below (formerly also the lead
   overlay/modal, now removed in favour of the in-thread lead form). */
@keyframes vanda-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vanda-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =============================================================
   Confirm modal (custom replacement for window.confirm)
   Confined to the chat window, stacked above the message list
   (z-index 11).
   ============================================================= */

.vanda-confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 47, 107, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 11;
  border-radius: var(--vanda-radius);
  animation: vanda-overlay-in 0.18s ease;
}
.vanda-confirm-overlay.open {
  display: flex;
}
.vanda-confirm-modal {
  background: #fff;
  border-radius: var(--vanda-radius-sm);
  width: calc(100% - 48px);
  max-width: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  text-align: center;
  animation: vanda-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.vanda-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--vanda-text);
}
.vanda-confirm-body {
  font-size: 13.5px;
  color: var(--vanda-muted);
  line-height: 1.4;
}
.vanda-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.vanda-chat-window .vanda-confirm-ok {
  flex: 1;
  border: none;
  background: linear-gradient(135deg, var(--vanda-green) 0%, var(--vanda-green-light) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.vanda-chat-window .vanda-confirm-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(1, 67, 150, 0.3);
}
.vanda-chat-window .vanda-confirm-cancel {
  flex: 1;
  border: 1px solid var(--vanda-border);
  background: #fff;
  color: var(--vanda-text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}
.vanda-chat-window .vanda-confirm-cancel:hover {
  background: var(--vanda-bg);
}

/* =============================================================
   RESPONSIVE LAYOUT
   ============================================================= */

/* ---------- Phones: full-screen takeover (max-width 600px) ----------
   The window expands edge-to-edge and the launcher is hidden behind it.
   dvh units handle the mobile browser chrome (address bar / bottom bar)
   resizing correctly. vh fallback is written first so dvh wins where
   supported (per the cascade). Safe-area insets handle notch / home
   indicator on modern iPhones and Android devices. */

@media (max-width: 600px) {
  /* Full-screen window */
  .vanda-chat-window.open {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  /* Flex column: header fixed, messages scroll, input fixed at bottom */
  .vanda-chat-window.open .vanda-chat-header {
    flex-shrink: 0;
    /* Notch / status-bar safe area on top */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }

  .vanda-chat-window.open .vanda-chat-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vanda-chat-window.open .vanda-chat-input {
    flex-shrink: 0;
    /* Home indicator / gesture bar safe area at bottom */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .vanda-chat-window.open .vanda-privacy-note {
    flex-shrink: 0;
  }

  /* Launcher hiding while the chat is open is handled by the unified
     body.vanda-chat-open scale+fade mechanism near the launcher styles at
     the top of this file; no phone-specific rule needed anymore. */

  /* Prevent iOS zoom on input focus: font-size must be >= 16px */
  .vanda-chat-input input {
    font-size: 16px;
  }

  /* In-thread lead form fields: same 16px floor to prevent iOS zoom */
  .vanda-leadform-field input {
    font-size: 16px;
  }

  /* Larger send button touch target on phones */
  .vanda-chat-input button {
    width: 44px;
    height: 44px;
  }

  .vanda-confirm-overlay {
    border-radius: 0;
  }
}

/* ---------- Tablets and small laptops (601px - 1024px) ----------
   Keep the floating panel but clamp it to the visible viewport. */

@media (min-width: 601px) and (max-width: 1024px) {
  .vanda-chat-window {
    /* 24px bottom + 24px top breathing room = 48px total offset */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    max-width: calc(100vw - 32px);
  }
}

/* ---------- Desktop launcher: rounded rectangle (601px+) ----------
   Exact size requested by owner: 124×174px.
   Video source is 240×240 (square); object-fit:cover on a 124×174 rect
   scales the video to 174×174 and crops 25px each side (≈80% of width
   visible). object-position center 8% keeps the consultant's head and
   upper torso centred without cropping the top of the head. */

@media (min-width: 601px) {
  .vanda-chat-launcher {
    /* !important mirrors the base rule so it wins over both the base size and
       any host `button { width:100% !important }`. */
    width: 124px !important;
    height: 174px !important;
    border-radius: 22px;
    /* Neutral shadow works better around a large rect than the green glow */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);
    /* Collapse toward bottom-right corner so the animation feels anchored */
    transform-origin: bottom right;
  }

  .vanda-chat-launcher:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.12);
  }

  /* Narrower rect: cover scales to 174px height → crops 58px total width
     (29px each side). object-position center 8% shifts content slightly
     upward so the full head is in frame with natural torso below. */
  .vanda-chat-launcher .vanda-launcher-video {
    object-position: center 8%;
  }
}

/* ---------- Large monitors (1920px+) ----------
   Slightly larger panel for proportion on 2K/4K; stays compact, not full-bleed.
   Launcher stays at the owner-specified 124×174, no upscale on large screens. */

@media (min-width: 1920px) {
  .vanda-chat-window {
    width: 420px;
    height: 680px;
    /* Symmetrical with launcher bottom: 32px; 32px bottom + 32px top = 64px */
    bottom: 32px;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }
  /* Keep launcher at the fixed 124×174 size; only reposition to 32px from edges. */
  .vanda-chat-launcher {
    width: 124px !important;
    height: 174px !important;
    bottom: 32px;
    right: 32px;
  }
}

@media (min-width: 2560px) {
  .vanda-chat-window {
    width: 420px;
    height: 680px;
  }
}

/* =============================================================
   Proactive teaser bubble (engagement layer)
   A small "Никита" card that slides in above the launcher to invite
   the visitor into the chat. Additive: hidden whenever the chat is
   open (body.vanda-chat-open) so it never overlaps the window /
   mobile full-screen takeover.
   ============================================================= */

.vanda-teaser {
  /* Inherit the widget brand palette + fonts (same vars block as the launcher). */
  --vanda-green: #014396;
  --vanda-green-light: #064EA1;
  --vanda-green-dark: #012F6B;
  --vanda-text: #1a1a1a;
  --vanda-card-bg: #ffffff;
  /* Positioning + flex layout are !important so a host `* { margin !important }`
     or `div { text-align/float !important }` cannot shove the bubble off its
     anchor above the launcher or collapse its flex row. */
  position: fixed !important;
  float: none !important;
  margin: 0 !important;
  /* Mobile default: above the 60px circular launcher. */
  right: 24px;
  bottom: calc(24px + 60px + 10px);
  z-index: 100000;            /* above launcher (99999), below open window logic via body class */
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 11px;
  width: min(330px, calc(100vw - 40px));
  max-width: min(330px, calc(100vw - 40px));
  /* Right padding reserves the gutter for the absolutely-positioned × button. */
  padding: 13px 14px 13px 13px;
  /* Frosted glass: translucent light fill behind a heavy iOS-style blur. */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 23px;
  /* iOS hairline: a faint inner-lit white edge + a slightly darker outer line. */
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  /* Layered, low-opacity, large-blur shadow stack for realistic floating depth. */
  box-shadow:
    0 0.5px 0 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.10),
    0 18px 50px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--vanda-text);
  -webkit-font-smoothing: antialiased;
  /* Hidden until JS adds .show; opacity+translate+scale drive an iOS slide-down. */
  opacity: 0;
  transform: translateY(-14px) scale(0.94);
  transform-origin: top right;
  pointer-events: none;
  visibility: hidden;
  /* Spring-like ease with a touch of overshoot for the iOS banner feel. */
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.46s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.vanda-teaser.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.vanda-teaser * {
  box-sizing: border-box;
  font-family: inherit;
}

/* App-icon avatar: rounded-square "squircle" with a subtle inner border + lift. */
.vanda-teaser-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(6, 78, 161, 0.22), rgba(1, 67, 150, 0.12));
  color: var(--vanda-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  overflow: hidden;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06) inset,
    0 0 0 0.5px rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.10);
}

.vanda-teaser-avatar .vanda-teaser-avatar-img {
  /* !important so a host `img { max-width; width; border !important }` or
     `* { margin !important }` (which, combined with flex-shrink, would narrow
     the image) cannot shrink or frame the consultant avatar. */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  object-fit: cover;
  border: none !important;
  border-radius: 11px;
  display: block;
}

/* Keep the avatar squircle at a fixed size and never let host `* { margin }`
   or `button/div` element rules resize / detach it or the flex children. */
.vanda-teaser-avatar {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
}
.vanda-teaser-avatar,
.vanda-teaser-content,
.vanda-teaser-header,
.vanda-teaser-title,
.vanda-teaser-time,
.vanda-teaser-text {
  margin: 0 !important;
  float: none !important;
}
/* Flex containers stay flex; text stays left even under `div { text-align:center }`. */
.vanda-teaser-content {
  display: flex !important;
  flex-direction: column !important;
  padding-right: 0 !important;
}
.vanda-teaser-header {
  display: flex !important;
  /* Reserve room on the right for the absolute × so the title/time never run
     under it. The reserve sits on the header ONLY: the message body starts
     below the ×, so giving the whole column a right gutter just narrowed the
     text and pushed it into the two-line clamp for no reason. */
  padding-right: 22px !important;
}
.vanda-teaser-title,
.vanda-teaser-text {
  text-align: left !important;
}

/* Right column: header row (title + time) stacked above the message body. */
.vanda-teaser-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

.vanda-teaser-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.vanda-teaser-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #0a0a0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vanda-teaser-time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(60, 60, 67, 0.5);
  white-space: nowrap;
}

.vanda-teaser-text {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.005em;
  color: rgba(28, 28, 30, 0.92);
  /* Two-line max with ellipsis, like a real iOS notification preview. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtle, refined circular close, quiet until hovered.
   Absolutely positioned in the bubble's top-right corner (out of the flex
   flow) and armoured with !important so a host `button { display:block;
   width:100%; float:left; position:static; padding:12px !important }` cannot
   tear the × onto its own full-width row, the exact bug seen on the Bitrix
   host. The parent `.vanda-teaser` is position:fixed, so it is the containing
   block for this absolute child. */
.vanda-teaser-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  float: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none;
  background: rgba(120, 120, 128, 0.14);
  color: rgba(60, 60, 67, 0.55);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.vanda-teaser-close:hover {
  background: rgba(120, 120, 128, 0.24);
  color: rgba(28, 28, 30, 0.85);
  transform: scale(1.08);
}
.vanda-teaser-close:focus-visible {
  outline: 2px solid var(--vanda-green);
  outline-offset: 2px;
}

/* Hide the teaser whenever the chat is open, mirrors the launcher hide so it
   never overlaps the window or the mobile full-screen takeover. */
body.vanda-chat-open .vanda-teaser {
  display: none;
}

/* Desktop (>=601px): sit above the rectangular 124x174 video launcher. */
@media (min-width: 601px) {
  .vanda-teaser {
    right: 24px;
    bottom: calc(24px + 174px + 14px);
    width: 340px;
    max-width: 340px;
  }
}

/* Mobile (<=600px): a touch wider, still tasteful and two-line, above the
   60px launcher so it doesn't cover site buttons. */
@media (max-width: 600px) {
  .vanda-teaser {
    right: 16px;
    bottom: calc(24px + 60px + 10px);
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 12px 13px;
  }
  .vanda-teaser-title,
  .vanda-teaser-text {
    font-size: 13px;
  }
}

/* 4K (>=1920px): mirror the launcher's 32px edge offsets. */
@media (min-width: 1920px) {
  .vanda-teaser {
    right: 32px;
    bottom: calc(32px + 174px + 14px);
  }
}

/* Launcher unread badge, a small contrast dot, top-right of the launcher. */
.vanda-chat-launcher.vanda-has-unread::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4d4f;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
}

/* One-shot launcher pulse (single cycle, then stop). Distinct keyframe from
   the ambient ring so it can run exactly once via iteration-count: 1. */
.vanda-chat-launcher.vanda-launcher-pulse {
  animation: vanda-teaser-pulse 1.2s ease-out 1;
}

@keyframes vanda-teaser-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Reduced motion: no slide, no pulse, teaser appears instantly, badge static
   (mirrors the existing reduced-motion block near the launcher styles). */
@media (prefers-reduced-motion: reduce) {
  .vanda-teaser {
    transition: none;
    transform: none;
  }
  .vanda-teaser.show {
    transform: none;
  }
  .vanda-chat-launcher.vanda-launcher-pulse {
    animation: none;
  }
}

/* Quick-reply chips, one-click conversation starters under the greeting. */
.vanda-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 0 2px;
}
.vanda-quick-replies--animate {
  animation: vanda-quick-in 0.22s ease-out both;
}
@keyframes vanda-quick-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vanda-chat-window .vanda-quick-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--vanda-green-dark);
  background: var(--vanda-card-bg);
  border: 1px solid var(--vanda-green-light);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.vanda-quick-chip:hover {
  background: var(--vanda-green);
  border-color: var(--vanda-green);
  color: #fff;
}
.vanda-quick-chip:active {
  transform: scale(0.97);
}
.vanda-quick-chip:focus-visible {
  outline: 2px solid var(--vanda-green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .vanda-quick-replies--animate { animation: none; }
}