/* ============================================================
   Fragrance Finder — кнопка, модалка выбора канала, чат-виджет
   de-parfum.ru
   ============================================================ */

:root{
  --ff-accent:#1a1a2e;
  --ff-accent-2:#16213e;
  --ff-gold:#c9a96a;
  --ff-bg:#ffffff;
  --ff-text:#23252b;
  --ff-muted:#7a818c;
  --ff-line:#e6e8ee;
  --ff-user-bubble:#1a1a2e;
  --ff-bot-bubble:#f3f4f8;
  --ff-radius:14px;
  --ff-shadow:0 18px 60px rgba(15,18,40,.22);
}

/* ---------- Кнопка "Подобрать аромат" ---------- */
.ff-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 21px;margin-bottom:1rem;border:none;border-radius:10px;cursor:pointer;
  font:600 16px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff;background:#177585/*linear-gradient(120deg,#3f4847,#009688)*/;
  /*box-shadow:0 8px 24px rgba(100,0,79,.35);*/
  transition:transform .15s ease,box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.ff-trigger:hover{transform:translateY(-2px);/*box-shadow:0 12px 30px rgba(100,0,79,.45)*/}
.ff-trigger:active{transform:translateY(0)}
.ff-trigger svg{width:20px;height:20px;flex:0 0 auto}

/* ---------- Overlay + модалка ---------- */
.ff-overlay{
  position:fixed;inset:0;z-index:100010;display:none;
  background:rgba(12,14,28,.55);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:16px;
}
.ff-overlay.ff-open{display:flex;animation:ff-fade .2s ease}
@keyframes ff-fade{from{opacity:0}to{opacity:1}}

.ff-modal{
  width:100%;max-width:440px;background:var(--ff-bg);
  border-radius:18px;box-shadow:var(--ff-shadow);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  animation:ff-pop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes ff-pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}

.ff-modal__head{
  position:relative;padding:26px 24px 18px;
  background:linear-gradient(135deg,var(--ff-accent),var(--ff-accent-2));color:#fff;
}
.ff-modal__head h3{margin:0 0 6px;font-size:20px;font-weight:700}
.ff-modal__head p{margin:0;font-size:13.5px;opacity:.82;line-height:1.5}
.ff-modal__close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  font-size:18px;line-height:32px;text-align:center;transition:background .15s;
}
.ff-modal__close:hover{background:rgba(255,255,255,.28)}

