/* 📊 Стили для таблицы с живыми сообщениями */
.stats {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  padding: 0!important;
  border-top: none!important;
}

.stats th, .stats td {
  padding: 0.3em 0.5em;
  border: 1px solid #ccc;
  vertical-align: middle;
}

.stats .tc2 { 
  width: 15% !important;
}

/* 📜 Тело таблицы с сообщениями: скролл и фиксированная высота */
#live-posts-body {
  display: block !important;
  max-height: 140px !important; /* Высота для 5 видимых сообщений */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative !important;
  scrollbar-width: thin;
  scrollbar-color: #999 transparent;
}

#live-posts-body::-webkit-scrollbar {
  width: 6px;
}

#live-posts-body::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

#live-posts-body::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 768px) {
  #live-posts-body {
    max-height: 112px !important; /* 4 видимых сообщения на мобилках */
  }
}

/* 📝 Каждая строка в tbody — отдельная таблица */
#live-posts-body tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 28px;
}

.stats thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#live-posts-body tr.new-message {
  background-color: #DBCDF1;
  transition: background-color 2s ease;
}

/* 🔘 Toggle switch */
.stats th.tcl { position: relative; }
.switch { position: absolute; left: 4px; display: inline-block; width: 36px; height: 16px; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; background-color: #ccc; transition: .4s; border-radius: 18px; top: 0; left: 0; right: 0; bottom: 0; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(18px); }
.pause-label { display: inline-block; margin-left: 6px; font-size: 13px; color: silver; user-select: none; position: absolute; left: 40px; top: 3px; }
@media (max-width: 600px) { .pause-label { display: none !important; } }