/* ============================================================
   KidmaTech — страница «Примеры наших ботов» (/examples/)
   Только то, чего нет в styles.css. Цвета сайта — из tokens.css.
   Исключение — окно чата: оно нарочно нарисовано как WhatsApp на
   телефоне клиентки (решение Дианы 13.10.2026), поэтому цвета у него
   свои, WhatsApp: в светлой теме сайта — светлый WhatsApp, в тёмной —
   тёмный (правка Дианы 15.10.2026, p537: белое окно на тёмной теме слепит).
   Подключать ПОСЛЕ tokens.css и styles.css.
   ============================================================ */

main > section[id] { scroll-margin-block-start: calc(var(--space-8) + var(--space-4)); }

.ex-intro { padding-block-end: 0; }
.ex-intro h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.ex-intro .lead {
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  max-width: 46em;
  margin-block-start: var(--space-4);
}

/* ---------- Вкладки ботов ---------- */
.ex-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.ex-tab {
  font: inherit; font-weight: 700; font-size: var(--text-base);
  border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5);
  cursor: pointer; text-align: start;
  background: var(--color-surface); color: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-border-strong);
  min-height: 44px;
}
.ex-tab small { display: block; font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-muted); }
/* Выбранная вкладка — синим сайта, как плашки .crm-tag.is-us (правка Дианы 15.10.2026, p535). */
.ex-tab[aria-selected="true"] { background: var(--color-brand); color: var(--color-on-brand); box-shadow: none; }
.ex-tab[aria-selected="true"] small { color: var(--color-on-brand); }
.ex-tab:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 3px; }

.ex-panel { padding-block-start: var(--space-6); }
.ex-panel-lead { color: var(--color-ink-muted); max-width: 46em; margin: 0 0 var(--space-6); }

.ex-demo {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 860px) { .ex-demo { grid-template-columns: minmax(0, 1fr); } }
.ex-chat-col { min-width: 0; }
.ex-chat-col .ex-btns { margin-block-start: var(--space-4); }

