/* ИИ-консультант «Фамилия». Всё внутри .fa — со стилями шаблона не пересекается.
   Цвет — из настройки Аспро (--theme-base-color), иначе бирюзовый сайта. */

.fa {
  --fa-accent: var(--theme-base-color, #23babf);
  --fa-text: #222;
  --fa-muted: #6b7378;
  --fa-line: #e3e8ea;
  --fa-soft: #f3f7f8;
  --fa-bg: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fa-text);
}
.fa *, .fa *::before, .fa *::after { box-sizing: border-box; }
.fa button { font: inherit; cursor: pointer; }

/* Кнопка: справа внизу, выше полосы «Имеются противопоказания». */
.fa-launch {
  position: fixed; right: 20px; bottom: 96px; z-index: 99980;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 26px;
  background: var(--fa-accent); color: #fff; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: transform .15s ease;
}
.fa-launch:hover { transform: translateY(-2px); }
.fa.is-open .fa-launch { display: none; }

.fa-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 99990;
  width: 380px; height: min(600px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--fa-bg); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.fa-panel[hidden] { display: none; }

.fa-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--fa-accent); color: #fff; }
.fa-ava { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.fa-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fa-tt b { font-size: 15px; }
.fa-tt small { font-size: 12px; opacity: .85; }
.fa-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 24px; line-height: 1; flex: none; }
.fa-x:hover { background: rgba(255, 255, 255, .3); }

.fa-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--fa-soft); overscroll-behavior: contain; }
.fa-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; word-wrap: break-word; }
.fa-bot { align-self: flex-start; background: var(--fa-bg); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.fa-user { align-self: flex-end; background: var(--fa-accent); color: #fff; border-bottom-right-radius: 4px; }
.fa-bot a { color: var(--fa-accent); word-break: break-all; }

.fa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-chips button { padding: 7px 12px; border: 1px solid var(--fa-accent); border-radius: 999px; background: var(--fa-bg); color: var(--fa-accent); font-size: 14px; }
.fa-chips button:hover { background: var(--fa-accent); color: #fff; }

.fa-card { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.fa-near { font-size: 13px; color: var(--fa-muted); padding: 0 2px; }
.fa-near small { font-size: 12px; }
.fa-act {
  display: inline-block; padding: 10px 16px; border: 0; border-radius: 10px;
  background: var(--fa-accent); color: #fff !important; font-weight: 600; text-decoration: none; text-align: center;
}
.fa-act:hover { filter: brightness(.93); }
.fa-act-urgent { align-self: flex-start; background: #c62828; }

.fa-typing { display: flex; gap: 4px; padding: 12px 14px; }
.fa-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--fa-muted); animation: fa-dot 1s infinite ease-in-out; }
.fa-typing span:nth-child(2) { animation-delay: .15s; }
.fa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes fa-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.fa-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--fa-line); background: var(--fa-bg); }
.fa-form textarea {
  flex: 1; min-height: 40px; max-height: 110px; padding: 9px 12px; resize: none;
  font: inherit; color: inherit; border: 1px solid var(--fa-line); border-radius: 12px; outline: none; background: var(--fa-bg);
}
.fa-form textarea:focus { border-color: var(--fa-accent); }
.fa-form button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fa-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.fa-note { margin: 0; padding: 0 12px 10px; font-size: 11px; line-height: 1.35; color: var(--fa-muted); background: var(--fa-bg); }
.fa-note a { color: var(--fa-muted); }

@media (max-width: 600px) {
  .fa-launch { right: 12px; bottom: 140px; height: 48px; padding: 0 14px 0 12px; }
  .fa-launch span { display: none; }
  .fa-launch { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .fa-panel { inset: 0; width: auto; height: 100%; border-radius: 0; }
  html.fa-lock, html.fa-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .fa-launch { transition: none; } .fa-typing span { animation: none; opacity: .7; } }