/* =========================================================================
   ПРОТОТИП №8 — «Диагност подсолнечника».
   Панель-объяснение (общая для прототипов №2–№8) + стили ассистента.
   Собственные классы — только с префиксом `sfd-`.
   ========================================================================= */

/* ------------------------ Панель-объяснение ------------------------------ */
.stage{gap:32px}
.proto-panel{
  width:380px;max-height:100%;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__now{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(74,134,199,.16);border:1px solid rgba(74,134,199,.45);color:#BBD6F2;
}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#7E8894;margin:20px 0 10px}
.proto-flow{
  display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.5)}
.proto-flow--active .proto-flow__num{background:#4A86C7}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-panel__list b{color:#fff;font-weight:600}
.proto-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4A86C7;
  box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
@media (max-width:1180px){.proto-panel{display:none}}

.proto-var{margin-bottom:12px}
.proto-var__t{font-size:12px;font-weight:600;color:#E7EAEE;margin-bottom:6px}
.proto-var__chips{display:flex;flex-wrap:wrap;gap:6px}
.proto-var__chip{
  padding:5px 10px;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:500;line-height:1.3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C7CDD5;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.proto-var__chip:hover{background:rgba(255,255,255,.12);color:#fff}
.proto-var__chip.is-on{background:rgba(74,134,199,.28);border-color:#4A86C7;color:#fff}
.proto-var__hint{margin-top:6px;font-size:11.5px;line-height:1.45;color:#8FA0B4}

/* =========================================================================
   БАБЛ СКАУТА
   Персонаж живёт поверх оверлеев (.mascot-above, z 55/56) и стоит выше
   кромки шторки. Бабл — ещё выше него (z 58), поэтому читать шторку он
   не мешает.
   ========================================================================= */
.sfd-bubble{
  position:absolute;z-index:58;
  background:#fff;border-radius:16px 16px 4px 16px;padding:12px 14px;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  opacity:0;transform:translateY(8px);
  transition:opacity .26s ease, transform .34s cubic-bezier(.2,1.2,.3,1);
  pointer-events:auto;
}
.sfd-bubble.is-in{opacity:1;transform:none}
.sfd-bubble::after{
  content:'';position:absolute;right:28px;bottom:-8px;
  width:16px;height:16px;background:#fff;transform:rotate(45deg);border-radius:0 0 4px 0;
}
.sfd-bubble__text{font-size:14px;font-weight:500;line-height:1.4;color:var(--text900);padding-right:22px}
.sfd-bubble__cta{
  margin-top:10px;height:34px;padding:0 14px;border:0;border-radius:8px;cursor:pointer;
  background:var(--primary500);color:#fff;font-family:inherit;font-size:13px;font-weight:500;
}
.sfd-bubble__cta:active{background:var(--primary600)}
.sfd-bubble__close{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  border:0;background:transparent;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sfd-bubble__close:active{background:var(--default5)}

/* =========================================================================
   ЭКРАНЫ АССИСТЕНТА
   Один экран — один вопрос. Ничего лишнего: ни счётчиков шагов, ни
   кнопок «Назад» — тап по варианту сразу ведёт дальше.
   ========================================================================= */
.sfd-say{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--primary50);border-radius:12px;padding:10px 12px;margin:12px 0 0;
}
.sfd-say__ava{flex:0 0 28px;line-height:0}
.sfd-say__text{font-size:13px;font-weight:400;line-height:1.45;color:var(--text800)}
.sfd-say__text b{font-weight:600;color:var(--text900)}

.sfd-steps{display:flex;flex-direction:column;gap:10px}
.sfd-step{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text900)}
.sfd-step__num{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--primary100);color:var(--primary600);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}

/* Счётчик сужения списка — единственная метрика на экране вопроса */
.sfd-counter{
  display:inline-block;margin-bottom:10px;padding:6px 10px;border-radius:8px;
  background:var(--primary50);color:var(--primary600);
  font-size:12px;font-weight:600;
}

/* Плитки-варианты с фотографией */
.sfd-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sfd-card{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  padding:8px;border:1px solid var(--text300);border-radius:12px;background:#fff;
  cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .18s ease, background .18s ease;
}
.sfd-card:active{background:var(--default5)}
.sfd-card.is-on{border-color:var(--primary500);background:rgba(63,115,171,.08)}
.sfd-card__lbl{font-size:13px;font-weight:600;line-height:1.3;color:var(--text900)}
.sfd-card__note{font-size:11px;font-weight:400;line-height:1.35;color:var(--text600)}

.sfd-art{
  display:block;width:100%;aspect-ratio:1/1;border-radius:8px;
  background:var(--bgLight50);overflow:hidden;
}
.sfd-art img{width:100%;height:100%;object-fit:cover;display:block}
.sfd-art--lg{width:84px;flex:0 0 84px;aspect-ratio:1/1}
.sfd-art__svg{display:block;width:100%;height:100%}

/* Полосы численности вокруг ЭПВ — вместо ручного ввода числа */
.sfd-bands{display:flex;flex-direction:column;gap:8px}
.sfd-band{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;border:1px solid var(--text300);border-radius:10px;background:#fff;
  cursor:pointer;font-family:inherit;text-align:left;
}
.sfd-band:active{background:var(--default5)}
.sfd-band.is-on{border-color:var(--primary500);background:rgba(63,115,171,.08)}
.sfd-band__v{font-size:15px;font-weight:600;color:var(--text900)}
.sfd-band__m{font-size:12px;font-weight:500;color:var(--text600)}

/* Индикатор эффективности — пять точек */
.sfd-dots{display:inline-flex;gap:3px;flex:0 0 auto;align-items:center}
.sfd-dots i{width:8px;height:8px;border-radius:50%;background:var(--text400);display:block}
.sfd-dots i.on{background:var(--green)}

.sfd-note{
  display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;
  border-radius:10px;background:var(--default5);
  font-size:12px;font-weight:400;line-height:1.45;color:var(--text700);
}
.sfd-note--warn{background:var(--brown10);color:#7E4203}

.sfd-why{margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--text300)}
.sfd-why__t{font-size:12px;font-weight:600;color:var(--text900);margin-bottom:6px}
.sfd-why ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
.sfd-why li{font-size:12px;font-weight:400;line-height:1.4;color:var(--text700)}

/* Версия диагноза: вероятность, шкала, название, справка.
   Ассистент не говорит «не знаю» — он показывает версии и их вес. */
.sfd-verdictcard{
  display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px;margin-bottom:8px;
  border-radius:12px;border:1px solid var(--text300);background:#fff;
  cursor:pointer;font-family:inherit;text-align:left;
}
.sfd-verdictcard:active{background:var(--default5)}
.sfd-verdictcard.is-main{border-color:var(--primary500);background:rgba(63,115,171,.06)}
.sfd-ver__head{display:flex;align-items:center;gap:8px}
.sfd-ver__pct{font-size:14px;font-weight:700;color:var(--text900);flex:0 0 auto}
.sfd-ver__bar{flex:1;height:4px;border-radius:2px;background:var(--text300);overflow:hidden}
.sfd-ver__bar i{display:block;height:100%;border-radius:2px;background:var(--primary500)}
.sfd-verdictcard.is-main .sfd-ver__bar i{background:var(--green)}
.sfd-ver__name{display:block;margin-top:4px}
.sfd-ver__bio{display:block;margin-top:4px}
.sfd-hint{margin:2px 0 4px;font-size:11.5px;color:var(--text600);text-align:center}

.sfd-rows{padding:12px;border-radius:10px;border:1px solid var(--text300)}

.sfd-linkbtn{
  width:100%;height:36px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--primary500);
}
.sfd-linkbtn--left{
  width:auto;height:28px;margin-top:6px;padding:0;text-align:left;
  display:inline-flex;align-items:center;gap:4px;
}

/* Метеосводка: погоду не спрашиваем — берём с метеостанции поля */
.sfd-meteo{
  margin-top:12px;padding:12px;border-radius:12px;
  background:var(--primary50);border:1px solid var(--primary100);
}
.sfd-meteo__head{display:flex;gap:8px;align-items:center}
.sfd-meteo__head > span{display:flex;flex-direction:column;min-width:0}
.sfd-meteo__head b{font-size:13px;font-weight:600;color:var(--text900)}
.sfd-meteo__head span span{font-size:11px;color:var(--text600)}
.sfd-meteo__grid{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin-top:10px;
  font-size:12px;line-height:1.5;
}
.sfd-meteo__grid span{color:var(--text700)}
.sfd-meteo__grid b{color:var(--text900);font-weight:600;text-align:right}
.sfd-meteo__fc{margin-top:8px;font-size:12px;line-height:1.45;color:var(--text700)}
.sfd-meteo__fc b{color:var(--text900)}

/* Каталог препаратов */
.sfd-prodlist{display:flex;flex-direction:column;gap:8px}
.sfd-prod{
  display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:12px;border:1px solid var(--text300);border-radius:12px;background:#fff;
}
.sfd-prod:active{background:var(--default5)}
.sfd-prod__head{display:flex;gap:8px;align-items:flex-start}
.sfd-prod__ai{margin-top:6px;font-size:12px;font-weight:500;line-height:1.35;color:var(--text800)}
.sfd-prod__eff{display:flex;gap:8px;align-items:flex-start;margin-top:8px;
  font-size:12px;line-height:1.4;color:var(--text700)}
.sfd-prod__price{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--text300);
  display:flex;flex-direction:column;gap:2px;
}
.sfd-prod__price-v{font-size:17px;font-weight:700;color:var(--text900)}
.sfd-prod__price-n{font-size:11.5px;color:var(--text600)}
.sfd-prod__src{
  display:flex;gap:6px;align-items:center;margin-top:8px;
  font-size:11px;font-weight:400;line-height:1.35;color:var(--text600);
}

/* Акцентная стоимость на карточке препарата */
.sfd-price{
  padding:14px;border-radius:12px;margin-bottom:12px;
  background:var(--green10);border:1px solid rgba(66,161,98,.35);
}
.sfd-price__v{font-size:28px;font-weight:700;line-height:1.1;color:var(--text900)}
.sfd-price__v span{font-size:16px;font-weight:600;color:var(--text700)}
.sfd-price__n{margin-top:4px;font-size:12.5px;font-weight:500;color:var(--text700)}
.sfd-price__note{margin-top:6px;font-size:11px;line-height:1.4;color:var(--text600)}

.sfd-blocked{
  margin-top:12px;padding:12px;border-radius:10px;
  border:1px dashed var(--brown);background:var(--brown10);
}
.sfd-blocked__row{margin-top:8px;font-size:12px;line-height:1.4;color:var(--text800)}
.sfd-blocked__row:first-of-type{margin-top:6px}

.sfd-effbox{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;
  background:var(--default5);margin-bottom:12px;
  font-size:12px;font-weight:400;line-height:1.45;color:var(--text700);
}
.sfd-effbox b{font-weight:600;color:var(--text900)}

.sfd-srcbox{margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--text300)}
.sfd-srcbox__row{display:flex;gap:6px;align-items:flex-start;margin-top:6px;
  font-size:11.5px;line-height:1.4;color:var(--text600)}

.sfd-normpick{margin-top:12px}
.sfd-normpick__row{display:flex;align-items:center;gap:8px;margin-top:6px}
.sfd-normpick__btn{
  width:56px;height:44px;border:0;border-radius:8px;background:var(--text300);
  cursor:pointer;font-family:inherit;font-size:20px;font-weight:600;color:var(--text900);
}
.sfd-normpick__btn:active{background:var(--text400)}
.sfd-normpick__val{
  flex:1;height:44px;border:1px solid var(--text400);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:var(--text900);
}

.sfd-libbtn{
  display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;
  padding:12px;border:1px solid var(--primary200);border-radius:10px;background:var(--primary50);
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--text900);
}
.sfd-libbtn span{flex:1;text-align:left}
.sfd-libbtn:active{background:var(--primary100)}

