/* concierge.css — стили плавающего AI-консьержа, ОДНИ на весь сайт.
 *
 * Вынесено 2026-08-31 из `home-base.css` (блок «Floating AI concierge») БЕЗ единой правки
 * самих правил: изменены только отступы (в новом файле они на верхнем уровне). Причина
 * переезда: тот же виджет теперь стоит на карточке отеля, карточке номера и на партнёрах,
 * а трёх копий одного блока быть не должно.
 *
 * Файл подключается ПОСЛЕ базового файла стилей своей страницы — тогда правила
 * «Наверх» из этого файла перекрывают базовую геометрию кнопки и она встаёт над кружком.
 *
 * В `home-base.css` СОЗНАТЕЛЬНО остались три правила-соседа, гасящие виджет под шторками
 * главной (`#mobile-menu`, шторка фильтров, шторка партнёров): они завязаны на разметку
 * главной и общими не являются.
 */

/* «Наверх» стоит НАД кружком консьержа по одной вертикали: кружок 60px по right:20px даёт
   центр в 50px от края, кнопка 48px встаёт по 50 − 24 = 26px, зазор по высоте 16px. */
#backToTop { right: 26px; bottom: 96px; }
/* Пока открыт консьерж, «Наверх» уходит СВОИМ переходом, а не пропадает через display. */
#backToTop.cc-away { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }

/* ===== Floating AI concierge — CANONICAL pattern, mirrors `thetime (new)` болванка 1:1 =====
   #cc-widget is a fixed flex COLUMN (align-items:flex-end) that grows UPWARD from bottom-right:
   the FAB (#cc-launcher) is the last/bottom child, always pinned at bottom-20px on every viewport,
   and the panel sits ABOVE it IN THE FLEX FLOW (position:static — NOT fixed, NOT absolute).
   The closed panel keeps its box but is hidden via transform+opacity only.
   WHY (ERR-018 + the broken keyboard behaviour): a position:fixed/absolute panel gets shoved around
   by the mobile keyboard / URL-bar (dvh/svh recompute) → header off-screen, "не мотается". Keeping
   the panel in the wrapper's normal flow makes it behave like thetime болванка, which always worked. */
#cc-widget {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none; /* wrapper passes taps through; only FAB + open panel re-enable (click-through fix) */
}
/* Launcher (FAB): avatar bubble + hint pill — last child, always at the bottom. */
#cc-launcher {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  pointer-events: auto;
}
#cc-launcher .cc-hint {
  background: #000; color: #fff; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 9999px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 8px 28px -14px rgba(0,0,0,0.40);
  order: -1; /* hint sits to the LEFT of the avatar */
}
#cc-launcher .cc-avatar {
  width: 60px; height: 60px; border-radius: 9999px; flex-shrink: 0;
  background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.55);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden; /* clip the photo to the circle */
}
/* operator photo fills the whole circle (closed state); hidden when panel open → morphs to × */
#cc-launcher .cc-avatar-photo {
  width: 100%; height: 100%; object-fit: cover; border-radius: 9999px;
  display: block; pointer-events: none;
}
#cc-launcher:hover .cc-avatar { transform: scale(1.06); }
/* avatar morphs to a close (×) glyph while the panel is open */
#cc-launcher .cc-close-icon { display: none; }
#cc-widget.is-open #cc-launcher .cc-open-icon  { display: none; }
#cc-widget.is-open #cc-launcher .cc-close-icon { display: inline-flex; }
#cc-widget.is-open #cc-launcher .cc-hint { display: none; } /* hide hint while open */
#cc-widget.is-open #cc-launcher .cc-dot { display: none; }
/* subtle online dot */
#cc-launcher .cc-dot {
  position: absolute; bottom: 10px; right: 10px; width: 12px; height: 12px;
  border-radius: 9999px; background: #2ecc71; border: 2px solid #fcf9f8;
}
/* gentle attention pulse on the avatar (decorative; killed by reduced-motion) */
@keyframes cc-pulse { 0%,100% { box-shadow: 0 12px 32px -10px rgba(0,0,0,0.55), 0 0 0 0 rgba(0,0,0,0.18); } 50% { box-shadow: 0 12px 32px -10px rgba(0,0,0,0.55), 0 0 0 10px rgba(0,0,0,0); } }
#cc-widget:not(.is-open) #cc-launcher .cc-avatar { animation: cc-pulse 3.2s ease-in-out 3; }

/* Отклик на нажатие — кружок «проседает» под пальцем. Само вдавливание с 05.09.2026
   одно на весь сайт (/styles/press.css); здесь остаётся его плавность. */
#cc-launcher { transition: scale 160ms cubic-bezier(0.23,1,0.32,1); }
@media (prefers-reduced-motion: reduce) {
  #cc-launcher { transition: none; }
}

