/*
 * ChatDemo — рамка мессенджера с переписко́й, которая печатается по шагам.
 * Отдельный файл: подключается только на страницах с демо (главная, /ai,
 * нишевые), а не на всех.
 *
 * Высота ленты зафиксирована заранее по самому длинному сценарию: вёрстка не
 * должна прыгать при появлении сообщений (ТЗ, раздел 7.6, и бюджет CLS ≤ 0.05).
 */

.demo { display: flex; flex-direction: column; gap: var(--s4); }

/* --- Переключатель сценариев -------------------------------------------- */

.demo__switch {
  display: flex;
  gap: var(--s2);
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}
.demo__switch button {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.demo__switch button:hover { background: rgba(255,255,255,.6); }
.demo__switch button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 420px) {
  .demo__switch { flex-direction: column; }
}

/* --- Рамка телефона ------------------------------------------------------ */

.phone {
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.phone__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 12px var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.phone__avatar {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
}
.phone__who { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 15px; }
.phone__status { font-size: 12.5px; color: var(--ok-deep); display: flex; align-items: center; gap: 5px; }
.phone__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.phone__channel { margin-left: auto; width: 22px; height: 22px; }

/* Лента сообщений */
.phone__feed {
  --feed-h: 460px;
  height: var(--feed-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,122,26,.05), transparent 45%),
    var(--surface);
  scrollbar-width: thin;
}
.demo--wide .phone__feed { --feed-h: 560px; }
@media (max-width: 560px) { .phone__feed { --feed-h: 430px; } }

/* --- Пузыри -------------------------------------------------------------- */

.bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
  animation: bubble-in .26s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.bubble--in {
  align-self: flex-end;
  background: #E7FBD9;
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.bubble--out {
  align-self: flex-start;
  background: var(--paper);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}

.bubble__who {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

/* Индикатор «печатает…» */
.typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 5px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: typing 1.1s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .16s; }
.typing span:nth-child(3) { animation-delay: .32s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: .6; } }

/* --- Карточки объектов --------------------------------------------------- */

.obj-cards { align-self: flex-start; display: grid; gap: var(--s2); width: 86%; }
.obj {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  animation: bubble-in .26s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .obj { animation: none; } }
.obj__thumb {
  width: 56px; height: 56px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.obj__thumb svg { width: 26px; height: 26px; }
.obj__name { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 14.5px; }
.obj__meta { font-size: 12.5px; color: var(--ink-3); }
.obj__price {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 440px) {
  .obj { flex-wrap: wrap; }
  .obj__price { margin-left: 68px; }
}

/* --- Карточка платежа ---------------------------------------------------- */

.pay {
  align-self: flex-start;
  width: 86%;
  padding: var(--s4);
  border-radius: 14px;
  background: var(--paper);
  border: 1.5px solid var(--brand-line);
  box-shadow: var(--shadow-sm);
  animation: bubble-in .26s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .pay { animation: none; } }
.pay__title { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-deep); }
.pay__amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  color: var(--ink);
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.pay__method { font-size: 13.5px; color: var(--ink-2); }
.pay__hold { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-3); }

/* --- Квитанция ----------------------------------------------------------- */

.receipt {
  align-self: flex-end;
  width: 190px;
  padding: 10px;
  border-radius: 16px 16px 5px 16px;
  background: #E7FBD9;
  box-shadow: var(--shadow-sm);
  animation: bubble-in .26s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .receipt { animation: none; } }
.receipt__sheet {
  height: 118px;
  border-radius: 10px;
  background: var(--paper);
  display: grid;
  place-items: center;
  gap: 6px;
  padding: var(--s3);
}
.receipt__sheet svg { width: 30px; height: 30px; color: var(--ink-3); }
.receipt__caption { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

/* --- Подтверждение и финальная плашка ------------------------------------ */

.confirm {
  align-self: flex-start;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 5px;
  background: var(--ok-soft);
  border: 1px solid #BFE5CF;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
  animation: bubble-in .26s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .confirm { animation: none; } }

.outro {
  margin-top: var(--s2);
  padding: 14px var(--s4);
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  animation: bubble-in .3s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { .outro { animation: none; } }

/* --- Подпись под демо ---------------------------------------------------- */

.demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  justify-content: space-between;
}
.demo__disclaimer { font-size: 13px; color: var(--ink-3); }
.demo__replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.demo__replay:hover { background: var(--surface); }
.demo__channels { font-size: 14px; color: var(--ink-2); text-align: center; }

/* Демо во всю ширину на /ai */
.demo--wide { max-width: 780px; margin-inline: auto; }