/* Фоновый цвет бокового меню чуть темнее, чем хедер */
.sidebar {
    background-color: #e3e3e3; /* Выберите более темный цвет, чем хедер */
    color: #212529; /* Цвет текста такой же, как и в хедере */
}

/* Цвет текста в боковом меню */
.sidebar .nav-link {
    color: #343a40; /* Цвет текста совпадает с цветом текста в хедере */
}

/* Цвет активного элемента в боковом меню */
.sidebar .nav-link.active {
    background-color: #3e3737; /* Фоновый цвет активного элемента */
    color: #212529; /* Цвет текста активного элемента */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.footer {
    background-color: #f8f9fa;
    color: #6c757d;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.content {
    flex-grow: 1;
    padding: 20px;
}

.collapse.show {
    transition: max-height 0.3s ease-in-out;
    max-height: 1000px; /* Достаточно для отображения содержимого */
}
.collapse {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
.message-wrapper {
    max-width: 70%;
    position: relative;
    margin-bottom: 10px;
    padding-right: 30px; /* Отступ для кнопки перевода */
}

.message-content {
    padding: 10px 15px;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(6, 36, 8, 0.664);
}

/* Сообщения от текущего пользователя */
.sent-message {
    background-color: #b6bab5; /* Мягкий серый цвет для сообщений */
    color: #000;
}

/* Сообщения от другого пользователя */
.received-message {
    background-color: #a5b2a7; /* Еще более светлый цвет */
    color: #000;
}

/* Кнопка перевода */
.translate-button {
    position: absolute;
    top: 50%;
    right: -25px; /* Аккуратный отступ для кнопки */
    transform: translateY(-50%);
    color: #114921;
}
.attachment {
    margin-top: 5px;
}

.attachment-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 5px;
}
.message-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Общие стили для календаря */
#calendar {
    max-width: 100%;
    margin: 0 auto;
}

/* Адаптация для экранов шириной меньше 768px */
@media (max-width: 768px) {
    #calendar {
        font-size: 12px; /* Уменьшаем размер текста */
    }

    .fc-toolbar {
        flex-wrap: wrap; /* Инструменты календаря в несколько строк */
        font-size: 12px; /* Уменьшаем размер кнопок */
    }

    .fc-daygrid-event {
        font-size: 10px; /* Уменьшаем текст событий */
        padding: 2px; /* Уменьшаем отступы */
    }

    .fc-daygrid-day-number {
        font-size: 12px; /* Уменьшаем номера дней */
    }
}

/* Адаптация для экранов шириной меньше 576px */
@media (max-width: 576px) {
    #calendar {
        font-size: 10px;
    }

    .fc-toolbar-title {
        font-size: 14px; /* Уменьшаем заголовок месяца */
    }

    .fc-toolbar {
        font-size: 10px; /* Ещё меньше размер кнопок */
    }

    .fc-daygrid-event {
        white-space: nowrap; /* Запрет переноса текста */
        overflow: hidden; /* Скрытие длинных текстов */
        text-overflow: ellipsis; /* Указываем многоточие для длинных текстов */
    }

    .fc-daygrid-day-number {
        font-size: 10px;
    }
    
}
.preview-thumbnail {
    width: 120px;             /* Ширина миниатюры */
    height: 120px;            /* Высота миниатюры */
    object-fit: cover;        /* Заполняем заданную область, обрезая излишки */
    border: 1px solid #ccc;   /* Небольшая рамка для наглядности */
    border-radius: 4px;       /* Слегка скруглённые углы (необязательно) */
    margin: 5px;              /* Отступ вокруг */
}

/* chat: чтобы список сообщений мог иметь max-height */
.content{ display:flex; flex-direction:column; min-height:0; }
.chat-main{ display:flex; flex-direction:column; min-height:0; }
.chat-msgs{ overflow:auto; } /* прокрутка внутри ленты */

/* предпросмотр вложений в композере */
.compose-previews{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; margin-top:6px;
  border:1px dashed #e5e7eb; border-radius:10px; background:#fafafa;
}
.compose-previews:empty{ display:none; }

.preview-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  max-width:220px;
}
.preview-thumb{
  width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid #e5e7eb;
}
.preview-name{
  font-size:.9rem; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.preview-remove{
  border:0; background:transparent; color:#9ca3af; padding:0 4px; line-height:1;
}
.preview-remove:hover{ color:#ef4444; }

/* тёмная тема */
body.theme-dark .compose-previews{ border-color:#1f2937; background:#0f172a; }
body.theme-dark .preview-chip{ border-color:#1f2937; background:#111827; }
body.theme-dark .preview-name{ color:#e5e7eb; }
:root{
    --topbars: 0px;      /* высота хедера(ов) */
    --composerH: 0px;    /* высота композера */
  }
  
  /* чтобы flex-контейнеры не тянули страницу */
  .content { display:flex; flex-direction:column; min-height:0; }
  .chat-main{ display:flex; flex-direction:column; min-height:0; }
  
  /* лента сообщений прокручивается внутри и не «ломает» страницу */
  .chat-msgs{
    overflow:auto;
    max-height: calc(100vh - var(--topbars) - var(--composerH) - 16px);
    -webkit-overflow-scrolling: touch;
    min-height: 220px;
  }
  @media (max-width: 480px){
    .chat-wrap { gap: 8px !important; }
    .chat-header, .chat-list, .chat-msgs { padding: 8px !important; border-radius: 10px !important; }
    .msg { max-width: 96% !important; }
  
    /* Аккуратно: это глобально влияет на все страницы */
    .container, .container-fluid { padding-left: 6px !important; padding-right: 6px !important; }
  }
  .add-contact-form .form-control { border-radius: .5rem 0 0 .5rem; }
  .add-contact-form .btn { border-radius: 0 .5rem .5rem 0; }
  /* Карточка "Add contact" — такой же радиус, как у остальных */
.card.add-inline { border-radius: 1rem !important; }

/* Скруглить input-group как единую «капсулу» */
.add-inline-group .form-control {
  border-top-left-radius: .75rem !important;
  border-bottom-left-radius: .75rem !important;
}
.add-inline-group .btn {
  border-top-right-radius: .75rem !important;
  border-bottom-right-radius: .75rem !important;
}

/* Чуть плотнее отступы, как у соседних блоков */
.card.add-inline .card-body { padding: 12px 14px; }