/* Chat panel — IN the flex flow above the FAB (position:static).
   ИСТОРИЯ: закрытая панель была display:none НАРОЧНО — она не занимала места, и кружок не
   выдавливало наверх ("консьерж переехал наверх"). С фазы 30 она всегда flex и гасится
   видимостью (ради плавного ухода). Кружок это НЕ выдавливает по двум причинам, и обе
   обязаны сохраниться: обёртка #cc-widget прижата к низу (position:fixed; bottom:20px) и
   растёт ВВЕРХ, а сама обёртка pointer-events:none, поэтому невидимая панель ничего не ловит.
   Меняете одно из двух — возвращайте display:none.
   dvh ONLY for the panel's own height cap, never for positioning the FAB. */
#cc-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 7rem));
  background: #fcf9f8; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.55);
  /* Закрытая панель гасится видимостью, а не display: тогда уход тоже плавный, а быстрый
     повторный тап по кружку разворачивает движение, а не запускает его с нуля.
     Место в потоке она занимает всегда, но кружок прижат к низу (bottom:20px), поэтому
     наверх его не выдавливает — обёртка растёт вверх. */
  opacity: 0; transform: translateY(12px) scale(.98);
  visibility: hidden; pointer-events: none;
  transition: opacity 140ms cubic-bezier(0.23,1,0.32,1), transform 140ms cubic-bezier(0.23,1,0.32,1), visibility 0s linear 140ms;
}
@supports not (height: 100dvh) {
  #cc-panel { height: min(560px, calc(100vh - 7rem)); }
}
#cc-widget.is-open #cc-panel {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1), visibility 0s;
}
#cc-panel-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 12px; background: #000; color: #fff; flex-shrink: 0;
}
#cc-panel-header .cc-h-avatar {
  width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
  background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
}
.cc-iconbtn {
  width: 36px; height: 36px; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08);
  border: none; transition: background-color .2s ease, color .2s ease;
}
.cc-iconbtn:hover { background: rgba(255,255,255,0.18); color: #fff; }
#cc-messages {
  flex: 1 1 auto; min-height: 0; /* min-height:0 = the flexbox-scroll fix; without it the area refuses to shrink and overflows instead of scrolling */
  overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  /* NO overscroll-behavior:contain — that swallowed the scroll gesture on the panel so the page
     under the finger wouldn't move (the "не листается, палец на окне" bug). Matching EcoCosmetology:
     when there's nothing more to scroll inside, the gesture passes through and scrolls the page. */
  -webkit-overflow-scrolling: touch;
}
/* Приветствие прижато к низу, к строке ввода, а не висит одно под пустотой.
   Именно margin-top:auto, а не justify-content:flex-end: последний в скроллящейся
   колонке обрезает верх и до него не домотать. */