/* ---------- Окно чата (WhatsApp, вид с телефона клиентки) ---------- */
.ex-chat {
  --wa-head: #008069; --wa-head-ink: #fff; --wa-ava: #fff; --wa-ava-ink: #008069;
  --wa-feed: #EFEAE2; --wa-dot: rgba(0, 0, 0, .035); --wa-dot2: rgba(0, 0, 0, .025);
  --wa-in: #fff; --wa-out: #D9FDD3; --wa-ink: #111B21; --wa-time: #5B6B75; --wa-tick: #0369A1;
  --wa-shadow: rgba(11, 20, 26, .13);
  --wa-op: #FFF4D6; --wa-op-bar: #E0A100; --wa-op-tag: #6B4800;
  --wa-sys: rgba(255, 255, 255, .95); --wa-sys-ink: #4A5A63; --wa-sys-crm: #143A82;
  --wa-warm: #7A4F00; --wa-hot: #A3221B; --wa-ok: #1E6B3A; --wa-link: #0369A1;
  --wa-foot: #F0F2F5; --wa-field: #fff; --wa-field-ink: #5B6B75; --wa-dots: #8696A0;
  --wa-frame: 0 0 0 0 transparent;
}
/* Тёмный WhatsApp — цвета его ночной темы. Два входа, как в tokens.css:
   два блока ниже одинаковые, править ПАРНО. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ex-chat {
    --wa-head: #1F2C34; --wa-head-ink: #E9EDEF; --wa-ava: #00A884; --wa-ava-ink: #0B141A;
    --wa-feed: #0B141A; --wa-dot: rgba(255, 255, 255, .03); --wa-dot2: rgba(255, 255, 255, .02);
    --wa-in: #202C33; --wa-out: #005C4B; --wa-ink: #E9EDEF; --wa-time: #C4CDD2; --wa-tick: #7FD4F8;
    --wa-shadow: rgba(0, 0, 0, .3);
    --wa-op: #3A3218; --wa-op-bar: #E0A100; --wa-op-tag: #F5C451;
    --wa-sys: #182229; --wa-sys-ink: #C4CDD2; --wa-sys-crm: #7FA8F0;
    --wa-warm: #F5C451; --wa-hot: #FF8A80; --wa-ok: #6FD39A; --wa-link: #7FD4F8;
    --wa-foot: #1F2C34; --wa-field: #2A3942; --wa-field-ink: #AEBAC1; --wa-dots: #AEBAC1;
    --wa-frame: 0 0 0 1px rgba(233, 237, 239, .14);
  }
}
:root[data-theme="dark"] .ex-chat {
  --wa-head: #1F2C34; --wa-head-ink: #E9EDEF; --wa-ava: #00A884; --wa-ava-ink: #0B141A;
  --wa-feed: #0B141A; --wa-dot: rgba(255, 255, 255, .03); --wa-dot2: rgba(255, 255, 255, .02);
  --wa-in: #202C33; --wa-out: #005C4B; --wa-ink: #E9EDEF; --wa-time: #C4CDD2; --wa-tick: #7FD4F8;
  --wa-shadow: rgba(0, 0, 0, .3);
  --wa-op: #3A3218; --wa-op-bar: #E0A100; --wa-op-tag: #F5C451;
  --wa-sys: #182229; --wa-sys-ink: #C4CDD2; --wa-sys-crm: #7FA8F0;
  --wa-warm: #F5C451; --wa-hot: #FF8A80; --wa-ok: #6FD39A; --wa-link: #7FD4F8;
  --wa-foot: #1F2C34; --wa-field: #2A3942; --wa-field-ink: #AEBAC1; --wa-dots: #AEBAC1;
    --wa-frame: 0 0 0 1px rgba(233, 237, 239, .14);
}
.ex-chat { border-radius: 22px; box-shadow: var(--wa-frame), 0 18px 48px rgba(11, 18, 48, .18); overflow: hidden; font-size: .97rem; min-width: 0; }
.ex-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--wa-head); color: var(--wa-head-ink); }
.ex-chat-head svg { flex: none; }
[dir="rtl"] .ex-back { transform: scaleX(-1); }
.ex-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--wa-ava); color: var(--wa-ava-ink); display: grid; place-items: center; font-weight: 800; flex: none; }
.ex-who { min-width: 0; }
.ex-who b { display: block; font-size: 1rem; }
.ex-who span { font-size: .8rem; opacity: .95; }
.ex-icons { margin-inline-start: auto; display: flex; gap: 18px; }

.ex-feed {
  list-style: none; margin: 0; padding: 14px 12px 18px;
  height: 560px; max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  background-color: var(--wa-feed);
  background-image: radial-gradient(var(--wa-dot) 1.5px, transparent 1.6px), radial-gradient(var(--wa-dot2) 1.2px, transparent 1.3px);
  background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px;
  font-family: var(--font-ru);
}
.ex-feed[lang="he"] { font-family: var(--font-he); }
.ex-feed[hidden] { display: none; }
.ex-feed:focus-visible { outline: 3px solid var(--color-cta); outline-offset: -3px; }

.ex-feed .msg { position: relative; max-width: 80%; padding: 6px 9px 4px; border-radius: 8px; line-height: 1.38; color: var(--wa-ink); box-shadow: 0 1px .5px var(--wa-shadow); overflow-wrap: anywhere; }
.ex-feed .msg time { display: block; font-size: .7rem; color: var(--wa-time); margin-top: 2px; text-align: end; }
.ex-feed .msg .tick { color: var(--wa-tick); margin-inline-start: 3px; }
/* бот и менеджер — слева (входящие у клиентки), клиентка — справа, зелёным */
.ex-feed .in  { align-self: flex-start; background: var(--wa-in); border-start-start-radius: 0; }
.ex-feed .out { align-self: flex-end; background: var(--wa-out); border-start-end-radius: 0; }
.ex-feed .op  { align-self: flex-start; background: var(--wa-op); border-start-start-radius: 0; box-shadow: 0 1px .5px var(--wa-shadow), inset 3px 0 0 var(--wa-op-bar); }
.ex-feed[dir="rtl"] .op { box-shadow: 0 1px .5px var(--wa-shadow), inset -3px 0 0 var(--wa-op-bar); }
.ex-feed .op .tag { display: block; font-size: .75rem; font-weight: 700; color: var(--wa-op-tag); margin-bottom: 2px; }
.ex-feed .sys { align-self: center; font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 8px; background: var(--wa-sys); color: var(--wa-sys-ink); margin: 6px 0; box-shadow: 0 1px .5px var(--wa-shadow); text-align: center; }
.ex-feed .sys::before { content: "CRM · "; font-weight: 800; color: var(--wa-sys-crm); }
.ex-feed .sys.warm { color: var(--wa-warm); }
.ex-feed .sys.hot { color: var(--wa-hot); }
.ex-feed .sys.ok { color: var(--wa-ok); }
.ex-link-hidden { color: var(--wa-link); text-decoration: underline; filter: blur(4px); user-select: none; word-break: break-all; }

