/* Виджет обратной связи. Отдельный файл, а не блок в style.css: он подключается
   на двух страницах с разными наборами стилей (лендинг и кабинет), и общего
   владельца у него нет.

   z-index не задан НИ ОДНОМУ элементу ниже, и это осознанно. Единственный
   position: fixed в проекте — .modal (style.css), и z-index у него тоже нет:
   порядок наложения задаётся порядком в DOM. Поэтому разметка виджета стоит в
   обеих страницах ПЕРЕД блоками модалок — регистрация и лайтбокс лежат в DOM
   позже и перекрывают виджет сами собой. Стоило бы виджету оказаться последним
   в теле — он закрыл бы собой модалку, и чинить это пришлось бы введением шкалы
   z-index во всём проекте ради одного элемента. */

.fb-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #3a3a45;
  background: #17171f;
  color: #f5f5f7;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.fb-launcher:hover { background: #20202a; }

.fb-panel {
  position: fixed;
  right: 18px;
  bottom: 82px;
  width: min(360px, calc(100vw - 36px));
  /* Форма не должна вырастать выше экрана на телефоне: длинный текст скроллится
     внутри панели, а не уводит кнопку отправки за нижний край. */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #17171f;
  border: 1px solid #2c2c38;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  text-align: left;
}
/* hidden обязан побеждать собственный display панели — иначе она видна всегда. */
.fb-panel[hidden] { display: none; }

.fb-panel h3 { margin: 0 0 4px; font-size: 17px; }
.fb-panel .fb-lead { color: #a0a0ab; font-size: 13px; margin: 0 0 14px; }

.fb-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #a0a0ab;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.fb-field { display: block; margin-bottom: 12px; }
.fb-field span { display: block; color: #a0a0ab; font-size: 13px; margin-bottom: 6px; }

.fb-select,
.fb-input,
.fb-textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid #3a3a45;
  background: #0f0f14;
  color: #f5f5f7;
  /* 16px, иначе iOS Safari зумит страницу при фокусе на поле. */
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
}
.fb-textarea { min-height: 110px; resize: vertical; }
.fb-input[hidden] { display: none; }
.fb-field[hidden] { display: none; }

.fb-counter { color: #7a7a85; font-size: 12px; text-align: right; margin: 4px 0 12px; }

.fb-submit {
  width: 100%;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.fb-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.fb-status { font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.fb-status[hidden] { display: none; }
.fb-status.fb-ok { color: #6ee7a8; }
.fb-status.fb-err { color: #f38ba0; }

.fb-context { color: #7a7a85; font-size: 12px; margin: 0 0 12px; }
.fb-context[hidden] { display: none; }

@media (max-width: 480px) {
  .fb-launcher { right: 12px; bottom: 12px; }
  .fb-panel { right: 12px; left: 12px; width: auto; bottom: 74px; }
}

/* ------------------------------------------------------------------------
   Кнопка «Переделать» на плитке демо-результата (этап 2, часть C).

   Живёт здесь, а не в style.css, по той же причине, по которой сюда уехал
   виджет: этот поток работ style.css не редактирует вовсе. Правила для такой же
   кнопки в кабинете лежат в cabinet.css — там, где остальные стили карточки.

   .gen-tile задан position: relative и overflow: hidden (style.css), поэтому
   абсолютное позиционирование прижимает кнопку к низу плитки и не выпускает её
   за скруглённый угол.
   ------------------------------------------------------------------------ */
.gen-regen {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 7px 6px;
  border: 1px dashed rgba(255,255,255,0.45);
  border-radius: 8px;
  /* Подложка, а не прозрачный фон: кнопка лежит поверх фотографии, и на светлом
     кадре белый текст без неё исчезает. */
  background: rgba(15,15,20,0.72);
  color: #f5f5f7;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.gen-regen:hover:not(:disabled) { background: rgba(15,15,20,0.9); border-style: solid; }
.gen-regen:disabled { opacity: 0.6; cursor: not-allowed; }