/* ══════════════════════════════════════════════════════════════════════
   ДИАЛОГ С АСТРОЛОГОМ — вариант 2a «Предложение репликой»
   Дизайн-хендофф: design_dialog/README.md + COPY.md

   Механика: оплата приходит не баннером поверх экрана, а следующим
   сообщением астролога. Разговор не обрывается — он продолжается
   предложением. Поэтому оффер живёт в ленте и выглядит как реплика,
   только из стекла.

   Все значения — токены из хендоффа. Ни одного «магического» цвета
   в разметке: класс + переменная.
   ══════════════════════════════════════════════════════════════════════ */

.qad {
  /* ── небо ── */
  --qad-bg-deep:    #0A0812;
  --qad-violet-900: #14102A;
  --qad-violet-700: #24164A;
  --qad-violet-600: #2E1B57;
  --qad-violet-500: #43227C;
  --qad-violet-400: #6B3CC4;

  /* ── золото: акцент и продажа ── */
  --qad-gold-100: #F9F2E2;
  --qad-gold-200: #F6DFAA;
  --qad-gold-300: #F3D79A;
  --qad-gold-500: #E8C270;
  --qad-gold-700: #D9AE5F;
  --qad-gold-ink: #2A1F0E;
  --qad-gold-muted: #C4B392;

  /* ── текст ── */
  --qad-text-hi:     #F5F1FA;
  --qad-text:        #EDE8F5;
  --qad-text-soft:   #CDC5DA;
  --qad-text-dim:    #A79CBA;
  --qad-text-dimmer: #9A90AC;
  --qad-text-ph:     #6E657F;

  --qad-radius: 28px;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  max-height: min(980px, 82vh);
  border-radius: var(--qad-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(120% 55% at 50% -8%,
              var(--qad-violet-500) 0%, var(--qad-violet-700) 32%,
              var(--qad-violet-900) 62%, var(--qad-bg-deep) 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .55);
  font-family: 'Manrope', 'Nunito Sans', ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--qad-text);
  -webkit-font-smoothing: antialiased;
}

/* ── звёзды: чистый CSS, ни одной картинки ── */
.qad-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 12%, rgba(255,255,255,.50), transparent),
    radial-gradient(1.2px 1.2px at 34% 6%,  rgba(232,194,112,.70), transparent),
    radial-gradient(1.5px 1.5px at 58% 15%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.2px 1.2px at 79% 8%,  rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 91% 26%, rgba(232,194,112,.50), transparent),
    radial-gradient(1.3px 1.3px at 22% 34%, rgba(255,255,255,.28), transparent);
}

/* ─────────────────────────────────────────────── шапка (стекло L1) */
.qad-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.qad-head-l { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 auto; }
.qad-name { font-size: 17px; font-weight: 700; color: var(--qad-text-hi); }
.qad-role { font-size: 13px; color: var(--qad-text-dim); }
/* В узкой колонке (страница разбора) счётчик и подпись не помещались в строку.
   Обрезать имя многоточием («Астр…») — хуже, чем перенести счётчик на строку
   ниже. Поэтому шапка переносится, а обрезается только длинная подпись. */
/* Имя не должно налезать на счётчик: колонка обрезает по своей ширине,
   а имя держится одной строкой — ужимается всегда подпись под ним. */
.qad-head-l > div { min-width: 0; overflow: hidden; }
.qad-name { white-space: nowrap; }
.qad-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Две строки — имя и состояние — по высоте укладываются в кружок слева (40px).
   Без заданной высоты строк блок вырастал выше кружка и «выезжал» за него. */
.qad-name { line-height: 1.18; }
.qad-role { line-height: 1.25; }

/* Состояние «онлайн»: точка + слово, точка ровно по середине строки. */
.qad-role--live {
  display: flex; align-items: center; gap: 6px;
  color: var(--qad-gold-muted);
  /* Обрезка нужна была длинной подписи «отвечает по вашей карте».
     Тут одно короткое слово — обрезать нечего, а она подъедала точку. */
  overflow: visible;
}
/* Чистый золотой кружок, без ореола вокруг: на мелком размере ореол читался
   как тёмный квадратик за точкой и выглядел браком (замечание владельца). */
