/* Онлайн-чат 1Table.pro — стили виджета.
   Все токены объявлены на самом виджете, поэтому файл не трогает стили сайта.
   Хотите под свой бренд — меняйте значения здесь: цвет кнопки и пузырей —
   --color-primary, фон панели — --color-surface-1, шрифт — --font-sans. */
.chat {
  --color-primary: #756bdd;
  --color-on-primary: #fff;
  --color-primary-hover: #655bd0;
  --color-canvas: #f7f7f9;
  --color-surface-1: #fff;
  --color-surface-2: #f7f6fb;
  --color-surface-3: #f1f0f7;
  --color-hairline: #e3e1eb;
  --color-hairline-strong: #d5d1e4;
  --color-ink: #222139;
  --color-ink-subtle: #777383;
  --color-ink-tertiary: #9691a0;
  --color-success: #27a644;
  --font-sans: "Manrope", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --font-weight-semibold: 600;
  --line-height-body: 1.5;
  --line-height-caption: 1.4;
  --line-height-tight: 1.2;
  --letter-spacing-body: -0.05px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --shadow-focus-ring: 0 0 0 3px rgba(117, 107, 221, 0.24);
  box-sizing: border-box;
}
.chat.chat--hidden { display: none; }
.chat *, .chat *::before, .chat *::after { box-sizing: inherit; }

/* ================================
   CHAT WIDGET
   Live chat with the 1Table.pro consultant. Round launcher bottom-right,
   panel opens above it; fullscreen on ≤600px. Same surface ladder as the
   ai-widget and lead-modal: surface-1 panel, hairline border, teal accents.
   ================================ */
.chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  font-family: var(--font-sans);
  pointer-events: none;
}
.chat__launcher {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  border: none;
  background: #756bdd;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(117, 107, 221, 0.35);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  pointer-events: auto;
}
.chat.has-unread:not(.is-open) .chat__launcher::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #ef3434;
}
.chat__launcher:hover { background: #655bd0; transform: translateY(-2px); }
.chat__launcher:focus-visible { outline: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), var(--shadow-focus-ring); }
.chat__icon { display: block; }
.chat__icon--close { display: none; }
.chat.is-open .chat__icon--open { display: none; }
.chat.is-open .chat__icon--close { display: block; }

.chat__panel {
  position: absolute;
  right: 0;
  bottom: 72px; /* launcher 56px + 16px gap */
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 560px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  padding: 0; /* not a <section>, but guard against global section padding anyway */
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(34, 33, 57, 0.18);
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.chat__panel[hidden] { display: none; }
.chat.is-open .chat__panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }

.chat__header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 0;
  background: var(--color-primary);
}
.chat__avatar-button {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat__avatar-button:hover { transform: scale(1.06); }
.chat__avatar-button:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.chat__avatar-button picture { display: block; }
.chat__avatar {
  display: block;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.chat__who { flex: 1; min-width: 0; }
.chat__name {
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-body);
}
.chat__status {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}
.chat__status-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(39, 166, 68, 0.18);
}
.chat__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  background: none; border: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 26px; line-height: 1; cursor: pointer;
  padding: 0 0 3px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.chat__close:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }

.chat__panel > .chat__header,
.chat__panel > .chat__log,
.chat__panel > .chat__composer,
.chat__panel > .chat__hint {
  transition: filter 0.2s ease;
}
.chat.is-avatar-open .chat__panel > .chat__log,
.chat.is-avatar-open .chat__panel > .chat__composer,
.chat.is-avatar-open .chat__panel > .chat__hint {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}
.chat__avatar-viewer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(247, 247, 249, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.chat__avatar-viewer[hidden] { display: none; }
.chat__avatar-viewer.is-visible { opacity: 1; pointer-events: auto; }
.chat__avatar-dialog {
  position: relative;
  width: min(300px, 100%);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 64px rgba(34, 33, 57, 0.3);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat__avatar-viewer.is-visible .chat__avatar-dialog { opacity: 1; transform: none; }
.chat__avatar-dialog picture { display: block; }
.chat__avatar-full {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
}
.chat__avatar-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(34, 33, 57, 0.72);
  color: #fff;
  font: inherit;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.chat__avatar-close:hover { background: rgba(34, 33, 57, 0.9); transform: scale(1.04); }
.chat__avatar-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75); }

.chat__log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-xs);
  scroll-behavior: auto;
  overscroll-behavior: contain;
}
.chat__msg { display: flex; max-width: 85%; }
.chat__msg--agent { align-self: flex-start; }
.chat__msg--user  { align-self: flex-end; }
.chat__bubble {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: chat-bubble-in 0.18s ease both;
}
.chat__msg--agent .chat__bubble {
  background: var(--color-surface-3);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-bottom-left-radius: var(--radius-xs);
}
.chat__msg--user .chat__bubble {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-right-radius: var(--radius-xs);
}
.chat__bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat__msg--agent .chat__bubble a { color: var(--color-primary); }
@keyframes chat-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Typing indicator — three pulsing dots inside an agent bubble */
/* The indicator is one persistent element toggled with .is-visible: it fades and
   slides instead of being re-created (that re-ran the bubble animation and blinked). */