#cc-messages > :first-child { margin-top: auto; }
.cc-msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
.cc-msg-bot { align-self: flex-start; background: #fff; color: #1c1b1b; border: 1px solid rgba(0,0,0,0.07); border-bottom-left-radius: 6px; }
.cc-msg-user { align-self: flex-end; background: #000; color: #fff; border-bottom-right-radius: 6px; }
/* "Список готов — сверните" call-to-action card inside the chat */
.cc-ready { align-self: stretch; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 14px; text-align: center; box-shadow: 0 8px 24px -14px rgba(0,0,0,0.30); }
.cc-ready p { font-size: 14px; color: #1c1b1b; margin-bottom: 10px; font-weight: 600; }
/* K2: строка «укажите даты» под списком без дат — тише заголовка карточки. */
.cc-ready p.cc-ready-hint { font-size: 12px; font-weight: 400; color: #5f5e5e; }
/* Фишки следующего шага (фаза 35, план 35-03): ряд маленьких пилюль под ответом. */
/* ОДНА СТРОКА, А НЕ СЕТКА (владелец, 23.09.2026). На телефоне четыре кнопки города
   переносились во второй ряд и съедали половину окна чата; теперь ряд один и прокручивается
   боком. `min-width: 0` обязателен: без него ряд раздвигает панель, и боком начинает
   ездить вся страница. */
.cc-chips { align-self: stretch; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; }
.cc-chips::-webkit-scrollbar { display: none; }
.cc-chip { flex: 0 0 auto; white-space: nowrap; font-size: 13px; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; padding: 6px 12px; background: #fff; cursor: pointer; }
/* Строка «Ищу: …» с кнопкой «поправить» (этап 5a, мера 2): один ряд на весь разговор,
   поэтому он и выглядит как отметка хода, а не как реплика. */
.cc-echo { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #1c1b1b; }
.cc-echo-text { flex: 1; min-width: 0; }
.cc-echo-fix { flex: none; }
.cc-collapse-cta {
  display: inline-flex; align-items: center; gap: 8px; background: #000; color: #fff;
  border: none; border-radius: 9999px; padding: 11px 22px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: opacity .2s ease, scale .2s ease;
}
.cc-collapse-cta:hover { opacity: .88; }
/* «Сбросить» рядом со «Свернуть и посмотреть» (B4, 24.09.2026): та же пилюля, но светлая.
   Панель консьержа не шире 380 px и на десктопе, поэтому ряд ужат на любой ширине: пара
   русских подписей обязана стоять в одну строку. Отступы «Сбросить» меньше на её рамку —
   высоты кнопок равны. */
.cc-ready-actions { display: flex; justify-content: center; gap: 6px; }
.cc-ready-actions > * { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; }
.cc-ready-actions .cc-collapse-cta { gap: 4px; padding: 10px 12px; font-size: 12px; letter-spacing: .02em; }
.cc-reset-cta {
  display: inline-flex; align-items: center; background: #fff; color: #1c1b1b;
  border: 1px solid rgba(0,0,0,0.18); border-radius: 9999px; padding: 9px 11px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
  transition: opacity .2s ease, scale .2s ease;
}
.cc-reset-cta:hover { opacity: .88; }
#cc-input-row { flex-shrink: 0; border-top: 1px solid rgba(0,0,0,0.07); padding: 12px; display: flex; align-items: center; gap: 8px; background: #fcf9f8; }
#cc-input {
  flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,0.12); border-radius: 9999px; padding: 11px 16px;
  font-size: 16px; /* ≥16px so iOS Safari doesn't zoom on focus */
  color: #1c1b1b; background: #fff; outline: none;
  transition: border-color .2s ease;
}
#cc-input:focus { border-color: #000; }
#cc-send {
  width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
  background: #000; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease; }
#cc-send:hover { opacity: .85; }
#cc-send:disabled { opacity: .5; cursor: not-allowed; }
/* Микрофон (K7, 24.09.2026): та же круглая кнопка, что «Отправить», только светлая — главная
   кнопка ряда остаётся одна. Слушает — чёрная с пульсом (пульс гасится при reduced-motion). */
#cc-mic {
  width: 44px; height: 44px; border-radius: 9999px; flex-shrink: 0;
  background: #fff; color: #000; border: 1px solid rgba(0,0,0,0.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease; }
#cc-mic svg { width: 22px; height: 22px; }
#cc-mic.is-listening { background: #000; color: #fff; border-color: #000; animation: cc-mic-pulse 1.4s infinite ease-in-out; }
@keyframes cc-mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.25); } 50% { box-shadow: 0 0 0 8px rgba(0,0,0,0); } }
/* typing dots */
.cc-typing { display: inline-flex; gap: 4px; align-items: center; }
.cc-typing span { width: 7px; height: 7px; border-radius: 9999px; background: #c4c7c7; animation: cc-blink 1.2s infinite ease-in-out; }
.cc-typing span:nth-child(2) { animation-delay: .2s; }
.cc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cc-blink { 0%,80%,100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Планшет и узкий ноутбук: подпись «Подберу отель и номер» ложилась поверх карточки отеля
   (жалоба владельца 04.09.2026 — «залазит на отель»). Ниже 1280px она убрана из потока
   совсем и появляется только под указателем или с клавиатуры — так решил владелец.
   Отдельного условия по признаку наведения здесь НЕТ намеренно: такой запрос на этом
   сайте запрещён (шрам «стеклянная вкладка»), а на телефоне подпись и без того выключена
   правилом ниже.
   Пока панель открыта, подпись не возвращается: `:not(.is-open)`. */
@media (min-width: 481px) and (max-width: 1279px) {
  #cc-launcher .cc-hint { display: none; }
  #cc-widget:not(.is-open) #cc-launcher:hover .cc-hint,
  #cc-widget:not(.is-open) #cc-launcher:focus-visible .cc-hint { display: block; }
}

/* Small phones: hide the hint pill (avatar alone). Panel stays in flex flow above the FAB; only
   width + the dvh height-cap change. No positioning units that the keyboard/URL-bar can shift. */
@media (max-width: 480px) {
  #cc-widget { right: 14px; bottom: 14px; }
  /* Виджет переехал ближе к краю — «Наверх» едет за ним, чтобы центры кружков остались
     на одной вертикали: 14 + 30 − 24 = 20px, а по высоте — те же 16px зазора над аватаром. */
  #backToTop { right: 20px; bottom: 90px; }
  #cc-launcher .cc-hint { display: none; }
  #cc-panel { width: calc(100vw - 28px); height: min(560px, calc(100dvh - 6rem)); }
}
@supports not (height: 100dvh) {
  @media (max-width: 480px) { #cc-panel { height: min(560px, calc(100vh - 6rem)); } }
}
@media (prefers-reduced-motion: reduce) {
  #cc-launcher .cc-avatar { transition: none !important; animation: none !important; }
  #cc-panel, #cc-widget.is-open #cc-panel { transition: none !important; }
  .cc-typing span { animation: none; }
  #cc-mic.is-listening { animation: none; }
}