/* ====== СБРОС И ГАРАНТИЯ: MAX и TELEGRAM ====== */

/* Общий контейнер — приоритетные правила */
.floating-panel, #floating-buttons, #max-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
  pointer-events: none;
  box-sizing: border-box;
}

/* Кнопки кликабельны */
.floating-panel .fbtn, #floating-buttons .fbtn, #max-floating a {
  pointer-events: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all .18s ease;
  overflow: hidden;
}

/* Логотипы — базовый размер (не меняем) */
.floating-panel .logo-img, #floating-buttons .logo-img, #max-floating .max-logo {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
  display: block;
}

/* ====== Свернутое состояние (первое положение) ======
   Показываем только логотип, контейнер компактный и кликабельный.
   Эти правила имеют высокую специфичность, чтобы не перекрывались. */
.floating-panel .fbtn.collapsed,
#floating-buttons .fbtn.collapsed,
#max-floating.collapsed a {
  width: 56px !important;        /* общий размер кнопки */
  height: 56px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  gap: 0 !important;
  justify-content: center !important;
  font-size: 0 !important;
  background: transparent !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  color: transparent !important;
  border: none !important;
}

/* В свернутом состоянии показываем только логотип 32x32 */
.floating-panel .fbtn.collapsed .logo-img,
#floating-buttons .fbtn.collapsed .logo-img,
#max-floating.collapsed a .max-logo {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

/* Скрываем текст и резервные svg в collapsed */
.floating-panel .fbtn.collapsed .ftext,
#floating-buttons .fbtn.collapsed .ftext,
#max-floating.collapsed a .max-text,
#max-floating.collapsed a .max-svg-icon {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* ====== Развёрнутое состояние (второе положение) ====== */
.floating-panel .fbtn.expanded,
#floating-buttons .fbtn.expanded,
#max-floating.expanded a {
  width: auto !important;
  height: 56px !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  font-size: 15px !important;
  color: #fff !important;
  background: linear-gradient(135deg,#00D4FF,#7B68EE,#8B00FF) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* В expanded показываем текст и увеличенный логотип */
.floating-panel .fbtn.expanded .ftext,
#floating-buttons .fbtn.expanded .ftext,
#max-floating.expanded a .max-text {
  display: inline-block !important;
  visibility: visible !important;
  color: #fff !important;
  font-size: 16px !important;
}
.floating-panel .fbtn.expanded .logo-img,
#floating-buttons .fbtn.expanded .logo-img,
#max-floating.expanded a .max-logo {
  height: 40px !important;
  width: auto !important;
}

/* ====== Мобильная корректировка: вертикально, кнопки одна над другой ====== */
@media (max-width: 600px) {
  .floating-panel, #floating-buttons, #max-floating {
    right: 12px;
    bottom: 12px;
    flex-direction: column !important; /* строго вертикально */
    align-items: flex-end;
  }

  .floating-panel .fbtn + .fbtn,
  #floating-buttons .fbtn + .fbtn,
  #max-floating + .fbtn {
    margin-top: -14px !important; /* вертикальное перекрытие */
  }

  .floating-panel .fbtn.collapsed,
  #floating-buttons .fbtn.collapsed,
  #max-floating.collapsed a {
    width: 52px !important;
    height: 52px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .floating-panel .logo-img,
  #floating-buttons .logo-img,
  #max-floating .max-logo {
    width: 30px !important;
    height: 30px !important;
  }
}