.chat__msg--typing {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.chat__msg--typing:not(.is-visible) {
  height: 0;
  margin-top: calc(-1 * var(--space-xs)); /* cancel the log's flex gap while hidden */
  overflow: hidden;
}
.chat__msg--typing.is-visible { opacity: 1; transform: none; }
.chat__msg--typing .chat__bubble { animation: none; padding: 12px 16px; }
.chat__typing { display: inline-flex; gap: 5px; align-items: center; height: 16px; }
.chat__typing i {
  display: block; width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-ink-subtle);
  animation: chat-typing 1.1s ease-in-out infinite;
}
.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.chat__composer {
  display: flex; align-items: flex-end; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) 0;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-1);
}
.chat__input {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  padding: 10px 14px;
  resize: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat__input::placeholder { color: var(--color-ink-subtle); }
.chat__input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus-ring); }
.chat__send {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: none; border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.chat__send:hover { background: var(--color-primary-hover); }
.chat__send:disabled { opacity: 0.4; cursor: default; }
.chat__send:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.chat__hint {
  margin: 0;
  padding: 6px var(--space-md) var(--space-sm);
  color: var(--color-ink-tertiary);
  font-size: 11px;
  line-height: var(--line-height-caption);
  text-align: center;
}

/* Markdown-ответы агента (p / списки / код / ссылки) и вложения */
.chat__bubble p { margin: 0 0 0.55em; }
.chat__bubble p:last-child { margin-bottom: 0; }
.chat__bubble .chat__h { font-weight: 600; margin: 0.6em 0 0.3em; }
.chat__bubble .chat__h:first-child { margin-top: 0; }
.chat__bubble ul, .chat__bubble ol { margin: 0.2em 0 0.6em 1.25em; padding: 0; }
.chat__bubble li { margin: 0.15em 0; }
.chat__bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: #e8e5f3;
}
.chat__bubble pre {
  margin: 0.4em 0 0.6em;
  padding: 0.6em 0.75em;
  border-radius: 8px;
  background: #e8e5f3;
  overflow-x: auto;
}
.chat__bubble pre code { padding: 0; background: none; font-size: 0.85em; }
.chat__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.5em; }
.chat__image-button { display:block;width:100%;padding:0;border:0;border-radius:8px;background:transparent;cursor:zoom-in;overflow:hidden; }
.chat__image-button:focus-visible { outline:none;box-shadow:var(--shadow-focus-ring); }
.chat__files img { width:100%;height:auto;max-width:100%;max-height:320px;object-fit:contain;object-position:left top;border-radius:8px;display:block;transition:transform .15s ease; }
.chat__image-button:hover img { transform:scale(1.015); }
.chat__image-viewer {
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;
  background:rgba(247,247,249,.38);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.chat__image-viewer[hidden] { display:none; }
.chat__image-viewer.is-visible { opacity:1;pointer-events:auto; }
.chat__image-dialog {
  position:relative;display:grid;place-items:center;width:min(600px,calc(100vw - 32px));height:min(600px,calc(100vh - 32px));height:min(600px,calc(100dvh - 32px));
  padding:12px;border:1px solid rgba(255,255,255,.78);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 24px 64px rgba(34,33,57,.3);
  opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .2s ease;
}
.chat__image-viewer.is-visible .chat__image-dialog { opacity:1;transform:none; }
.chat__image-full { display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:20px; }
.chat__file {
  display: inline-block;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-decoration: none !important;
  font-size: 0.9em;
}

/* Chromium supports continuous superellipse corners; other browsers retain
   the matching 22 px rounded-corner fallback above. */
@supports (corner-shape: squircle) {
  .chat__panel,
  .chat__close,
  .chat__bubble,
  .chat__input,
  .chat__bubble code,
  .chat__bubble pre,
  .chat__files img,
  .chat__file {
    corner-shape: squircle;
  }
}

@media (max-width: 600px) {
  .chat { right: 12px; bottom: 12px; }
  .chat__launcher { width: 52px; height: 52px; }
  /* Fullscreen panel; the launcher hides and the header × is the only close. */
  .chat__panel {
    position: fixed; inset: 0;
    width: auto; max-width: none;
    height: auto; max-height: none;
    border-radius: 0; border: none;
    transform-origin: center bottom;
  }
  .chat.is-open .chat__launcher { display: none; }
  .chat__header { padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px)); }
  .chat__hint { display: none; }
  .chat__composer { padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); }
  body.chat-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__panel, .chat__launcher { transition: none; }
  .chat__bubble { animation: none; }
  .chat__typing i { animation: none; opacity: 0.7; }
  .chat__msg--typing { transition: none; }
  .chat__log { scroll-behavior: auto; }
  .chat__avatar-viewer,
  .chat__avatar-dialog,
  .chat__image-viewer,
  .chat__image-dialog,
  .chat__panel > .chat__header,
  .chat__panel > .chat__log,
  .chat__panel > .chat__composer,
  .chat__panel > .chat__hint { transition: none; }
}

/* Reset broad site selectors so the embedded widget keeps its own geometry. */
.chat .chat__header { position: static; inset: auto; transform: none; width: auto; max-width: none; height: auto; border-radius: 0; box-shadow: none; }
.chat .chat__composer { margin: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; }
.chat .chat__input { width: auto; margin: 0; }