.sfd-libimg{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--bgLight50)}
.sfd-libimg img{width:100%;height:100%;object-fit:cover;display:block}

.sfd-done{
  display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:12px;
  border-radius:12px;border:1px solid var(--text300);
}
.sfd-done__row{display:flex;gap:10px;align-items:center}

/* =========================================================================
   КОНТРОЛЫ ФОРМЫ СХЕМЫ (шаги «Уточнения фактов»)
   ========================================================================= */
/* checkbox_set — множественный выбор без шторки */
.sfd-checks{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sfd-check{
  display:flex;align-items:center;gap:10px;width:100%;padding:12px;
  border:1px solid var(--text300);border-radius:8px;background:#fff;
  cursor:pointer;font-family:inherit;font-size:14px;color:var(--text900);text-align:left;
}
.sfd-check.is-on{border-color:var(--primary500);background:rgba(63,115,171,.08)}
.sfd-check__box{
  width:20px;height:20px;flex:0 0 20px;border-radius:5px;border:1.5px solid var(--text400);
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.sfd-check.is-on .sfd-check__box{background:var(--primary500);border-color:var(--primary500)}

/* computed — «Необходимость обработки»: считается схемой, руками не правится */
.sfd-computed__why{
  display:flex;gap:6px;align-items:flex-start;margin-top:6px;padding:0 4px;
  font-size:11.5px;line-height:1.4;color:var(--text600);
}

/* Шторка формы на шаге выбора вида ужимается: 3D-Скаут садится над её
   кромкой, и подсказка помещается выше, не перекрывая контент. */
.sheet.sfd-sheet--short{max-height:58%}
/* Пока идёт сеанс, форма уходит под шит помощи: так верхней кромкой,
   к которой прилипает Скаут, становится именно шторка помощи. */
.sheet.sfd-sheet--tucked{max-height:34%}
/* Шит помощи: место сверху под персонажа */
.sheet.sfd-sheet--assist{max-height:74%}