/* Дополнения к дизайну, приехавшему из ChatGPT Sites.
   Их styles.css не трогаем ни на байт — здесь только то, чего в макете
   не было: наши выпадающие списки вместо компонента React, поле контакта
   в заявке, строка ошибки и точки «печатает» в чате.
   Цвета взяты из их же переменных, чтобы не разъезжалось. */

/* --- выпадающий список --- */
[data-select] { position: relative; }

[data-select] .our-list {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: #1b211a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: none;
}

[data-select].open .our-list { display: block; }

[data-select] .our-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f2f4ef;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

[data-select] .our-option:hover,
[data-select] .our-option:focus-visible {
  background: rgba(198, 243, 58, 0.16);
  color: #d7f96a;
  outline: none;
}

[data-select] .our-option[aria-selected="true"] { color: #c6f33a; }

/* На светлой карточке заявки список тоже светлый. */
.brief-dialog [data-select] .our-list {
  background: #ffffff;
  border-color: rgba(17, 23, 15, 0.14);
}

.brief-dialog [data-select] .our-option { color: #11170f; }

.brief-dialog [data-select] .our-option:hover,
.brief-dialog [data-select] .our-option:focus-visible {
  background: rgba(17, 23, 15, 0.06);
  color: #11170f;
}

/* --- заявка: поле контакта и ошибка --- */
.brief-error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #c8442f;
}

.brief-consent {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.7;
}

.brief-consent a { color: inherit; text-underline-offset: 3px; }

/* --- чат --- */
.chat-typing p {
  letter-spacing: 3px;
  opacity: 0.55;
}

.chat-message.user { justify-content: flex-end; }

/* --- согласие на cookie не должно перекрывать кнопку чата --- */
@media (max-width: 720px) {
  .chat-launcher { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* --- зелёная полоса с направлениями: бегущая строка, как на главной --- */
/* Набор слов в разметке повторён четыре раза, поэтому сдвиг ровно на
   половину ширины возвращает дорожку в исходное положение — шва не видно.
   Отступ вешаем на сами слова (margin-right), а не на промежуток flex (gap):
   иначе последний промежуток в половине оказался бы лишним и раз в цикл
   строка заметно дёргалась бы. */
.sector-band > div {
  width: max-content;
  gap: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  animation: sector-band-run 28s linear infinite;
}

.sector-band > div > span { margin-right: 31px; }

@keyframes sector-band-run {
  to { transform: translateX(-50%); }
}

@media (max-width: 650px) {
  .sector-band > div > span { margin-right: 23px; }
}

/* Кому движение мешает (настройка системы «уменьшить анимацию») — строка стоит. */
@media (prefers-reduced-motion: reduce) {
  .sector-band > div { animation: none; }
}

/* --- шапка при прокрутке: «плавающая карточка» ---
   Идея со страницы стройки (22.09.2026): после прокрутки широкая полоса
   шапки превращается в узкую карточку со скруглёнными углами, отстоящую
   от краёв. Цвета оставлены их тёмные — меняется только форма.
   Высота самой шапки не меняется, иначе текст страницы дёргался бы
   в момент переключения; сжимается внутренняя часть. */
.site-header { transition: background .4s, border-color .4s, box-shadow .4s; }
.site-header .header-inner {
  transition: width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1),
    margin .45s, padding .45s, border-radius .45s, background .4s, box-shadow .4s;
  border: 1px solid transparent;
}
.site-header .brand { transition: width .45s cubic-bezier(.2,.8,.2,1), padding .45s; }

.site-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 10px;
}
.site-header.is-scrolled .header-inner {
  width: min(1180px, calc(100% - 40px));
  height: 64px;
  padding: 0 18px;
  border-radius: 6px;
  border-color: #ffffff1f;
  background: #141811f5;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px #0000002e;
}
.site-header.is-scrolled .brand { width: 125px; }

@media (width <= 680px) {
  .site-header.is-scrolled { padding-top: 7px; }
  .site-header.is-scrolled .header-inner {
    width: calc(100% - 24px);
    height: 56px;
    padding: 0 12px;
  }
  .site-header.is-scrolled .brand { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .header-inner, .site-header .brand { transition: none; }
}