/* ── Шапка сайта — ЕДИНСТВЕННЫЙ источник стилей ────────────────────────────
   Раньше эти правила существовали двумя копиями: inline в index.html и
   отдельно в product_page.css. Копии разъехались, и шапки на главной и на
   страницах машин/навесного стали разными (Allan, 2026-08-04: "тебе реально
   не видно что на страницах разные шапки???"): на сгенерированных страницах
   не работала анимация привлечения внимания на кнопке Kontakt, не было
   :active/.used, а иконочный режим включался с 640px вместо 480px.
   Теперь файл один и подключается обеими сторонами:
     index.html          — <link rel="stylesheet" href="/static/topbar.css">
     machine_page.py     — то же в _head()
     attachment_page.py  — то же в _head()
   Разметку из одного источника собирает topbar.py (читает .topbar прямо из
   index.html). Правь шапку только здесь и в index.html — больше нигде.

   Единственное намеренное расхождение вынесено в product_page.css:
   position:sticky на длинных страницах товара (на главной шапка и так всегда
   на экране — там прокручивается внутренняя область сообщений). */

/* ── Top Bar ───────────────────────────────────────────────────────────── */
.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  background: var(--red);
  z-index: 20;
  gap: 12px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-brand img {
  height: 30px;
  width: auto;
  display: block;
}

/* Статус и кнопки — ОДНА группа справа, а не два отдельных элемента со своими
   отступами. Раньше margin-left:auto стоял только на .topbar-status: пока
   бот молчит, статус display:none и не занимает места и не тянет за собой
   ничего — тогда кнопки, идущие следом в DOM, повисали ровно там, где
   закончился статус, то есть вплотную к лого (Allan, 2026-08-04, после
   четырёх повторов: "4 раза просил вправо сдвинуть"). Обёртка .topbar-right
   получает auto-отступ ОДИН раз на всю группу — кнопки уезжают вправо
   независимо от того, виден статус или нет. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  flex-shrink: 0;
}

.status-dot.busy {
  background: #FFB300;
  animation: pulse-dot 1.5s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-btn {
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: transparent;
  color: var(--white) !important;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  /* На главной это <button>, на страницах товара — <a> (см. topbar.py): без
     этого ссылки получали бы подчёркивание, и кнопки выглядели бы по-разному. */
  text-decoration: none;
  transition: all 0.15s var(--ease);
  white-space: nowrap;
}

.topbar-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
}

.topbar-btn:active {
  transform: scale(0.96);
}

.topbar-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Contact button attention ──────────────────────────────────────────── */
@keyframes contact-ring {
  0%, 70%, 100% { transform: scale(1) rotate(0deg); background: transparent; border-color: rgba(255,255,255,0.35); }
  74% { transform: scale(1.15) rotate(-5deg); background: #fff; border-color: #fff; color: var(--red); }
  78% { transform: scale(1.1) rotate(4deg); }
  82% { transform: scale(1.15) rotate(-3deg); background: #fff; border-color: #fff; }
  86% { transform: scale(1.05) rotate(0deg); background: rgba(255,255,255,0.3); }
}
@keyframes ring-glow {
  0%, 70%, 100% { box-shadow: none; }
  76% { box-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.2); }
  86% { box-shadow: none; }
}
#kontaktBtn {
  animation: contact-ring 5s ease infinite, ring-glow 5s ease infinite;
}
#kontaktBtn:hover {
  animation: none;
  transform: scale(1.08);
}
#kontaktBtn.used { animation: none; }

/* Шапка с подписями требует 548px (лого 155 + три кнопки + отступы). Пока
   правила жили двумя копиями, порог иконочного режима стоял на 480px на
   главной и на 640px на страницах товара — то есть на главной в полосе
   481–547px кнопки уже не помещались. Сведя файлы в один, порог берём тот,
   что реально нужен и уже работал на страницах товара: 640px. */
@media (max-width: 640px) {
  #myBobcatBtn span, #kontaktBtn span, #partsStockBtn span { display: none; }
  #myBobcatBtn, #kontaktBtn, #partsStockBtn { padding: 0 9px; gap: 0; }
}

/* Ниже 480px место кончается и у одних иконок (god-режим добавляет ещё
   кнопки) — здесь шапка перестаёт быть фиксированной по высоте и переносит
   вторую строку. */
@media (max-width: 480px) {
  .topbar { height: auto; min-height: 48px; padding: 8px 12px; flex-wrap: wrap; row-gap: 6px; }
  .topbar-right { flex-wrap: wrap; row-gap: 6px; }
  .topbar-actions { flex-wrap: wrap; row-gap: 6px; }
  .topbar-brand img { height: 28px; }
}