/* FR apps — лендинг чат-ботов (bots.html). Подключается после mini-apps.css: те же токены и блоки, здесь только переписки в телефонах и платформы. */

/* первый экран: телефон с перепиской вместо фото */
.hero__chat{position:relative;display:flex;justify-content:center;height:640px}
.hero__chat .phone{position:relative;z-index:1}
.hero__chat .float{z-index:2}
.hero__chat .float--a{left:0;top:auto;bottom:6px}
.hero__chat .float--b{right:0;top:-6px}
.hero-chip{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.price-chip--ghost{background:rgba(255,255,255,.7);color:var(--warm-ink);border:1px solid rgba(12,17,80,.12)}

/* переписка */
.chat{flex:1;overflow:hidden;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:#dfe8f3}
.demo .chat{justify-content:flex-start}
.chat__day{align-self:center;padding:3px 9px;border-radius:99px;background:rgba(12,17,80,.18);color:#fff;font-size:10px;font-weight:500}
.msg{max-width:84%;padding:7px 10px 6px;border-radius:14px;font-size:11.5px;line-height:1.38;background:#fff;color:var(--navy-900);box-shadow:0 1px 1px rgba(12,17,80,.08)}
.msg small{display:block;text-align:right;font-size:9px;color:var(--n-400);margin-top:2px}
.msg--in{align-self:flex-start;border-bottom-left-radius:4px}
.msg--out{align-self:flex-end;background:#e2f6cf;border-bottom-right-radius:4px}
.msg--out small{color:#5fa748}
.msg b{font-weight:600}
.kb{align-self:flex-start;width:84%;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.kb span{padding:7px 4px;border-radius:9px;background:rgba(40,70,120,.32);color:#fff;font-size:10.5px;font-weight:500;text-align:center}
.kb .w{grid-column:1/-1}
.typing{align-self:flex-start;display:flex;gap:3px;padding:9px 11px;border-radius:14px;border-bottom-left-radius:4px;background:#fff}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--n-400)}
@media (prefers-reduced-motion:no-preference){
  .typing i{animation:blink 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
  @keyframes blink{50%{opacity:.25}}
}
.ph-ava{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px;background:linear-gradient(135deg,#4fc3e6,#2f6bf2)}
.ph-head--chat{justify-content:flex-start;gap:10px}
.ph-head--chat div{text-align:left}
.ph-head--chat small{color:var(--text-brand)!important}
.chat-input{display:flex;align-items:center;gap:8px;padding:8px 10px 20px;background:var(--bg-page)}
.chat-input span{flex:1;padding:8px 12px;border-radius:99px;background:var(--bg-surface-hover);font-size:11px;color:var(--text-3)}
.chat-input i{width:28px;height:28px;border-radius:50%;background:var(--bg-brand);flex:none}

/* Instagram Direct */
.chat--ig{background:#fff}
.chat--ig .msg--in{background:#efeff3}
.chat--ig .msg--out{background:linear-gradient(135deg,#6a3df0,#a034e0);color:#fff}
.chat--ig .msg--out small{color:rgba(255,255,255,.7)}
.ph-ava--ig{background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.ig-post{align-self:center;width:72%;padding:8px;border-radius:12px;border:1px solid var(--n-200);font-size:10.5px;color:var(--n-600);display:flex;gap:8px;align-items:center}
.ig-post i{width:34px;height:34px;border-radius:8px;flex:none;background:linear-gradient(135deg,#fbd3e9,#bb377d)}
.ig-post b{display:block;color:var(--navy-900);font-weight:600}
.ig-link{align-self:flex-start;width:84%;padding:8px;border-radius:10px;background:#efeff3;text-align:center;font-size:10.5px;font-weight:600;color:#3d5afe}

/* ИИ-консультант */
.msg--ai{position:relative}
.msg__tag{display:inline-flex;align-items:center;gap:4px;margin-bottom:3px;font-size:9px;font-weight:600;color:var(--blue-500);text-transform:uppercase;letter-spacing:.04em}
.msg__tag svg{width:10px;height:10px}

/* платформы */
.platforms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.platform{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-md);background:var(--bg-surface)}
.platform__logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.platform__logo svg{width:22px;height:22px}
.platform b{font-weight:500;font-size:16px;line-height:1.2}
.platform p{font-size:13px;line-height:1.45;color:var(--text-2)}

/* тарифы: дешёвый слева, обе колонки равные */
@media (min-width:1025px){.plans--duo{grid-template-columns:1fr 1fr}}

/* как успеваем за 3 дня */
.fast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fast li{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-lg);border:1px solid var(--border)}
.fast li p{font-size:14px;color:var(--text-2)}

/* таймлайн «3 дня» */
.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.day{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-lg);background:var(--bg-surface)}
.day--hot{background:var(--navy-900);color:#fff}
.day--hot p{color:rgba(255,255,255,.7)!important}
.day__n{font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--text-brand);text-transform:uppercase}
.day--hot .day__n{color:var(--blue-300)}
.day p{font-size:14px;color:var(--text-2)}
.day ul{display:flex;flex-direction:column;gap:6px;font-size:13px}
.day li{display:flex;gap:8px;align-items:flex-start}
.day li svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--text-brand)}
.day--hot li svg{color:var(--blue-300)}

@media (max-width:1240px){
  .platforms{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hero__chat{max-width:460px;margin:0 auto;width:100%}
  .days{grid-template-columns:1fr 1fr}
  .fast{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero__chat{height:560px}
  .hero__chat .phone{transform:scale(.88);transform-origin:top center}
  .hero__chat .float--a{bottom:10px;left:0}
  .hero__chat .float--b{top:-6px;right:0}
  .platforms{grid-template-columns:1fr 1fr;gap:10px}
  .platform{padding:16px;gap:10px}
  .days{grid-template-columns:1fr}
  .day{padding:20px}
  .fast li{padding:20px}
}
@media (max-width:380px){
  .hero__chat{height:520px}
  .hero__chat .phone{transform:scale(.8)}
}