.qad-live-dot {
  flex: none; width: 7px; height: 7px; border-radius: 99px;
  background: var(--qad-gold-500);
}

.qad-moon {
  flex: none; width: 40px; height: 40px; border-radius: 99px;
  background: linear-gradient(180deg, var(--qad-violet-400), var(--qad-violet-600));
  border: 1px solid rgba(232, 194, 112, .45);
  display: flex; align-items: center; justify-content: center;
  color: var(--qad-gold-500); font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.qad-moon--sm { width: 32px; height: 32px; font-size: 15px; border-color: rgba(232,194,112,.35); box-shadow: none; }

.qad-chip {
  flex: none; margin-left: auto;
  padding: 9px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  font-size: 13px; font-weight: 600; color: var(--qad-text-dim);
  white-space: nowrap;
}
.qad-chip--ok { border-color: rgba(232,194,112,.4); color: var(--qad-gold-300); }

/* Счётчики в шапке: подписка и купленные вопросы стоят рядом и различаются
   рамкой — человек должен видеть, что у него есть и то, и другое.
   Золотая рамка — подписка (дневная норма), сиреневая — купленные пакеты. */
.qad-chips {
  flex: none; margin-left: auto;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.qad-chips .qad-chip { margin-left: 0; }

.qad-chip--sub {
  border-color: rgba(232, 194, 112, .55);
  background: rgba(232, 194, 112, .10);
  color: var(--qad-gold-200);
}
.qad-chip--pack {
  border-color: rgba(139, 92, 246, .70);
  background: rgba(107, 60, 196, .18);
  color: #CBB6FF;
}

/* ─────────────────────────────────────────────── лента сообщений */
.qad-feed {
  position: relative; flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.qad-feed::-webkit-scrollbar { width: 8px; }
.qad-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

.qad-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.qad-msg--user { align-self: flex-end; max-width: 74%; }

.qad-bubble {
  padding: 17px 21px; border-radius: 20px 20px 20px 6px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  font-size: 16.5px; line-height: 1.58; color: var(--qad-text);
  text-wrap: pretty;
}
.qad-bubble p { margin: 0 0 .7em; }
.qad-bubble p:last-child { margin-bottom: 0; }

.qad-msg--user .qad-bubble {
  border-radius: 20px 20px 6px 20px;
  border-color: rgba(232, 194, 112, .30);
  background: linear-gradient(180deg, rgba(232,194,112,.18), rgba(232,194,112,.08));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  padding: 15px 20px; font-size: 16.5px; line-height: 1.5;
  color: #F7F0E0;
}

/* ── кнопки под ответом астролога: копировать · нравится · не нравится ──
   Стоят отдельной строкой под пузырём, с отступом ровно на ширину луны,
   чтобы выстроиться по левому краю текста. Мелкие и приглушённые: это
   служебные действия, они не должны спорить с самим ответом. */
.qad-acts {
  display: flex; align-items: center; gap: 4px;
  margin: -6px 0 0 42px;          /* луна 32 + отступ 10 */
}
.qad-act {
  flex: none; width: 30px; height: 30px; padding: 0; line-height: 0;
  border: 0; border-radius: 9px; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--qad-text-dimmer);
  transition: color .16s, background .16s;
}
.qad-act:hover { color: var(--qad-gold-300); background: rgba(255, 255, 255, .06); }
.qad-act:focus-visible { outline: 2px solid var(--qad-gold-500); outline-offset: 2px; }
.qad-act svg { width: 16px; height: 16px; display: block; }
/* Выбранная оценка остаётся видимой: человек листает переписку и видит,
   что ему понравилось, а что нет. */
.qad-act.is-on { color: var(--qad-gold-500); background: rgba(232, 194, 112, .15); }
.qad-act--down.is-on { color: #F3B4AB; background: rgba(243, 180, 171, .12); }
.qad-act.is-done { color: var(--qad-gold-300); }
/* Короткая подпись «скопировано» — гаснет сама */
.qad-acts__note {
  font-size: 12px; color: var(--qad-text-dimmer); margin-left: 2px;
  opacity: 0; transition: opacity .18s ease; white-space: nowrap;
}
.qad-acts__note.is-on { opacity: 1; }

/* «печатает…» */
.qad-typing { display: flex; gap: 5px; align-items: center; padding: 19px 21px; }
.qad-typing i {
  width: 7px; height: 7px; border-radius: 99px; background: var(--qad-gold-500);
  opacity: .45; animation: qadDot 1.2s infinite ease-in-out;
}
.qad-typing i:nth-child(2) { animation-delay: .18s; }
.qad-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes qadDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* служебная строка по центру — не выдаём её за реплику астролога */
.qad-note {
  align-self: center; max-width: 90%; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--qad-text-dimmer);
  padding: 8px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.qad-note--bad { color: #F3B4AB; border-color: rgba(243, 180, 171, .28); background: rgba(243, 180, 171, .07); }

/* ───────────────────────────────── оффер-реплика (стекло L3) */
.qad-offer {
  flex: 1; min-width: 0;
  padding: 24px 26px; border-radius: 20px 20px 20px 6px;
  border: 1px solid rgba(232, 194, 112, .34);
  background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 48%, rgba(232,194,112,.07) 100%);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.30), 0 24px 60px rgba(0,0,0,.40);
  display: flex; flex-direction: column; gap: 20px;
  animation: qadRise .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes qadRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.qad-offer-title {
  font-size: 23px; font-weight: 800; letter-spacing: -.3px; color: var(--qad-gold-300);
  line-height: 1.3;
}
.qad-offer-lead { font-size: 16px; line-height: 1.55; color: var(--qad-text-soft); text-wrap: pretty; }

/* ── ряды тарифов ── */
.qad-plans { display: flex; flex-direction: column; gap: 11px; }

.qad-plan {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px; border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .035);
  cursor: pointer; text-align: left; width: 100%;
  font: inherit; color: inherit;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.qad-plan:hover { border-color: rgba(232, 194, 112, .5); background: rgba(255, 255, 255, .06); }
.qad-plan:focus-visible { outline: 2px solid var(--qad-gold-500); outline-offset: 2px; }

.qad-plan.is-active {
  padding: 17px 18px;
  border-color: rgba(232, 194, 112, .75);
  background: linear-gradient(180deg, rgba(232,194,112,.16), rgba(232,194,112,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 30px rgba(217,174,95,.14);
}
.qad-plan-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qad-plan-name { font-size: 16.5px; font-weight: 700; color: var(--qad-text-hi); }
.qad-plan.is-active .qad-plan-name { color: var(--qad-gold-100); }
.qad-plan-note { font-size: 14px; color: var(--qad-text-dimmer); }
.qad-plan.is-active .qad-plan-note { color: var(--qad-gold-muted); }
.qad-plan-price {
  display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
  font-size: 20px; font-weight: 800; color: var(--qad-text-hi);
  font-variant-numeric: tabular-nums;
}
.qad-plan.is-active .qad-plan-price { color: var(--qad-gold-100); }
.qad-plan-per { font-size: 14px; font-weight: 500; color: var(--qad-gold-muted); }

.qad-badge {
  position: absolute; top: -11px; left: 16px;
  padding: 4px 12px; border-radius: 99px;
  background: linear-gradient(180deg, var(--qad-gold-300), var(--qad-gold-700));
  color: var(--qad-gold-ink); font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  white-space: nowrap;
}

/* ── главная кнопка ── */
.qad-cta {
  width: 100%; height: 60px; border: 0; border-radius: 17px; cursor: pointer;
  background: linear-gradient(180deg, var(--qad-gold-200), var(--qad-gold-700));
  color: var(--qad-gold-ink); font: inherit; font-size: 18.5px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px rgba(217,174,95,.28);
  transition: filter .16s, transform .16s;
}
.qad-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.qad-cta:active { transform: none; }
.qad-cta[disabled] { opacity: .75; cursor: default; filter: none; transform: none; }
.qad-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.qad-trust { text-align: center; font-size: 13.5px; color: var(--qad-text-dimmer); }
.qad-err {
  font-size: 14px; line-height: 1.45; color: #F3B4AB; text-align: center;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(243, 180, 171, .08); border: 1px solid rgba(243, 180, 171, .25);
}

/* ─────────────────────────────────────────────── композер */
.qad-composer {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-top: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.qad-input {
  /* Многострочное поле: одна строка в покое, до четырёх при длинном вопросе.
     ⚠️ font-family, а НЕ сокращение font: сокращение сбрасывает line-height,
     и межстрочный интервал уезжал к унаследованному. Здесь же раньше стоял
     line-height: 52px от однострочной таблетки — он разгонял строки на пол-экрана. */
  flex: 1; min-width: 0; min-height: 52px; max-height: 122px;
  padding: 14px 20px;
  border-radius: 22px; border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(10, 8, 18, .45); color: var(--qad-text-hi);
  font-family: inherit; font-size: 16px; line-height: 1.45;
  resize: none; overflow-y: hidden;
  /* Тонкая полоса прокрутки в цвет темы — заметна, только когда нужна. */
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 194, 112, .28) transparent;
}
.qad-input::-webkit-scrollbar { width: 4px; }
.qad-input::-webkit-scrollbar-track { background: transparent; }
.qad-input::-webkit-scrollbar-thumb {
  background: rgba(232, 194, 112, .28); border-radius: 4px;
}
.qad-input::-webkit-scrollbar-thumb:hover { background: rgba(232, 194, 112, .45); }
.qad-input::placeholder { color: var(--qad-text-ph); }
.qad-input:focus { outline: none; border-color: rgba(232, 194, 112, .45); }
.qad-input:disabled { cursor: not-allowed; }

.qad-send {
  flex: none; width: 52px; height: 52px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(180deg, var(--qad-gold-200), var(--qad-gold-700));
  color: var(--qad-gold-ink); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: filter .16s;
}
.qad-send:hover { filter: brightness(1.06); }
.qad-send:disabled {
  background: linear-gradient(180deg, #C4A874, #A98F5E);
  color: #3A2E19; opacity: .75; cursor: default; filter: none;
}

/* ─────────────────────────────────────────────── подписка активна */
/* ⚠️ display НЕ вешаем на сам класс: авторское правило перебивает атрибут
   hidden (у браузера это всего лишь `[hidden]{display:none}` в его таблице),
   и панель оставалась на экране пустой полоской с рамкой над полем ввода.
   Показываем её только когда атрибута нет. */
.qad-sub-bar[hidden] { display: none; }
.qad-sub-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px; border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13.5px; color: var(--qad-text-dimmer);
  background: rgba(255, 255, 255, .02);
}
.qad-sub-bar b { color: var(--qad-gold-300); font-weight: 700; }

/* ── Часовой пояс: спрашиваем ТОЛЬКО после покупки подписки ──
   Одна строка, один клик. Список нужен лишь тем, у кого определение соврало. */
.qad-tz-bar[hidden] { display: none; }
.qad-tz-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 22px; border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13.5px; color: var(--qad-text-dimmer);
  background: rgba(255, 255, 255, .02);
}
.qad-tz-pick { display: flex; align-items: center; gap: 8px; }
.qad-tz-select {
  font: inherit; font-size: 13.5px; color: var(--qad-text-hi);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px; padding: 6px 10px; max-width: 210px;
  cursor: pointer;
}
.qad-tz-select option { background: #17102b; color: #f2ecff; }
.qad-tz-ok {
  font: inherit; font-size: 13.5px; font-weight: 700;
  /* Золотой фон — текст ТЁМНЫЙ (js-rules §9): иначе кнопка сливается с фоном. */
  color: #1a1206 !important; -webkit-text-fill-color: #1a1206 !important;
  background: linear-gradient(135deg, var(--qad-gold-300), var(--qad-gold-500));
  border: 0; border-radius: 8px; padding: 7px 16px; cursor: pointer;
}
.qad-tz-ok:disabled { opacity: .55; cursor: default; }
@media (max-width: 480px) {
  .qad-tz-bar { padding: 12px 16px; }
  .qad-tz-pick { width: 100%; }
  .qad-tz-select { flex: 1; max-width: none; }
}
.qad-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--qad-text-dim);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 3px;
}
.qad-link:hover { color: var(--qad-text-hi); }

/* ─────────────────────────────────────────────── обёртка на странице */
.qad-shell { max-width: 660px; margin: 0 auto; padding: 0 16px; }
.qad-lead { max-width: 660px; margin: 0 auto 18px; padding: 0 16px; text-align: center; }
.qad-lead h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; font-weight: 400; color: #F2EEF8; margin: 0 0 .4rem;
}
.qad-lead p { font-size: 15.5px; line-height: 1.55; color: #9C93AE; margin: 0; }

/* демонстрационный режим: видно, что это витрина, а не чужая переписка */
.qad-demo-note {
  margin: 0 auto 14px; max-width: 660px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(232, 194, 112, .28); background: rgba(232, 194, 112, .07);
  color: var(--qad-gold-300, #F3D79A); font-size: 13.5px; line-height: 1.45; text-align: center;
}

/* ─────────────────────────────────────────────── адаптив */
@media (max-width: 720px) {
  .qad {
    min-height: 340px;
    max-height: min(640px, 72vh);
    border-radius: 22px;
  }
  .qad-head { padding: 15px 16px; gap: 8px; }
  /* На телефоне кружок меньше (34px) — поджимаем строки, чтобы имя и «онлайн»
     ровно уложились в его высоту и не выступали сверху и снизу. */
  .qad-name { line-height: 1.1; }
  .qad-role { line-height: 1.15; }
  .qad-chip { padding: 7px 10px; font-size: 12px; }
  .qad-moon { width: 34px; height: 34px; font-size: 16px; }
  .qad-feed { padding: 16px; gap: 12px; }
  .qad-msg { max-width: 92%; }
  .qad-acts { margin-left: 44px; }   /* на телефоне луна крупнее */
  .qad-act { width: 28px; height: 28px; border-radius: 8px; }
  .qad-msg--user { max-width: 84%; }
  .qad-bubble { padding: 15px 18px; font-size: 15.5px; line-height: 1.55; }
  .qad-offer { padding: 18px 18px; gap: 16px; border-radius: 18px 18px 18px 6px; }
  .qad-offer-title { font-size: 20px; }
  .qad-offer-lead { font-size: 15px; }
  .qad-plan { padding: 14px 15px; }
  .qad-plan.is-active { padding: 15px; }
  .qad-plan-name { font-size: 15.5px; }
  .qad-plan-price { font-size: 18px; }
  .qad-cta { height: 56px; font-size: 17px; }
  .qad-composer { padding: 12px 14px; gap: 9px; }
  /* ровно 16px, иначе iOS зумит страницу при фокусе */
  .qad-input { font-size: 16px; min-height: 48px; line-height: 1.45; padding: 12px 16px; max-height: 116px; }
  .qad-send { width: 48px; height: 48px; }
  .qad-lead h2 { font-size: 1.6rem; }
}

/* Слабые устройства и браузеры без backdrop-filter: тот же градиент, но плотный */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qad-head, .qad-bubble, .qad-composer { background: rgba(28, 22, 42, .92); }
  .qad-offer { background: linear-gradient(160deg, rgba(40,32,58,.96), rgba(28,22,42,.96)); }
}

@media (prefers-reduced-motion: reduce) {
  .qad-offer { animation: none; }
  .qad-typing i { animation: none; }
  .qad-cta:hover { transform: none; }
}

/* ─────────────────────────────────────────── режим «только диалог»
   /расчет3/?dialog=1 — страница превращается в экран разговора: остальная
   тестовая воронка прячется, чтобы смотреть и показывать именно диалог. */
body.qad-only { background: #08070D; }
body.qad-only > *:not(#qaDialogSection):not(script):not(style):not(link) { display: none !important; }
body.qad-only #qaDialogSection { padding: 28px 0 40px !important; }
@media (max-width: 720px) {
  body.qad-only #qaDialogSection { padding: 14px 0 24px !important; }
  body.qad-only .qad { height: calc(100dvh - 150px); max-height: none; }
}