/* Скрыть оригинальный виджет через CSS — мгновенно, zero flicker.
   CSS парсится ДО выполнения JS, поэтому голубая кнопка никогда не появится. */
#codeby-telegram-widget {
  display: none !important;
}

/* === Плавающая кнопка === */
.codeby-mc-button {
  position: fixed; bottom: 30px; right: 30px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,255,136,0.05);
  border: 2px solid #00ff88;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 0 12px rgba(0,255,136,0.4), 0 0 30px rgba(0,255,136,0.15), inset 0 0 8px rgba(0,255,136,0.1);
  animation: codeby-mc-pulse 2.5s ease-in-out infinite;
}
.codeby-mc-button:hover {
  transform: scale(1.1);
}

/* Пульсация — неоновое свечение */
@keyframes codeby-mc-pulse {
  0%   { box-shadow: 0 0 12px rgba(0,255,136,0.4), 0 0 30px rgba(0,255,136,0.15), inset 0 0 8px rgba(0,255,136,0.1); }
  50%  { box-shadow: 0 0 18px rgba(0,255,136,0.5), 0 0 40px rgba(0,255,136,0.2), inset 0 0 12px rgba(0,255,136,0.15); }
  100% { box-shadow: 0 0 12px rgba(0,255,136,0.4), 0 0 30px rgba(0,255,136,0.15), inset 0 0 8px rgba(0,255,136,0.1); }
}

/* Иконки внутри кнопки (две, crossfade 6s) */
.codeby-mc-button__icon {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
}
.codeby-mc-button__icon--tg   { animation: codeby-mc-fade1 6s ease-in-out infinite; }
.codeby-mc-button__icon--chat  { animation: codeby-mc-fade2 6s ease-in-out infinite; }

/* После TG-check: crossfade иконок останавливается, пульсация остаётся */
.codeby-mc-button--resolved .codeby-mc-button__icon { animation: none; }

@keyframes codeby-mc-fade1 { 0%,38%{opacity:1} 42%,88%{opacity:0} 92%,100%{opacity:1} }
@keyframes codeby-mc-fade2 { 0%,38%{opacity:0} 42%,88%{opacity:1} 92%,100%{opacity:0} }

/* === Панель каналов === */
.codeby-mc-panel {
  position: fixed; bottom: 100px; right: 30px; z-index: 9998;
  background: #111316; border-radius: 14px;
  border: 0.5px solid rgba(0,255,136,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 16px; width: 240px;
}

.codeby-mc-panel__note {
  font-size: 11px; color: #999;
  margin: 10px 0 0; line-height: 1.4;
}

/* === Кнопки каналов в панели === */
.codeby-mc-channel {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer; margin-bottom: 8px;
  border: 0.5px solid; transition: background 0.15s;
}
.codeby-mc-channel__name { font-size: 13px; font-weight: 500; margin: 0; color: #e8e8e8; }
.codeby-mc-channel__desc { font-size: 11px; margin: 0; color: #888; }

.codeby-mc-channel--tg,
.codeby-mc-channel--forum {
  background: rgba(0,255,136,0.06);
  border-color: rgba(0,255,136,0.12);
}
.codeby-mc-channel--tg:hover,
.codeby-mc-channel--forum:hover {
  background: rgba(0,255,136,0.12);
}

/* === Overlay (backdrop blur при открытой панели) === */
.codeby-mc-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9997;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
}

/* === Мобильная адаптация === */
@media (max-width: 768px) {
  .codeby-mc-button { width: 48px; height: 48px; bottom: 20px; right: 20px; }
  .codeby-mc-panel { right: 20px; bottom: 80px; width: calc(100vw - 40px); max-width: 280px; }
}


/* === Шапка панели === */
.codeby-mc-panel__header {
  text-align: center;
  margin-bottom: 14px;
}
.codeby-mc-avatars {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.codeby-mc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #111316;
  display: flex;
  align-items: center;
  justify-content: center;
}
.codeby-mc-avatar--1 {
  background: linear-gradient(135deg, #1a2418, #1e3a24);
  z-index: 3;
}
.codeby-mc-avatar--2 {
  background: linear-gradient(135deg, #1a2025, #1e2d3a);
  margin-left: -10px;
  z-index: 2;
}
.codeby-mc-avatar--3 {
  background: linear-gradient(135deg, #1f1a25, #2a1e3a);
  margin-left: -10px;
  z-index: 1;
}
.codeby-mc-panel__subtitle {
  font-size: 13px;
  font-weight: 500;
  color: #e8e8e8;
  margin: 0;
}
.codeby-mc-panel__divider {
  height: 0.5px;
  background: rgba(0,255,136,0.12);
  margin: 0 20px 14px;
}

/* === Крестик закрытия === */
.codeby-mc-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.codeby-mc-panel__close:hover {
  background: rgba(255,255,255,0.1);
}

/* === Анимация скрытия кнопки === */
.codeby-mc-button--hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* === Accessibility === */
@media (prefers-reduced-motion: reduce) {
  .codeby-mc-button__icon { animation: none !important; }
  .codeby-mc-button { animation: none !important; }
}