.ff-channels{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px}
.ff-channel{
  display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer;
  border:1.5px solid var(--ff-line);border-radius:var(--ff-radius);
  text-decoration:none;color:var(--ff-text);background:#fff;
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.ff-channel:hover{border-color:#22a06b;transform:translateY(-1px);box-shadow:0 6px 18px rgba(34,160,107,.18)}
.ff-channel__ico{
  width:46px;height:46px;flex:0 0 auto;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.ff-channel__ico svg{width:26px;height:26px}
.ff-channel__ico--site{background:linear-gradient(135deg,#1f9d57,#34c759)}
.ff-channel__ico--max{background:#2d7ff9}
.ff-channel__ico--tg{background:#28a8e9}
.ff-channel__txt b{display:block;font-size:15.5px;font-weight:700;margin-bottom:2px}
.ff-channel__txt span{font-size:12.5px;color:var(--ff-muted)}
.ff-channel__arr{margin-left:auto;color:var(--ff-muted);font-size:20px}

/* ---------- Встроенный чат ---------- */
/* Окно открывается СВЕРХУ ПО ЦЕНТРУ, чтобы не перекрывать
   штатный чат сайта в правом нижнем углу. */
.ff-chat{
  position:fixed;z-index:100020;top:3vh;left:50%;transform:translateX(-50%);
  width:600px;max-width:calc(100vw - 24px);height:80vh;max-height:calc(100vh - 40px);
  background:#fff;border-radius:18px;box-shadow:var(--ff-shadow);
  display:none;flex-direction:column;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
/* Анимация появления СОХРАНЯЕТ горизонтальное центрирование. */
.ff-chat.ff-open{display:flex;animation:ff-pop-top .22s ease}
@keyframes ff-pop-top{
  from{transform:translateX(-50%) translateY(-14px);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}
}

.ff-chat__head{
  padding:16px 18px;background:linear-gradient(135deg,var(--ff-accent),var(--ff-accent-2));
  color:#fff;display:flex;align-items:center;gap:12px;flex:0 0 auto;
}
.ff-chat__avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.ff-chat__avatar svg{width:22px;height:22px}
.ff-chat__title b{display:block;font-size:15px}
.ff-chat__title span{font-size:11.5px;opacity:.8}
.ff-chat__head .ff-modal__close{position:static}
.ff-chat__clear{
  margin-left:auto;width:30px;height:30px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.ff-chat__clear:hover{background:rgba(255,255,255,.28)}
.ff-chat__clear svg{width:16px;height:16px}
.ff-history-sep{
  align-self:center;margin:6px 0;font-size:11px;opacity:.55;color:var(--ff-text);
  letter-spacing:.02em;text-align:center;
}

.ff-chat__body{
  flex:1 1 auto;overflow-y:auto;padding:18px 16px;background:#fafbfd;
  display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;
}
.ff-msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.ff-msg--bot{align-self:flex-start;background:var(--ff-bot-bubble);color:var(--ff-text);border-bottom-left-radius:4px}
.ff-msg--user{align-self:flex-end;background:var(--ff-user-bubble);color:#fff;border-bottom-right-radius:4px}
.ff-msg a{color:var(--ff-gold);font-weight:600}
.ff-msg--bot a{color:#b5893f}

/* карточки товаров внутри ответа */
.ff-cards{display:flex;flex-direction:column;gap:10px;align-self:flex-start;max-width:92%;width:100%}
.ff-card{display:flex;flex-direction:column;border:1px solid var(--ff-line);border-radius:12px;background:#fff;color:var(--ff-text);transition:box-shadow .15s,transform .12s;overflow:hidden}
.ff-card:hover{box-shadow:0 6px 18px rgba(15,18,40,.1);transform:translateY(-1px)}
.ff-card__link{display:flex;gap:12px;padding:10px;text-decoration:none;color:inherit}
.ff-card img{width:60px;height:60px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#f0f1f5}
.ff-card__info b{display:block;font-size:13.5px;line-height:1.3;margin-bottom:3px}
.ff-card__info .ff-card__brand{font-size:11.5px;color:var(--ff-muted)}
.ff-card__info .ff-card__price{display:block;font-size:13px;font-weight:700;color:var(--ff-accent);margin-top:4px}
.ff-card__info .ff-card__price--na{color:var(--ff-muted);font-weight:600}
.ff-card__info .ff-card__vols{display:block;font-size:11px;color:var(--ff-muted);margin-top:3px}

/* чипы-подсказки */
.ff-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:92%}
.ff-chip{padding:7px 14px;border:1px solid var(--ff-line);border-radius:18px;background:#fff;cursor:pointer;font:500 13px inherit;color:var(--ff-accent);transition:border-color .15s,background .15s}
.ff-chip:hover{border-color:var(--ff-gold);background:#fbf7ef}

.ff-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 16px;background:var(--ff-bot-bubble);border-radius:16px;border-bottom-left-radius:4px}
.ff-typing span{width:7px;height:7px;border-radius:50%;background:#b9bfca;animation:ff-blink 1.2s infinite}
.ff-typing span:nth-child(2){animation-delay:.2s}
.ff-typing span:nth-child(3){animation-delay:.4s}
@keyframes ff-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.ff-chat__foot{flex:0 0 auto;border-top:1px solid var(--ff-line);padding:12px;background:#fff}
.ff-chat__inputwrap{display:flex;align-items:flex-end;gap:8px;background:#f3f4f8;border-radius:24px;padding:6px 6px 6px 8px}
.ff-chat__attach{width:38px;height:38px;flex:0 0 auto;border:none;border-radius:50%;cursor:pointer;background:transparent;color:#7a818c;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.ff-chat__attach:hover{color:var(--ff-accent);background:#e9ebf2}
.ff-chat__attach svg{width:20px;height:20px}
.ff-chat__mic.ff-rec{color:#fff;background:#e0245e;animation:ff-pulse 1.1s infinite}
@keyframes ff-pulse{0%{box-shadow:0 0 0 0 rgba(224,36,94,.45)}70%{box-shadow:0 0 0 9px rgba(224,36,94,0)}100%{box-shadow:0 0 0 0 rgba(224,36,94,0)}}
.ff-chat__input{flex:1 1 auto;border:none;background:transparent;resize:none;outline:none;font:400 14px/1.4 inherit;max-height:96px;padding:8px 0;color:var(--ff-text)}
.ff-chat__send{width:38px;height:38px;flex:0 0 auto;border:none;border-radius:50%;cursor:pointer;background:var(--ff-accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ff-chat__send:hover{background:var(--ff-gold)}
.ff-chat__send:disabled{opacity:.4;cursor:default}
.ff-chat__send svg{width:18px;height:18px}
.ff-consent{font-size:10.5px;color:var(--ff-muted);text-align:center;margin-top:8px;line-height:1.4}
.ff-consent a{color:var(--ff-muted);text-decoration:underline}

@media(max-width:480px){
  /* На телефоне — почти на весь экран, но С ОТСТУПОМ СНИЗУ ≥100px,
     чтобы фиксированное меню сайта внизу не перекрывало чат.
     Отступ учитывает безопасную зону iOS (env(safe-area-inset-bottom)). */
  .ff-chat{
    top:0;left:0;transform:none;width:100%;border-radius:0;
    height:auto;max-height:none;
    /*bottom:calc(100px + env(safe-area-inset-bottom, 0px));*/
	bottom:0;
	max-width:100%;
	z-index:99999999;
  }
  .ff-chat.ff-open{animation:ff-pop .22s ease}
}