/* ==========================================================================
   ФАЙЛ: MessageMeta.css
   Стили мета-блока (Strict Telegram Fidelity)
   ========================================================================== */

/* ПРИНЦИП 1: Абсолютный суб-слой */
.mc-message-meta {
  position: absolute;
  right: 6px;
  bottom: 6px;
  
  /* ПРИНЦИП 4: Современная Flex-сетка без грязных margin */
  display: inline-flex;
  align-items: center;
  gap: 4px; /* Идеальное расстояние между временем, иконками и текстом */
  
  height: 1.125rem;
  padding: 0 6px;
  border-radius: 10px;
  
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  
  /* CSS-переменные для контекстного хамелеона */
  color: var(--meta-color);
  background: var(--meta-bg, transparent);
  
  /* Защита от перекрытия (чтобы всегда был поверх медиа) */
  z-index: 2; 
}

/* --- ПРИНЦИП 2: Контекстный Хамелеон --- */

/* Вариант А: Поверх обычного текста */
.mc-message-meta.is-on-text {
  --meta-color: #686c72bf;
}

/* Если сообщение текстовое, но НАШЕ (зеленый/синий пузырь) */
.mc-report-bubble.is-own .mc-message-meta.is-on-text {
  --meta-color: #4CAF50; /* Замени на цвет галочек твоей темы */
}

/* Вариант Б: Поверх картинки / альбома */
.mc-message-meta.is-on-media {
  --meta-color: #ffffff; /* Белый текст */
  --meta-bg: #00000033; /* Темная полупрозрачная пилюля */
  
  right: 4px;
  bottom: 4px;
}

/* --- Внутренние элементы --- */

.mc-msg-status {
  font-size: 0.875rem; /* 14px - галочки чуть больше текста */
  margin-left: -2px; /* Визуальная компенсация отступа */
}

.mc-msg-edited {
  opacity: 0.8;
}

.icon-channelviews {
  font-size: 0.875rem;
}