.ex-typing { align-self: flex-start; background: var(--wa-in); border-radius: 8px; border-start-start-radius: 0; padding: 11px 13px; display: flex; gap: 4px; box-shadow: 0 1px .5px var(--wa-shadow); }
.ex-typing[hidden] { display: none; }
.ex-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-dots); opacity: .5; animation: ex-blink 1.2s infinite; }
.ex-typing i:nth-child(2) { animation-delay: .2s; }
.ex-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ex-blink { 50% { opacity: 1; } }

/* Пока переписка проигрывается, ещё не «пришедшие» сообщения скрыты. Класс
   ставит скрипт: без скрипта (и при reduced-motion) видна вся переписка сразу. */
.ex-playing .ex-feed > li.msg:not(.shown),
.ex-playing .ex-feed > li.sys:not(.shown) { display: none; }
.ex-playing .ex-feed > li.shown { animation: ex-pop .25s ease-out; }
@keyframes ex-pop { from { opacity: 0; transform: translateY(6px); } }

.ex-chat-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--wa-foot); }
.ex-field { flex: 1; background: var(--wa-field); border-radius: 20px; padding: 9px 14px; color: var(--wa-field-ink); font-size: .92rem; }
.ex-mic { width: 40px; height: 40px; border-radius: 50%; background: #00A884; display: grid; place-items: center; flex: none; }

/* ---------- Правая колонка ---------- */
.ex-side { min-width: 0; }
.ex-side h2 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.ex-goal { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); margin: 0 0 var(--space-6); box-shadow: var(--shadow-sm); }
.ex-goal p { margin: 0 0 var(--space-2); font-weight: 700; }
.ex-goal ul { margin: 0; }
.ex-side ul { padding-inline-start: 1.2em; line-height: 1.55; color: var(--color-ink-muted); }
.ex-see { margin: 0 0 var(--space-6); }
.ex-side li { margin-bottom: var(--space-2); }
.ex-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Ролик ---------- */
.ex-video-lead { color: var(--color-ink-muted); max-width: 46em; }
.ex-player { margin-block-start: var(--space-6); }
.ex-player video {
  /* Фон идёт за темой: без скрипта заставки нет, и чёрный прямоугольник
     на светлой теме — та самая претензия 21.09.2026. */
  background: var(--color-bg);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.ex-final { text-align: center; }
.ex-final > h2::after { margin-inline: auto; }
.ex-final .lead { color: var(--color-ink-muted); margin: var(--space-4) auto var(--space-6); max-width: 40em; }

@media (prefers-reduced-motion: reduce) {
  .ex-playing .ex-feed > li.shown { animation: none; }
  .ex-typing i { animation: none; }
}