/* === Оверлей-просмотрщик === */
.image-viewer-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
  }
  .image-viewer-content {
    position: relative;
    max-width: 420px;    /* тот же размер, что и .mobile-container */
    max-height: 90vh;
    overflow: hidden;
    border-radius: 12px;
    background: #000;    /* тёмный фон по краям */
  }
  .image-viewer-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.3s;
  }
  .image-viewer-img.zoomed {
    transform: scale(2);
    cursor: zoom-out;
  }
  /* Кнопка закрытия */
  .image-viewer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 20px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
  }
  
  /* Стрелки «назад» и «вперёд» - только символы, без фона */
  .image-viewer-prev,
  .image-viewer-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 2rem;           /* размер стрелок */
    line-height: 1;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
    transition: color 0.2s ease, opacity 0.2s ease;
  }
  
  /* Позиционирование стрелок */
  .image-viewer-prev {
    left: 8px;
  }
  .image-viewer-next {
    right: 8px;
  }
  
  /* Подсветка стрелок при наведении */
  .image-viewer-prev:hover,
  .image-viewer-next:hover {
    color: #ffffff;
    opacity: 1;
  }

/* === Сбросим фон/паддинги, вернём max-width 70% === */
.chat-message.image {
  background: transparent;
  padding: 0;
  margin: 8px 0;
  max-width: 70%;        /* как и текстовые сообщения */
}

/* === Выравнивание по сторонам === */
.chat-message.ai.image {
  margin-right: auto;    /* AI - слева */
  margin-left: 0;
}
.chat-message.user.image {
  margin-left: auto;     /* ты - справа */
  margin-right: 0;
}

/* === Контейнер «картинка + время» === */
.image-time-container {
  position: relative;
  display: block;        /* убираем inline-block и его whitespace */
  width: 100%;
  margin: 0;             /* сбрасываем любые внешние отступы */
  padding: 0;            /* сбрасываем внутренние отступы */
  overflow: hidden;      /* обрезаем лишнее за скруглением */
  border-radius: 12px;   /* скругление, как у картинки */
  line-height: 0;        /* убираем возможные межстрочные пробелы */
}

/* === Сама картинка без рамок, с закруглениями === */
.message-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;             /* обнуляем возможные margin */
  padding: 0;            /* обнуляем возможные padding */
  border: none !important;
  border-radius: inherit;/* наследуем скругление от контейнера */
  object-fit: cover;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

/* === Время для AI: правый нижний угол картинки === */
.chat-message.ai.image .image-time-container .message-time {
  position: absolute;
  bottom: 10px;
  right: 8px;
  background-color: rgba(48,48,48,0.7);
  color: #CFCFCF;
  font-size: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;             /* поверх картинки */
}

.chat-message.user.image {
  margin-left: auto;     /* ты - справа */
  margin-right: 0;
}

/* === Время для пользователя: правый нижний угол картинки === */
.chat-message.user.image .image-time-container .message-time {
  position: absolute;
  bottom: 10px;
  right: 8px;            /* Изменено с left: 8px на right: 8px */
  background-color: rgba(48,48,48,0.7);
  color: #CFCFCF;
  font-size: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}