/* ============================================================
   DentX · AI-помощник продаж
   Фирменные цвета (синий/мятный), мобильная адаптация.
   ============================================================ */

/* ── Шапка ── */
.sai-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.sai-header-inner {
  max-width: 920px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
}
.sai-header .logo { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--primary); }
.sai-header .logo span { color: var(--accent); }
.sai-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--primary);
  background: var(--card-tint); padding: 6px 12px; border-radius: 999px;
}
.sai-back { margin-left: auto; }

/* ── Контейнер ── */
.sai-wrap { max-width: 920px; margin: 0 auto; padding: 28px 20px 64px; }

.sai-intro { text-align: center; margin-bottom: 24px; }
.sai-intro h1 {
  font-size: clamp(24px, 4.5vw, 34px);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sai-intro p { max-width: 620px; margin: 10px auto 0; font-size: 15px; }

/* ── Карточки общие ── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow);
}

/* ── Форма ── */
.sai-form { margin-bottom: 20px; }
.field { display: block; margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.sai-form textarea, .sai-form select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  background: #fff; transition: border-color .15s;
}
.sai-form textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.sai-form textarea:focus, .sai-form select:focus { outline: none; border-color: var(--primary); }

.sai-controls { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.sai-service { flex: 1; min-width: 220px; margin-bottom: 0; }
.sai-actions { display: flex; gap: 10px; align-items: center; }

/* Привязка к лиду (4.D-1) — опциональное поле под контролами */
.sai-lead { margin-top: 16px; }
.sai-lead > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--text); }
.sai-lead-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sai-lead-row select { flex: 1; min-width: 220px; }
.sai-lead-create { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sai-lead-create input { flex: 1; min-width: 150px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; }
.sai-lead-create input:focus { outline: none; border-color: var(--primary); }
.sai-lead-msg { margin-top: 8px; font-size: 13px; font-weight: 600; }
.sai-lead-msg.err { color: var(--danger); }
.sai-lead-msg.ok { color: var(--success); }

.sai-msg { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; }
.sai-msg.err { background: #FDECEA; color: var(--danger); }
.sai-msg.ok { background: #E9F8F0; color: var(--success); }

/* Предложение «дожать» (4.D-2) */
.sai-followup { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  background: #FEF3E2; border: 1px solid #F6D9A8; border-radius: var(--radius); padding: 14px 18px; }
.sai-followup-text { flex: 1; min-width: 200px; }
.sai-followup-text b { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); color: #9A6A12; }
.sai-followup-text span { display: block; font-size: 14px; color: var(--text); margin-top: 3px; }
.sai-followup-msg { width: 100%; font-size: 13px; font-weight: 600; }
.sai-followup-msg.ok { color: var(--success); }
.sai-followup-msg.err { color: var(--danger); }

/* Маленькая кнопка (для копирования фраз/вариантов) */
.btn-sm { padding: 8px 14px; font-size: 13px; min-height: 38px; border-radius: var(--radius-sm); }

/* ── Кнопка «Спасти ситуацию» (экстренный дожим) ── */
.btn-rescue {
  margin-top: 16px;
  background: linear-gradient(135deg, #FF6B3D, #E03E1A);
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(224, 62, 26, 0.28);
}
.btn-rescue:hover { background: linear-gradient(135deg, #FF7C52, #C9350F); transform: translateY(-2px); }
.sai-rescue-hint { margin-top: 8px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ── Блок результата «Спасти ситуацию» ── */
.sai-rescue {
  border: 2px solid #E03E1A;
  background: linear-gradient(180deg, #FFF3EE 0%, #fff 55%);
}
.sai-rescue-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: 17px; color: #C9350F; margin-bottom: 12px;
}
.sai-rescue-text {
  white-space: pre-wrap; font-size: 15.5px; line-height: 1.6; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.sai-rescue-why {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 12px; font-size: 13.5px; color: #B9430E;
}
.sai-rescue-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sai-rescue-actions .btn { flex: 1; justify-content: center; min-width: 160px; }

/* ── Загрузка скриншота ── */
.sai-shot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 4px; }
.sai-shot-hint { font-size: 13px; color: var(--text-muted); }
.sai-shot-status { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.sai-shot-status.busy { background: var(--card-tint); color: var(--primary); }
.sai-shot-status.ok { background: #E9F8F0; color: var(--accent-dark); }
.sai-shot-status.err { background: #FDECEA; color: var(--danger); }
.sai-mini-spinner {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid rgba(27,79,138,0.2); border-top-color: var(--primary);
  animation: sai-spin .7s linear infinite; display: inline-block;
}

/* ── Индикатор загрузки ── */
.sai-loading { text-align: center; padding: 40px 0; }
.sai-loading p { font-weight: 600; color: var(--primary); margin-top: 14px; }
.sai-spinner {
  width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--card-tint); border-top-color: var(--primary);
  animation: sai-spin .8s linear infinite;
}
@keyframes sai-spin { to { transform: rotate(360deg); } }

/* ── Результат ── */
#resultBox { display: grid; gap: 18px; }
.sai-result-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; }

.sai-score-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.sai-score-card.low  { background: linear-gradient(135deg, #E74C3C, #C0392B); }
.sai-score-card.mid  { background: linear-gradient(135deg, #F39C12, #E67E22); }
.sai-score-card.high { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.sai-score-num { font-family: var(--font-head); font-weight: 800; font-size: 56px; line-height: 1; }
.sai-score-num span { font-size: 22px; opacity: .8; }
.sai-score-label { margin-top: 6px; font-weight: 600; font-size: 14px; opacity: .95; }

.sai-verdict h3, .sai-next h3, .sai-block h3 {
  display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 10px; color: var(--primary);
}
.sai-verdict p { color: var(--text); font-size: 15px; }
.sai-key { margin-top: 14px; padding: 12px 14px; background: var(--card-tint); border-radius: var(--radius); font-size: 14px; color: var(--text); }

/* Блок «готовые ответы» — самый заметный (главное действие админа) */
.sai-variants {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, #F1FBF7 0%, #fff 55%);
}
.sai-variants h3 { color: var(--accent-dark); }
.sai-var-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.sai-var { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.sai-var-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--primary); margin-bottom: 10px; }
.sai-var-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; color: var(--text); flex: 1; margin-bottom: 12px; }
.sai-var-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sai-var-actions .btn { flex: 1; }

/* Психология клиента */
.sai-psych h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 10px; color: var(--primary); }
.sai-psych p { color: var(--text); font-size: 15px; }

/* Дословная фраза «как надо было» внутри карточки ошибки */
.sai-phrase { margin-top: 12px; padding: 12px; background: #F1FBF7; border: 1px dashed var(--accent); border-radius: var(--radius); }
.sai-phrase-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--accent-dark); margin-bottom: 8px; }
.sai-phrase-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; color: var(--text); background: #fff; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; }

/* Две колонки: хорошо / ошибки */
.sai-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sai-good { list-style: none; display: grid; gap: 8px; }
.sai-good li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.sai-good i { color: var(--success); margin-top: 2px; }

.sai-err-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: #FDFBF8; }
.sai-err-card:last-child { margin-bottom: 0; }
.sai-err-card > div { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.sai-err-card > div:last-child { margin-bottom: 0; }
.sai-err-tag {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; margin-right: 6px;
}
.sai-err-tag.said { background: #FDECEA; color: var(--danger); }
.sai-err-tag.why  { background: #FEF5E7; color: #B9770E; }
.sai-err-tag.fix  { background: #E9F8F0; color: var(--accent-dark); }

/* ── Мобилка ── */
@media (max-width: 720px) {
  .sai-result-grid { grid-template-columns: 1fr; }
  .sai-two-col { grid-template-columns: 1fr; }
  .sai-var-grid { grid-template-columns: 1fr; }
  .sai-score-card { flex-direction: row; gap: 14px; padding: 16px; }
  .sai-score-num { font-size: 42px; }
  .sai-controls { flex-direction: column; align-items: stretch; }
  .sai-actions { flex-direction: column; }
  .sai-actions .btn { width: 100%; justify-content: center; }
  .sai-rescue-actions { flex-direction: column; }
  .sai-rescue-actions .btn { width: 100%; min-width: 0; }
  .sai-tag { display: none; }
  .sai-header-inner { padding: 12px 16px; }
  .sai-wrap { padding: 20px 14px 48px; }
}