/* страница назад свайп */
body {
    transition: transform 0.3s ease-out;
    transform-origin: left center; /* Точка сгиба страницы */
    overflow-x: hidden; /* Блокируем горизонтальный скролл */
     background-color: black;
     margin-top: 20px!important;
}
html, body {
  overflow: hidden;   /* отключает скролл по всей странице */
  height: 100%;       /* фиксируем высоту */
}

.container,
.container-fluid {
  padding-left: 2px;
  padding-right: 2px;
}

/* ПОИСК ПАНЕЛЬ  */

.search-container {
    position: relative;
    margin-bottom: 10px;
    background: #2a2a3d;
    width: 80%;
    
    border-radius: 5px;
    color:white!important;
    
}

#search-input {
    width: 100%;
    height: 30px;
    padding: 8px;
    border: 1px solid gold;
    box-shadow: 0 0 2px gold, 0 0 8px gold, 0 0 12px gold, 0 0 20px #0077b3; /* Усиленное свечение */
    border-radius: 5px;
    background: #2a2a3d;
    color:white!important;
}
#search-input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Белый с небольшой прозрачностью */
    font-style: italic;
    font-size:12px;
}

#search-input:-ms-input-placeholder { /* Для Internet Explorer */
    color: rgba(255, 255, 255, 0.7);
}

#search-input::-ms-input-placeholder { /* Для Microsoft Edge */
    color: rgba(255, 255, 255, 0.7);
}

.search-results {
    position: absolute;
    width: 100%;
    background: #2a2a3d;
    border-radius: 5px;
    border: 1px solid gold;
    box-shadow: 0 0 2px gold, 0 0 8px gold, 0 0 12px gold, 0 0 20px #b38c00; /* Усиленное свечение */
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item {
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    background: #2a2a3d;
    color:blue;
}

.search-result-item:hover {
    background: #2a2a3d;
}

.avatar-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid gold;
    box-shadow: 0 0 2px gold, 0 0 8px gold, 0 0 12px gold, 0 0 20px #9bb300; /* Усиленное свечение */
    margin-right: 10px;
}


/* КНОПКИ СВВЕРХУ */

.buttons-row{
    display: flex; /* Горизонтальное размещение элементов */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: center; /* Центрируем элементы по вертикали */
    gap: 30px; /* Расстояние между изображением и текстом */
}
.btn-outline-secondary {
    width: 100px!important;
    font-size: 15px!important;
    color: gold;
    border: 1px solid gold;
    box-shadow: 0 0 2px gold, 0 0 8px gold, 0 0 12px gold, 0 0 20px #0077b3; /* Усиленное свечение */
    transition: color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    border-radius: 50px!important;
    padding: 10px 15px;
    margin: 2px;
    margin-bottom: 30px;
}

/* Усиленное свечение при наведении */
.btn-outline-secondary:hover {
    color: gold; /* Светлый оттенок синего */
    background-color: rgba(0, 207, 255, 0.1); /* Легкий фон */
    box-shadow: 0 0 12px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px #0077b3; /* Усиленное свечение */
    transform: scale(1.05);
}

/* Усиленное свечение при нажатии */
 .btn-outline-secondary:active {
    transform: scale(0.95);
    background-color: rgba(0, 207, 255, 0.2); /* Более насыщенный фон */
    box-shadow: 0 0 10px gold, 0 0 25px gold, 0 0 35px gold; /* Усиленное свечение при нажатии */
}


/* Для блока name_img */
.name_img {
    display: flex; /* Горизонтальное размещение элементов */
    align-items: center; /* Центрируем элементы по вертикали */
    gap: 10px; /* Расстояние между изображением и текстом */
}

/* Для блока d-flex flex-column */
.d-flex.flex-column {
    display: flex; /* Flexbox */
    flex-direction: column; /* Элементы размещаются в столбик */
    justify-content: center; /* Центрируем элементы по вертикали */
    gap: 5px; /* Расстояние между строками */
}
    .missed-calls {
        color: gold;
        font-weight: bold;
    }
    .badge {
        color: #fff;
        background-color: gold;
    }
    .bi-telephone-fill {
        font-size: 1.2em;
    }

    /* Стили для контейнера received-container */
#received-container {
    background-color: #1e1e2f;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    color: #f0f0f0;
    max-height: 1000px; /* Ограничение высоты контейнера, можно изменить значение */
    overflow-y: auto;  /* Включение вертикальной прокрутки */
    max-width: 100%;
    height: 700px;
    
   
}

/* Заголовок для received-container */
#received-container h4 {
    color: gold;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
    font-size:18px;
  
}

/* Стили для каждого элемента списка сообщений */
#received-messages .list-group-item {
    width: 100%;
    background-color: #2a2a3d;
    border: none;
    border-radius: 8px;
    color: #f0f0f0;
    padding: 15px;
    margin-bottom: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-style: normal!important; /* Убирает курсив */
   
}

/* ИМЯ ПОЛЬЗОВАТЕЛЯ  */
/* Стили для имени пользователя */
#received-messages .list-group-item strong {
    font-size: 1.2em; /* Увеличивает размер шрифта */
    font-family: 'Arial', sans-serif; /* Пример семейства шрифтов */
    color: gold; /* Неоновый синий цвет */
    font-weight: bold!important; /* Жирный шрифт */
    transition: color 0.3s ease;
    margin-left: 5px; /* Сдвигает текст влево, ближе к аватару */
}

/* Дополнительный эффект при наведении */
#received-messages .list-group-item strong:hover {
    color: gold; /* Изменение цвета при наведении */
}



#received-messages .list-group-item:hover {
    background-color: #343450;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    font-style: normal!important; /* Убирает курсив */
}
.message-time {
    font-size: 0.8em;
    color: #999999;
    margin-left: 10px;
}

/* Стиль для аватарки */
#received-messages .rounded-circle {
    border: 2px solid gold;
    box-shadow: 0 0 8px gold;
}

/* Стиль для имени пользователя */
#received-messages strong {
    color: gold;
    font-weight: bold;
}

/* Стиль для пропущенных звонков */
.missed-calls {
    color: #ff6b6b;
    font-weight: bold;
}

/* Стиль для последнего сообщения */
.small.text-muted {
    color: #ccc;
    margin-right: 10px; /* Отступ между меткой и текстом */
}

/* Стиль для статуса прочтения сообщений */
.message-status {
    margin-left: 10px;
    font-size: 1em;
    font-weight: bold;
    color: #007bff;
}

/* Неоновый эффект для прочитанных сообщений */
.message-status.read {
    color: gold;
}

/* Для непрочитанных сообщений - серый значок */
.message-status.unread {
    color: #777;
}

/* ДЛЯ ПОСЛЕДНИХ СООБЩЕНИИ */

/* Стили для контейнера последнего сообщения */
.last-message-container {
    display: flex;
    align-items: center;
    width: 100%!important;
    font-size: 0.9em; /* Измените размер текста при необходимости */
    color: #b0b0b0; /* Основной цвет для текста */
    margin-top: 5px; /* Отступ сверху */
     
}
/* Стили для метки "Последнее сообщение:" */
.last-message-label {
    display: inline-block;   /* или block, если нужно, но не flex */
    white-space: nowrap;     /* запрещаем перенос строки */
    color: gold; /* Цвет неона */
    margin-right: 10px; /* Отступ между меткой и текстом */
    font-style: normal!important;
}

/* Стили для текста последнего сообщения */
.last-message-text {
    font-size: 14px;
   color: white!important; /* Цвет текста последнего сообщения */
  font-style: normal !important;
    white-space: nowrap;  /* всё в одну строку */
    overflow: hidden;     /* обрезаем лишнее */
    text-align: justify !important;
    display: block;       /* гарантируем блочный контекст */
    max-width: 350px;  /* 🔥 ограничиваем ширину блока */
}

        /* В СЕТИ НЕ В СЕТИ */

          .status-indicator {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;   /* тянет весь блок к правому краю */
}

        .status-lamp {
            font-size: 1.2em;
            margin-right: 5px;
        }

        .status-lamp.online {
            color: green;
        }

        .status-lamp.offline {
            color: red;
        }

        /* Стили для typing-indicator */
        #typing-indicator {
            font-style: italic;
            padding: 5px 15px;
            color: #bbb;
        }

        .online-text {
        color: green;
    }
    .offline-text {
        color: red; /* Цвет текста "Не в сети" — красный */
    }

    /* Основной стиль для кнопок-иконок */
.chat-icon-button {
    background: none;
    border: none;
    color: gold; /* Основной цвет неона */
    font-size: 24px;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin: 0 10px;
}
 /* Стили для typing-indicator */
 #typing-indicator {
            font-style: italic;
            padding: 5px 15px;
            color: #bbb;
        }

/* КОНТЕЙНЕР ДЛЯ УДАЛИТЬ ГАЛЛОЧКИ И ЗВЕЗДА */
    .status-and-actions {
    display: flex;
    justify-content: space-between; /* звезда слева, удалить справа */
    align-items: center;
    width: 100%;    /* на всю ширину контейнера */
    margin-top: auto;
}
/* ГАЛОЧКИ */
.status-icon {
    display: inline-block; /* Контейнер для иконок */
    position: relative; /* Для позиционирования вложенных элементов */
    width: 30px!important; /* Ширина контейнера */
    height: 20px; /* Высота контейнера */
    margin-right: 50px; /* Отступ справа */
    margin-left: 30px; /* Отступ слева */
    font-size:20px!important;
}

.status-icon i {
    position: absolute; /* Позиционируем иконки */
    font-size: 30px!important; /* Размер иконок */
}

.status-icon i:first-child {
    top: 0;
    left: 0;
}

.status-icon i:last-child {
    top: 0; /* Смещение вниз */
    left: 6px; /* Смещение вправо */
}

.status-icon.read i {
    color: #00c000; /* Яркий зелёный */
}

.status-icon.not-read i {
    color: #808080; /* Тёмно-серый */
}


form {
    display: inline-block;
   
}

    /* КНОПКА УДАЛИТЬ */
       .btn-danger { 
        width: auto !important;
    width: 50px !important; /* Фиксированная ширина */
    height: 20px !important; /* Фиксированная высота */
   
    background-color: #dc3545 !important; /* Красный цвет */
    border: none !important;
    color: white !important;
    font-size: 10px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important; /* Используем inline-block */
    padding: 0 !important; /* Убираем внутренние отступы */
    text-align: center !important; /* Центр текста */
    vertical-align: middle!important; /* Для выравнивания по вертикали рядом с другими элементами */
    margin-left: auto; 
}

.btn-danger:hover {
    background-color: #a71d2a!important; /* Темный красный */
}


/* ЗВЕЗДА УВЕДОМЛЕНИЯ ДЛЯ СООБЩЕНИЙ */

/* Стили для звезды с неоновым сиянием */
/* CSS стили для звезды */
.unread-star {
    display: inline-flex; /* Устанавливаем строковый контекст */
    padding: 0; /* Убираем внутренние отступы */
    margin: 0; /* Убираем внешние отступы */
    margin-right:5px!important;
    margin-left:10px!important;
    position: relative;
   
    align-items: center;
    justify-content: center;
    width: 10p!important;
    height: 30px;
    background-color: transparent; /* Прозрачный фон */
    
    border-radius: 50%; /* Круглая рамка */
    box-shadow: 0 0 15px gold, 0 0 25px gold, 0 0 35px gold; /* Усиленное свечение при наведении */
    transform: scale(1.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.unread-star:hover {
    box-shadow: 0 0 15px gold, 0 0 25px gold, 0 0 35px gold; /* Усиленное свечение при наведении */
    transform: scale(1.1);
}

.unread-count {
    position: absolute;
    color:rgb(6, 7, 79); /* Неоново-синий цвет текста */
     font-weight: bold;
    font-size: 1,2em;
}

.unread-star i {
    color: gold; /* Светло-серый цвет звезды */
    font-size: 1.6em; /* Размер звезды */
    z-index: -2; /* Звезда за текстом, если текст сверху */
}


/* =============================================== */



 /* ЗОЛОТОЙ КОЛОКОЛЬЧИК */

/* Стили для золотого колокольчика */
.nav-item.dropdown .nav-link #goldenBell {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00; /* Эффект свечения */
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
   
}

/* Стили для счетчика уведомлений */
.nav-item.dropdown .nav-link #notificationCount {
    background-color: gold !important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 8px;
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-block; /* Показываем счетчик */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00; /* Эффект свечения */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Эффект при изменении */
}

.nav-item.dropdown .nav-link #notificationCount:hover{
    background-color: #ffae00; /* Более яркий цвет при наведении */
    transform: scale(1.2); /* Увеличение при наведении */
}

/* Удаляем возможные эффекты из Bootstrap */
.nav-link .bi-bell {
    text-shadow: none !important; /* Убираем тени от Bootstrap */
    background: none !important; /* Убираем возможный фон */
    color: gold !important; /* Принудительно задаем цвет */
}
/* Общий стиль для выпадающего списка уведомлений */
#notificationList {
    max-height: 700px; /* Увеличиваем высоту */
    width: 700px; /* Делаем шире */
    border-radius: 8%; /* Закругленные границы */
    overflow-y: auto; /* Добавляем прокрутку, если содержимое превышает высоту */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Добавляем тень */
    background-color: black;
    padding: 10px; /* Внутренний отступ */
    border: 1px solid #ffd700; /* Золотая рамка */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00, 0 0 20px #ffae00; /* свечение */
}
/* Элементы списка уведомлений */
#notificationList .dropdown-item {
    padding: 10px; /* Увеличиваем отступы */
    font-size: 16px; /* Размер текста */
    color: #ffd700; /* Золотой цвет текста */
   
    border-bottom: 1px solid #eee; /* Разделение элементов */
    border-radius: 8px; /* Закругленные элементы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Эффект при наведении *
    font-weight: bold; /* Убираем это */
}


/* Для последнего элемента убираем нижнюю границу */
#notificationList .dropdown-item:last-child {
    border-bottom: none;
}


/* Текст уведомления */
#notificationList .dropdown-item .notification-text {
    flex-grow: 1; /* Текст занимает оставшееся пространство */
    font-size: 15px!important; /* Уменьшаем размер текста */
    color:#ffd700!important;
    overflow: hidden; /* Скрываем текст, если он слишком длинный */
    text-overflow: ellipsis; /* Добавляем многоточие для длинного текста */
    white-space: nowrap; /* Запрещаем перенос текста */
}

#notificationList .dropdown-item .notification-text :hover{
    color:#ffd700!important;

}
/* Аватарка */
#notificationList .dropdown-item img {
    width: 36px!important; /* Уменьшаем ширину */
    height: 36px!important; /* Уменьшаем высоту */
    border-radius: 50%; /* Делаем аватарку круглой */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold!important; /* Золотая рамка для аватарки */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00, 0 0 20px #ffae00; /* свечение */
}

/* Имя автора */
#notificationList .dropdown-item .notification-text .actor-name {
    font-weight: bold; /* Выделяем жирным */
    color: #333; /* Темный цвет */
    font-size: 40px!important; /* Чуть больше для выделения */
}

/* Дата уведомления */
#notificationList .dropdown-item .notification-text .notification-date {
    font-size: 10px!important; /* Уменьшаем размер */
    color: #888; /* Светлый серый */
    margin-top: 3px; /* Отступ сверху */
}

/* Эффект при наведении на уведомление */
#notificationList .dropdown-item:hover {
    background-color: #333; /* Темный фон */
    color: #ffd700!important; 
}

/* ЗОЛОТОЙ ЧЕЛОВЕЧИК УВЕДОМЛЕНИЯ  */

.nav-item.dropdown .nav-link #goldenPerson {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00; /* Эффект свечения */
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
}

.nav-item.dropdown .nav-link #goldenPerson:hover {
    transform: scale(1.2); /* Увеличение при наведении */
}

/* Счетчик запросов в друзья */
.nav-item.dropdown .nav-link #friendRequestCount {
    background-color: gold !important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 8px;
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-block; /* Показываем счетчик */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00; /* Эффект свечения */

}

.nav-item.dropdown .nav-link #friendRequestCount:hover {
    background-color: #ffae00; /* Более яркий цвет при наведении */
    transform: scale(1.2); /* Увеличение при наведении */
}

/* Общий стиль для выпадающего списка */
#friendRequestList {
    max-height: 300px; /* Ограничиваем высоту */
    width: 500px; /* Ширина списка */
    border-radius: 10px; /* Закругленные углы */
    overflow-y: auto; /* Прокрутка при переполнении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень списка */
    background-color: black; /* Фон списка */
    padding: 10px; /* Внутренние отступы */
    border: 1px solid #ffd700!important; /* Золотая рамка */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00, 0 0 20px #ffae00!important; /* Эффект свечения */
}

/* Элементы выпадающего списка */
#friendRequestList .dropdown-item {
    padding: 10px; /* Внутренние отступы */
    font-size: 16px; /* Размер текста */
    color: #ffd700!important; /* Золотой текст */
    display: flex; /* Flex-контейнер для выравнивания */
    display: block; /* Убедитесь, что это блочный элемент */
    align-items: center; /* Центрирование по вертикали */
    text-align: center; /* Центр текста */
    width: 100%; /* Чтобы текст занимал всю ширину */
    border-radius: 8px; /* Закругленные углы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный эффект при наведении */

}

/* Эффект при наведении */
#friendRequestList .dropdown-item:hover {
    background-color: #333; /* Темный фон */
    color: #ffd700!important; 
}

/* Аватарка в уведомлении */
#friendRequestList .dropdown-item img {
    width: 35px!important; /* Ширина аватарки */
    height: 35px!important; /* Высота аватарки */
    border-radius: 50%; /* Круглая форма */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00, 0 0 20px #ffae00; /* Эффект свечения */
}

/* Имя в уведомлении */
#friendRequestList .dropdown-item span {
    font-weight: bold; /* Жирный шрифт */
    color: #ffd700!important; 
    font-size: 14px; /* Размер шрифта */
    margin-right: 10px; /* Отступ справа */
    flex-grow: 1; /* Текст занимает оставшееся пространство */

}

.friend-request-text{
    font-size: 10px!important; /* Размер текста */
    font-weight: normal!important; /* Обычный вес текста */
}

/* Кнопки "Принять" и "Отклонить" */
.dropdown-item button.btn-accept {
    width:70px!important;
  height: 30px!important;
    font-size: 12px;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #007bff!important; /* Синий фон */
    color: white; /* Белый текст */
}

.dropdown-item button.btn-accept:hover {
    background-color: #0056b3; /* Темный синий */
}

.dropdown-item button.btn-decline {
    width:70px!important;
  height: 30px!important;
    font-size: 12px;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #dc3545!important; /* Красный фон */
    color: white; /* Белый текст */
}

.dropdown-item button.btn-decline:hover {
    background-color: #a71d2a; /* Темный красный */
}



/* ЗОЛОТОЙ КОНВЕРТ */

#goldenEnvelope {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
   
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
}
.dropdown-item.text-center {
    color: gold !important; /* Золотой цвет текста */
    font-weight: bold; /* Жирный текст */
    font-size: 12px!important; /* Размер шрифта */
    
    background-color: transparent !important; /* Прозрачный фон */
    border: none; /* Убираем границы */
    padding: 10px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    border-radius: 5px; /* Закругление углов */
    transition: background-color 0.3s ease, color 0.3s ease!important; /* Плавный эффект */
    transform: scale(1.05)!important;
}

.dropdown-item.text-center:hover {
    color:gold !important; /* Ярче при наведении */
    background-color: rgba(255, 215, 0, 0.1)!important; /* Полупрозрачный фон при наведении */
    transform: scale(1.05)!important;
}


.nav-item.dropdown .nav-link #messageCount {
    background-color: gold !important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 8px;
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-block; /* Показываем счетчик */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700!important; /* Эффект свечения */
    transition: transform 0.3s ease; /* Добавляем плавность */
}
.nav-item.dropdown .nav-link #messageCount:hover {
  transform: scale(1.2)!important; /* Увеличение при наведении */
}


/* Стили для сообщений в выпадающем списке */

/* Общий контейнер сообщения */
#messageList {
    max-height: 300px; /* Ограничиваем высоту */
    width: 500px; /* Ширина списка */
    border-radius: 10px; /* Закругленные углы */
    overflow-y: auto; /* Прокрутка при переполнении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень списка */
    background-color: black; /* Фон списка */
    padding: 10px; /* Внутренние отступы */
    border: 1px solid #ffd700; /* Золотая рамка */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 20px #ffd700; /* Эффект свечения */
}

/* Элементы списка сообщений */
#messageList .message-item {
    padding: 10px; /* Внутренние отступы */
    font-size: 12px; /* Размер текста */
    color: #ffd700!important; /* Золотой текст */
    display: flex; /* Flex-контейнер для выравнивания */
    align-items: center; /* Центрирование по вертикали */
    width: 100%; /* Ширина элемента */
    border-radius: 8px; /* Закругленные углы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный эффект при наведении */
}

/* Эффект при наведении */
#messageList .message-item:hover {
    background-color: #333; /* Темный фон */
    color: #ffd700!important; 
}

/* Аватарка сообщения */
#messageList .message-avatar {
    width: 40px!important; /* Ширина аватарки */
    height: 40px!important; /* Высота аватарки */
    border-radius: 50%; /* Круглая форма */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffae00, 0 0 20px #ffae00; /* Эффект свечения */
}

/* Контент сообщения (имя и текст) */
#messageList .envelope-content {
    flex-grow: 1; /* Занимает оставшееся пространство */
    margin-right: 15px; /* Отступ справа от метаинформации */
    
}

/* Имя пользователя */
#messageList .envelope-user-name {
    font-size: 18px; /* Размер текста */
    color: #ffd700!important; /* Золотой цвет текста */
    font-weight: bold; /* Жирный шрифт */
    margin-bottom: 5px; /* Отступ снизу */
    display: block; /* Блочная модель */
    max-width: 3000px!important;
}

/* Текст последнего сообщения */
#messageList .envelope-last-text {
    font-size: 14px; /* Размер текста */
    color: gold; /* Светло-серый цвет */
   
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px; /* Ширина для обрезки длинных сообщений */
    font-style: normal!important;
}

#messageList .dropdown-item.text-center {
    color: gold; /* Золотой цвет текста */
    font-size: 12px!important; /* Размер текста */
    font-weight: bold; /* Жирный текст */
    text-align: center; /* Центровка текста */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    border-radius: 8px; /* Закругленные углы */
    margin: 5px 0; /* Отступы сверху и снизу */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавные эффекты при изменении */
}



/* СТРАНИЦА МОБИЛЬНАЯ  */

@media (max-width: 576px) {
/* КНОПКИ СВВЕРХУ */

.buttons-row{
    display: flex; /* Горизонтальное размещение элементов */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: center; /* Центрируем элементы по вертикали */
    gap: 20px!important; /* Расстояние между изображением и текстом */
    width: 100%!important;
}
.btn-outline-secondary {
    width: 70px!important;
    font-size: 12px!important;
    color: gold;
    border: 1px solid gold;
    box-shadow: 0 0 2px gold, 0 0 8px gold, 0 0 12px gold, 0 0 20px #0077b3; /* Усиленное свечение */
    transition: color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    border-radius: 50px!important;
    padding: 10px 15px;
    margin: 2px;
    margin-bottom: 30px;
    align-items: center!important; /* Вертикальное центрирование */
    justify-content: center!important; /* Горизонтальное центрирование */
    padding: 0!important; /* Убираем внутренние отступы для точного позиционирования текста */
    text-align: center!important; /* Центр текста внутри */
}

/* Усиленное свечение при наведении */
.btn-outline-secondary:hover {
    color: gold; /* Светлый оттенок синего */
    background-color: rgba(0, 207, 255, 0.1); /* Легкий фон */
    box-shadow: 0 0 12px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px #0077b3; /* Усиленное свечение */
    transform: scale(1.05);
}

/* Усиленное свечение при нажатии */
 .btn-outline-secondary:active {
    transform: scale(0.95);
    background-color: rgba(0, 207, 255, 0.2); /* Более насыщенный фон */
    box-shadow: 0 0 10px gold, 0 0 25px gold, 0 0 35px gold; /* Усиленное свечение при нажатии */
}


/* Для блока name_img */
.name_img {
    display: flex; /* Горизонтальное размещение элементов */
    align-items: center; /* Центрируем элементы по вертикали */
    gap: 10px; /* Расстояние между изображением и текстом */
    
}

/* Для блока d-flex flex-column */
.d-flex.flex-column {
    display: flex; /* Flexbox */
    flex-direction: column; /* Элементы размещаются в столбик */
    justify-content: center; /* Центрируем элементы по вертикали */
    gap: 5px; /* Расстояние между строками */
}
    .missed-calls {
        color: gold;
        font-weight: bold;
    }
    .badge {
        color: #fff;
        background-color: gold;
    }
    .bi-telephone-fill {
        font-size: 1.2em;
    }

    /* Стили для контейнера received-container */
#received-container {
    background-color: #1e1e2f;
    border-radius: 12px;
   padding: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    color: #f0f0f0;
    height: 650px!important; /* Ограничение высоты контейнера, можно изменить значение */
    overflow-y: auto!important;  /* Включение вертикальной прокрутки */
    overflow: hidden; /* Скрывает лишние элементы */
    width: 100% !important; /* Установите фиксированную ширину */
    margin: 0 auto!important; /* Центрируем контейнер */
     margin-bottom:0!important;
     margin-top: 0!important;
     
}

/* Заголовок для received-container */
#received-container h4 {
    color: gold;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
    font-size:15px;
  
}
#received-messages {
    display: flex;
    flex-wrap: wrap!important; /* Позволяет элементам переноситься на новую строку */
    gap: 8px; /* Задает расстояние между элементами */
}
/* Стили для каждого элемента списка сообщений */
#received-messages .list-group-item {
    width: 360px!important;
   
    display: block!important; /* Высота будет зависеть от содержимого */
    background-color: #2a2a3d;
    border: none;
    border-radius: 8px;
    color: #f0f0f0;
    
    padding: 10px!important;
    margin-bottom: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    flex: 1 1 calc(50% - 10px); /* Элементы занимают 50% ширины контейнера */
    font-style: normal!important; /* Убирает курсив */
    margin: 0 auto!important; /* Центрируем контейнер */
    margin-right: 2px!important;
    margin-left: -15px!important;
}

/* ИМЯ ПОЛЬЗОВАТЕЛЯ  */
/* Стили для имени пользователя */
#received-messages .list-group-item strong {
    font-size: 1.2em; /* Увеличивает размер шрифта */
    font-family: 'Arial', sans-serif; /* Пример семейства шрифтов */
    color: gold; /* Неоновый синий цвет */
    font-weight: bold!important; /* Жирный шрифт */
    transition: color 0.3s ease;
    margin-left: 5px; /* Сдвигает текст влево, ближе к аватару */
    text-decoration: none !important; /* Убираем подчеркивание */
}

/* Дополнительный эффект при наведении */
#received-messages .list-group-item strong:hover {
    color: gold; /* Изменение цвета при наведении */
}



#received-messages .list-group-item:hover {
    background-color: #343450;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    font-style: normal!important; /* Убирает курсив */
}
.message-time {
     font-size: 1.4em!important;
    color: black;
    color: #999999;
    margin-left: 10px;
}

/* Стиль для аватарки */
#received-messages .rounded-circle {
    width: 50px!important;
    height: 50px!important;
    border: 2px solid gold;
    box-shadow: 0 0 8px gold;
}

/* Стиль для имени пользователя */
#received-messages strong {
    color: gold;
    font-weight: bold;
    font-size:18px!important;
}

/* Стиль для пропущенных звонков */
.missed-calls {
    color: #ff6b6b;
    font-weight: bold;
}

/* Стиль для последнего сообщения */
.small.text-muted {
    color: #ccc;
    margin-right: 10px; /* Отступ между меткой и текстом */
}

/* Стиль для статуса прочтения сообщений */
.message-status {
    margin-left: 10px;
    font-size: 1em!important;
    font-weight: bold;
    color: #007bff;
}

/* Неоновый эффект для прочитанных сообщений */
.message-status.read {
    color: gold;
}

/* Для непрочитанных сообщений - серый значок */
.message-status.unread {
    color: #777;
}

/* ДЛЯ ПОСЛЕДНИХ СООБЩЕНИИ */

/* Стили для контейнера последнего сообщения */
.last-message-container {
    display: flex;
    align-items: center;
    font-size: 0.5em; /* Измените размер текста при необходимости */
    color: #b0b0b0; /* Основной цвет для текста */
    margin-top: 5px; /* Отступ сверху */
    width: 100%!important;
    gap: 2px!important;
     
}

/* Стили для метки "Последнее сообщение:" */
.last-message-label {
    display: inline-block;   /* или block, если нужно, но не flex */
    white-space: nowrap;     /* запрещаем перенос строки */
    color: gold; /* Цвет неона */
    margin-right: 10px; /* Отступ между меткой и текстом */
    font-style: normal!important;
}

/* Стили для текста последнего сообщения */
.last-message-text {
    font-size: 13px!important;
   color: white!important; /* Цвет текста последнего сообщения */
    font-style: normal!important;

    white-space: normal;     
    word-wrap: break-word;   
    overflow-wrap: anywhere; 
text-align: justify !important;
    max-width: 200px!important;  /* 🔥 ограничиваем ширину блока */
    display: inline-block; /* чтобы работал max-width */
}



        /* В СЕТИ НЕ В СЕТИ */

            .status-indicator {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;   /* тянет весь блок к правому краю */
}



        .status-lamp {
            font-size: 0.9em;
            margin-right: 5px;
        }

        .status-lamp.online {
            color: green;
        }

        .status-lamp.offline {
            color: red;
        }

        /* Стили для typing-indicator */
        #typing-indicator {
            font-size:12px!important;
            font-style: italic;
            padding: 5px 15px;
            color: #bbb;
        }

        .online-text {
            font-size:12px!important;
        color: green;
    }
    .offline-text {
        font-size:12px!important;
        color: red; /* Цвет текста "Не в сети" — красный */
    }

    /* Основной стиль для кнопок-иконок */
.chat-icon-button {
    background: none;
    border: none;
    color: gold; /* Основной цвет неона */
    font-size: 12px!important;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin: 0 10px;
}
 /* Стили для typing-indicator */
 #typing-indicator {
            font-style: italic;
            padding: 5px 15px;
            color: #bbb;
        }


   /* КОНТЕЙНЕР ДЛЯ УДАЛИТЬ ГАЛЛОЧКИ И ЗВЕЗДА */
.status-and-actions {
    display: flex;
    justify-content: space-between; /* звезда слева, удалить справа */
    align-items: center;
    width: 100%;    /* на всю ширину контейнера */
    margin-top: auto;
}
/* ГАЛОЧКИ */
.status-icon {
    display: inline-flex;
   
    gap: 5px; /* Расстояние между галочками */
    display: inline-block; /* Контейнер для иконок */
    position: relative; /* Для позиционирования вложенных элементов */
    width: 25px!important; /* Ширина контейнера */
    height: 20px; /* Высота контейнера */
    margin-right: 5px!important; /* Отступ между каждым элементом */
    margin-left: 10px!important;
}

.status-icon i {
    position: absolute; /* Позиционируем иконки */
    font-size: 20px; /* Размер иконок */
}

.status-icon i:first-child {
    top: 0;
    left: 0;
}

.status-icon i:last-child {
    top: 0; /* Смещение вниз */
    left: 6px; /* Смещение вправо */
}

.status-icon.read i {
    color: #00c000; /* Яркий зелёный */
}

.status-icon.not-read i {
    color: #808080; /* Тёмно-серый */
}

form {
    display: inline-block; /* Кнопка занимает только необходимую ширину */
}
form {
    display: inline-block!important;
    margin-left: auto; /* Отправляет форму с кнопкой вправо */
}
    /* КНОПКА УДАЛИТЬ */
    .btn-danger {
       
        padding: 5px 10px; /* Делаем кнопку компактной */
    width: 50px !important; /* Фиксированная ширина */
    height: 20px !important; /* Фиксированная высота */
    margin: 0; /* Убираем лишние отступы */
     margin-left: auto; 
    background-color: #dc3545 !important; /* Красный цвет */
    border: none !important;
    color: white !important;
    font-size: 10px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important; /* Гарантируем, что кнопка не растягивается */
    padding: 0 !important; /* Убираем отступы */
    text-align: center !important; /* Центр текста */
    vertical-align: middle; /* Для выравнивания с соседними элементами */
    
}


.btn-danger:hover {
    background-color: #a71d2a!important; /* Темный красный */
}

/* ЗВЕЗДА УВЕДОМЛЕНИЯ ДЛЯ СООБЩЕНИЙ */

/* Стили для звезды с неоновым сиянием */
/* CSS стили для звезды */
.unread-star {
  
    
    display: inline-flex!important; /* Звезда располагается в строку */
    gap: 5px; /* Расстояние между звездочкой и счетчиком *
    margin-left: 30px; /* Отодвигает звезду в правую сторону */
    position: relative;
   
    align-items: center;
    margin-right: 60px!important; /* Отступ между каждым элементом */
    width: 4p!important;
    height: 4px!important;
    background-color: transparent; /* Прозрачный фон */
    
    border-radius: 50%; /* Круглая рамка */
    box-shadow: 0 0 15px gold, 0 0 25px gold, 0 0 35px gold; /* Усиленное свечение при наведении */
    transform: scale(1.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.unread-star:hover {
    box-shadow: 0 0 15px gold, 0 0 25px gold, 0 0 35px gold; /* Усиленное свечение при наведении */
    transform: scale(1.1);
}

.unread-count {
    display: inline-block; /* Кнопка занимает только необходимую ширину */
    gap: 5px; /* Расстояние между звездочкой и счетчиком *
    position: absolute;
    color:rgb(6, 7, 79); /* Неоново-синий цвет текста */
     font-weight: bold;
    font-size: 1,2em;
}

.unread-star i {
    display: inline-block; /* Кнопка занимает только необходимую ширину */
    gap: 5px; /* Расстояние между звездочкой и счетчиком */
    color: gold; /* Светло-серый цвет звезды */
    font-size: 1.2em; /* Размер звезды */
    z-index: -2; /* Звезда за текстом, если текст сверху */
  
}


}




                  /* FOOTER */

/* МИДИА ДЕЛАЕТ УВЕДОМЛЕНИЕ ВЫХОДИТ СВЕРХУ */
@media (max-width: 576px) {
    footer .nav-item.dropdown.dropup .dropdown-menu {
        bottom: 100% !important; /* Расположить над кнопкой */
        top: auto !important; /* Убрать top */
       
        position: absolute !important; /* Абсолютное позиционирование */
    }
}
@media (max-width: 576px) {
    /* Выпадающее окно для мобильных устройств */
    .dropdown-menu {
        width: 100% !important; /* Установить ширину 90% от экрана */
        height: auto !important; /* Автоматическая высота в зависимости от содержимого */
        max-height: 50vh !important; /* Максимальная высота 50% от высоты экрана */
        font-size: 10px !important; /* Уменьшить размер шрифта */
        overflow-y: auto !important; /* Прокрутка, если содержимое превышает высоту */
        padding: 2px !important; /* Внутренние отступы */
        border-radius: 10px !important; /* Закругление углов */
        background-color: rgba(0, 0, 0, 0.9) !important; /* Полупрозрачный фон */
    }

    /* Элементы внутри выпадающего списка */
    .dropdown-menu .dropdown-item {
        font-size: 8px !important; /* Размер текста элементов */
        padding: 4px 6px !important; /* Уменьшенные отступы */
    }
}

@media (max-width: 576px) {

  /* Золотой колокольчик ДЛЯ FOOTER МОБИЛЬНАЯ */

  /* Стили для золотого колокольчика */
.nav-item.dropdown .nav-link #footergoldenBell {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
    text-shadow: 0 0 5px gold, 0 0 10px gold; /* Эффект свечения */
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
   
}

/* Стили для счетчика уведомлений */
.nav-item.dropdown .nav-link #footernotificationCount {
    background-color: gold!important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 8px;
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-block; /* Показываем счетчик */
    box-shadow: 0 0 5px gold, 0 0 10px gold; /* Эффект свечения */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Эффект при изменении */
    
}

.nav-item.dropdown .nav-link #footernotificationCount:hover{
    background-color: gold; /* Более яркий цвет при наведении */
    transform: scale(1.6); /* Увеличение при наведении */
}

/* Удаляем возможные эффекты из Bootstrap */
.nav-link .bi-bell {
    text-shadow: none !important; /* Убираем тени от Bootstrap */
    background: none !important; /* Убираем возможный фон */
    color: gold !important; /* Принудительно задаем цвет */
}
/* Общий стиль для выпадающего списка уведомлений */
#footernotificationList {
    max-height: 400px!important; /* Увеличиваем высоту */
    max-width: 200px!important; /* Ширина списка */
    min-width: 200px!important; /* Ширина списка */
    transform: translate(-50%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
    right: 4px!important; /* Отступ от правого края */
    z-index: 9999!important; /* Высокий уровень слоя */
    border-radius: 8%; /* Закругленные границы */
    overflow-y: auto; /* Добавляем прокрутку, если содержимое превышает высоту */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Добавляем тень */
    background-color: black;
    padding: 10px; /* Внутренний отступ */
    border: 1px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold; /* свечение */
}
/* Элементы списка уведомлений */
#footernotificationList .dropdown-item {
    padding: 10px; /* Увеличиваем отступы */
    font-size: 16px; /* Размер текста */
    color: gold; /* Золотой цвет текста */
   
    border-bottom: 1px solid gold; /* Разделение элементов */
    border-radius: 8px; /* Закругленные элементы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Эффект при наведении *
    font-weight: bold; /* Убираем это */
}


/* Для последнего элемента убираем нижнюю границу */
#footernotificationList .dropdown-item:last-child {
    border-bottom: none;
}


/* Текст уведомления */
#footernotificationList .dropdown-item .notification-text {
    flex-grow: 1; /* Текст занимает оставшееся пространство */
    font-size: 15px!important; /* Уменьшаем размер текста */
    color: gold!important;
    overflow: hidden; /* Скрываем текст, если он слишком длинный */
    text-overflow: ellipsis; /* Добавляем многоточие для длинного текста */
    white-space: nowrap; /* Запрещаем перенос текста */
}

#footernotificationList .dropdown-item .notification-text :hover{
    color:gold!important;

}
/* Аватарка */
#footernotificationList .dropdown-item img {
    width: 36px!important; /* Уменьшаем ширину */
    height: 36px!important; /* Уменьшаем высоту */
    border-radius: 50%; /* Делаем аватарку круглой */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold!important; /* Золотая рамка для аватарки */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold; /* свечение */
}

/* Имя автора */
#footernotificationList .dropdown-item .notification-text .actor-name {
    font-weight: bold; /* Выделяем жирным */
    color: gold; /* Темный цвет */
    font-size: 40px!important; /* Чуть больше для выделения */
}

/* Дата уведомления */
#footernotificationList .dropdown-item .notification-text .notification-date {
    font-size: 10px!important; /* Уменьшаем размер */
    color: gold; /* Светлый серый */
    margin-top: 3px; /* Отступ сверху */
}

/* Эффект при наведении на уведомление */
#footernotificationList .dropdown-item:hover {
    background-color: #333; /* Темный фон */
    color: gold!important; 
}



   /* ЗОЛОТОЙ ЧЕЛОВЕЧИК ДЛЯ FOOTER МОБИЛЬНАЯ  */

    #footerfriendRequestList.dropdown-menu {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
       
        overflow-y: auto !important;
        padding: 10px !important;
        border-radius: 10px !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
    }

    /* ЗОЛОТОЙ ЧЕЛОВЕЧИК УВЕДОМЛЕНИЯ НА FOOTER  */

footer .nav-item.dropdown.dropup  .nav-link #footergoldenPerson {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
    text-shadow: 0 0 5px gold, 0 0 10px gold; /* Эффект свечения */
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
    
}

footer .nav-item.dropdown.dropup .nav-link #footergoldenPerson:hover {
  color: gold !important; /* Цвет иконки */
    transform: scale(1.2); /* Увеличение при наведении */
}

/* Счетчик запросов в друзья */
footer .nav-item.dropdown.dropup .nav-link #footerfriendRequestCount {
    background-color: gold !important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold!important;
    border-radius: 50%!important;
    padding: 5px 8px!important;
    position: absolute!important;
    top: 1px!important;
    right: -1px!important;
    
    box-shadow: 0 0 5px gold, 0 0 10px gold!important; /* Эффект свечения */

}

footer .nav-item.dropdown.dropup .nav-link #footerfriendRequestCount:hover {
    background-color: gold!important; /* Более яркий цвет при наведении */
    transform: scale(1.2)!important; /* Увеличение при наведении */
}

/* Общий стиль для выпадающего списка */
#footerfriendRequestList {
    max-height: 300px!important; /* Ограничиваем высоту */
    min-width: 370px!important; /* Ширина списка */
    transform: translate(-45%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
    right: 2px; /* Отступ от правого края */
    z-index: 9999; /* Высокий уровень слоя */
    border-radius: 10px!important; /* Закругленные углы */
    overflow-y: auto!important; /* Прокрутка при переполнении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень списка */
    background-color: black; /* Фон списка */
    padding: 2px!important; /* Внутренние отступы */
    border: 1px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold!important; /* Эффект свечения */
}

/* Элементы выпадающего списка */
#footerfriendRequestList .dropdown-item {
    padding: 2px!important; /* Внутренние отступы */
   
    color: gold!important; /* Золотой текст */
    display: flex!important; /* Flex-контейнер для выравнивания */
    display: block!important; /* Убедитесь, что это блочный элемент */
    align-items: center; /* Центрирование по вертикали */
    text-align: center; /* Центр текста */
    width: 100%!important; /* Чтобы текст занимал всю ширину */
    border-radius: 8px; /* Закругленные углы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный эффект при наведении */

}

/* Эффект при наведении */
#footerfriendRequestList .dropdown-item:hover {
    background-color: gold; /* Темный фон */
    color: gold!important; 
}

/* Аватарка в уведомлении */
#footerfriendRequestList .dropdown-item img {
    width: 35px!important; /* Ширина аватарки */
    height: 35px!important; /* Высота аватарки */
    border-radius: 50%; /* Круглая форма */
    border: 2px solid gold!important; /* Золотая рамка для аватарки */
   
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold!important; /* Эффект свечения */
    margin-left: 2px!important;
    margin-right: 2px!important;
}

/* Имя в уведомлении */
#footerfriendRequestList .dropdown-item a span {
    font-weight: bold; /* Жирный шрифт */
    color: gold!important; 
    font-size: 14px!important; /* Размер шрифта */
    margin-left: 2px!important;
    margin-right: 2px!important;
    flex-grow: 1; /* Текст занимает оставшееся пространство */

}

/* ТЕКСТ ХОЧЕТ СТАТЬ ВАШИМ ДРУГОМ */
#footerfriendRequestList .dropdown-item span {
    font-weight: bold; /* Жирный шрифт */
    color: gold!important; 
    font-size: 8px!important; /* Размер шрифта */
    margin-left: 2px!important;
    margin-right: 2px!important;
    flex-grow: 1; /* Текст занимает оставшееся пространство */

}


/* Кнопки "Принять" и "Отклонить" */
.dropdown-item button.btn-accept {
  width:40px!important;
  height: 20px!important;
    font-size: 8px;
    padding: 0!important; /* Убираем внутренние отступы */
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #007bff!important; /* Синий фон */
    color: white; /* Белый текст */
}

.dropdown-item button.btn-accept:hover {
    background-color: #0056b3; /* Темный синий */
}

.dropdown-item button.btn-decline {
  width:40px!important;
  height: 20px!important;
    font-size: 8px;
    padding: 0!important; /* Убираем внутренние отступы */
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #dc3545!important; /* Красный фон */
    color: white; /* Белый текст */
}

.dropdown-item button.btn-decline:hover {
    background-color: #a71d2a; /* Темный красный */
}


    /* ЗОЛОТОЙ КНОВЕРТ ДЛЯ FOOTER МОБИЛЬНАЯ  */

    /* Общий контейнер сообщения */
#footermessageList {
    max-height: 300px; /* Ограничиваем высоту */
    width: 70px!important; /* Ширина списка */
    max-width: 350px!important; /* Максимальная ширина */
    border-radius: 10px!important; /* Закругленные углы */
    overflow-y: auto; /* Прокрутка при переполнении */
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень списка */
    background-color: black; /* Фон списка */
    padding: 10px; /* Внутренние отступы */
    border: 1px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold; /* Эффект свечения */
    transform: translate(-70%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
    right: 5px; /* Отступ от правого края */
    z-index: 9999; /* Высокий уровень слоя */
}

/* Элементы списка сообщений */
#footermessageList .message-item {
    padding: 3px!important; /* Внутренние отступы */
    font-size: 8px!important; /* Размер текста */
    color: gold!important; /* Золотой текст */
    display: flex; /* Flex-контейнер для выравнивания */
    align-items: center; /* Центрирование по вертикали */
    width: 100px!important; /* Ширина элемента */
    border-radius: 8px; /* Закругленные углы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный эффект при наведении */
    
}

/* Эффект при наведении */
#footermessageList .message-item:hover {
    background-color: gold; /* Темный фон */
    color: gold!important; 
}

/* Аватарка сообщения */
#footermessageList .message-avatar {
    width: 40px!important; /* Ширина аватарки */
    height: 40px!important; /* Высота аватарки */
    border-radius: 50%; /* Круглая форма */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold!important; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold; /* Эффект свечения */
}

/* Контент сообщения (имя и текст) */
#footermessageList .envelope-content {
  flex-grow: 1!important; /* Занимает оставшееся пространство */
    margin-right: 3px!important; /* Отступ справа от метаинформации */
    
}

/* Имя пользователя */
#footermessageList .envelope-user-name {
    font-size: 14px!important; /* Размер текста */
    color: gold!important; /* Золотой цвет текста */
    font-weight: bold; /* Жирный шрифт */
    margin-bottom: 5px; /* Отступ снизу */
    display: block; /* Блочная модель */
    width: 180px!important;
}

/* Текст последнего сообщения */
#footermessageList .footerenvelope-last-text {
    font-size: 10px; /* Размер текста */
    color: gold!important; /* Светло-серый цвет */
    display: inline-block!important; /* Убедитесь, что элемент ведёт себя как текст */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
    max-width: 200px !important; /* Ограничиваем ширину текста */
    width: 50%!important; /* Подстраиваем ширину под родительский элемент */
    font-style: normal!important;
    overflow-x: hidden!important; /* Убираем горизонтальный скролл */
}
/* ВРЕМЯ И ДАТА */
#footermessageList .dropdown-item.text-center {
    color: gold; /* Золотой цвет текста */
    font-size: 8px; /* Размер текста */
    font-weight: bold; /* Жирный текст */
    text-align: center; /* Центровка текста */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    border-radius: 8px; /* Закругленные углы */
    margin: 5px 0; /* Отступы сверху и снизу */
    margin-right:2px!important;
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавные эффекты при изменении */
}
/* СЧАТЧИК ГДЕ УВЕДОМЛЕНИЕ ВЫХОДИТ */
.envelope-count {
    display: inline-block; /* Убедитесь, что элемент ведёт себя как текст */
    font-size: 12px; /* Размер текста */
    font-weight: bold; /* Жирный шрифт для акцента */
    color: black; /* Цвет текста */
    background-color: gold!important; /* Синий фон */
    padding: 5px 10px; /* Внутренние отступы для округления */
    border-radius: 20px; /* Делает элемент полностью круглым */
    min-width: 25px; /* Минимальная ширина, чтобы форма оставалась круглой */
    text-align: center; /* Выравнивание текста по центру */
    line-height: 1.2; /* Регулировка высоты строки */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Лёгкая тень для объёма */
    margin-top: 5px; /* Отступ сверху */
    margin-left: 5px!important; /* Отступ слева */
    margin-right: 5px!important; /* Отступ слева */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Эффекты при наведении */
}
.navbar {
  margin-bottom: -20px !important;
  padding-bottom: 0 !important;
}
.navbar-collapse {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.navbar-nav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


}

/* ПАНЕЛЬ НИЖНАЯ ДЛЯ FOOTER */
/* БАЗА */
footer .navbar {
  background-color: rgba(0, 0, 0, 0.7)!important;
  position: fixed!important;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  color: white;
  z-index: 999999!important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
   height: 30px !important;   /* фиксируем */
}

/* ANDROID */
body.android-webview footer .navbar {
 
  bottom: 0 !important;   /* подняли */
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer .navbar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0 ;
    height: calc(40px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    margin-bottom: 0 !important;
  }
}


footer .navbar-nav {
  display: flex; /* Flexbox для выравнивания */
  flex-direction: row; /* Элементы в строку */
  align-items: center!important; /* Выравнивание элементов по центру вертикали */
 gap:5px!important;
  width: 100%; /* Растянуть на всю ширину */
  margin-left:15px;
  margin-right: 5px;
 

}

footer .nav-item {
 
  text-align: center; /* Центровка текста */
  align-items: center!important; /* Выравнивание элементов по центру вертикали */
}

footer .nav-link {
  display: flex; /* Flexbox для иконок и текста */
  align-items: center!important;
  justify-content: center;
  gap: 0!important; /* Расстояние между иконкой и текстом */
  color: gold; /* Цвет текста */
  text-decoration: none; /* Убираем подчеркивание */
  margin-left:5px;
  margin-right: 5px;
}

footer .nav-link i {
  font-size: 1.5rem; /* Размер иконок */
}

.golden-house {
  color:  gold; /* СИНИЙ цвет */
  font-size: 1.6rem!important; /* Увеличенный размер */
  
    background-color:none; /* Более насыщенный фон */
    text-shadow: 0 0 20px gold, 0 0 40px gold, 0 0 60px gold; /* Усиленное свечение при нажатии */
 
}

.golden-house:hover {
  color:  gold; /* СИНИЙ цвет при наведении */
  text-shadow: 0 0 60px gold, 0 0 80px gold, 0 0 100px gold  ; /* Усиленное свечение */
  transform: scale(1.6); /* Увеличение при наведении */
  
}


/* ЗОЛОТОЙ ЧЕЛОВЕЧИК НА FOOTER */

/* Стили для золотого колокольчика */
.nav-item.dropdown .nav-link #footergoldenBell {
  
    font-size: 24px !important; /* Размер иконки */
   
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
    color:  gold!important; /* СИНИЙ цвет */
    background-color:none!important; /* Более насыщенный фон */
    text-shadow: 0 0 20px gold, 0 0 40px gold, 0 0 60px gold!important; /* Усиленное свечение при нажатии */
 
}
.nav-item.dropdown .nav-link #footergoldenBell:hover{
    transform: scale(1.6); /* Увеличение при наведении */
}

/* Стили для счетчика уведомлений */
.nav-item.dropdown .nav-link #footernotificationCount {
    background-color:  gold !important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 14px !important;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 8px;
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-block; /* Показываем счетчик */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Эффект при изменении */
    box-shadow: 0 0 20px gold, 0 0 40px gold, 0 0 60px gold!important; /* Усиленное свечение при нажатии */
}

.nav-item.dropdown .nav-link #footernotificationCount:hover{
    background-color:gold; /* Более яркий цвет при наведении */
    transform: scale(1.2); /* Увеличение при наведении */
}

/* СТРЕЛКА ПОД СЧЕТЧИК */

.dropup .dropdown-toggle{
  color:gold !important
}

/* Удаляем возможные эффекты из Bootstrap */
.nav-link .bi-bell {
    text-shadow: none !important; /* Убираем тени от Bootstrap */
    background: none !important; /* Убираем возможный фон */
    color: gold !important; /* Принудительно задаем цвет */
}
/* Общий стиль для выпадающего списка уведомлений */
#footernotificationList {
    max-height: 400px!important; /* Увеличиваем высоту */
    min-width: 350px!important; /* Ширина списка */
    right: 2px; /* Отступ от правого края */
    border-radius: 8%; /* Закругленные границы */
    overflow-y: auto; /* Добавляем прокрутку, если содержимое превышает высоту */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Добавляем тень */
    background-color: rgb(30, 32, 32)!important;
    padding: 10px; /* Внутренний отступ */
    border: 1px solid gold ; /* синяя рамка */
    box-shadow: 0 0 5px gold , 0 0 10px gold , 0 0 20px gold ; /* свечение */
    transform: translate(-15%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
    z-index: 9999!important; /* Высокий уровень слоя */
}
/* Элементы списка уведомлений */
#footernotificationList .dropdown-item {
    padding: 10px; /* Увеличиваем отступы */
    font-size: 12px!important; /* Размер текста */
    color:gold!important; /*синий цвет текста */
    font-weight: bold!important; /* Выделяем жирным */
    border-bottom: 1px solid gold!important; /* Разделение элементов */
    border-radius: 8px; /* Закругленные элементы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Эффект при наведении*/
    
}

/* Для последнего элемента убираем нижнюю границу */
#footernotificationList .dropdown-item:last-child {
    border-bottom: none;
}


/* Текст уведомления */
#footernotificationList .dropdown-item .notification-text {
    flex-grow: 1; /* Текст занимает оставшееся пространство */
    font-size: 15px!important; /* Уменьшаем размер текста */
    color:gold!important;
    overflow: hidden; /* Скрываем текст, если он слишком длинный */
    text-overflow: ellipsis; /* Добавляем многоточие для длинного текста */
    white-space: nowrap; /* Запрещаем перенос текста */
}

#footernotificationList .dropdown-item .notification-text :hover{
    color:gold!important;

}
/* Аватарка */
#footernotificationList .dropdown-item img {
    width: 36px!important; /* Уменьшаем ширину */
    height: 36px!important; /* Уменьшаем высоту */
    border-radius: 50%; /* Делаем аватарку круглой */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold!important; /* Золотая рамка для аватарки */
    color:gold;
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px !important; /* свечение */
}

/* Имя автора */
#footernotificationList .dropdown-item .notification-text .actor-name {
    font-weight: bold; /* Выделяем жирным */
    color: #333; /* Темный цвет */
    font-size: 40px!important; /* Чуть больше для выделения */
}

/* Дата уведомления */
#footernotificationList .dropdown-item .notification-text .notification-date {
    font-size: 10px!important; /* Уменьшаем размер */
    color: #888; /* Светлый серый */
    margin-top: 3px; /* Отступ сверху */
}

/* Эффект при наведении на уведомление */
#footernotificationList .dropdown-item:hover {
    background-color: #333; /* Темный фон */
    color: gold!important; 
}


/* ЗОЛОТОЙ ЧЕЛОВЕЧИК УВЕДОМЛЕНИЯ НА FOOTER  */

footer .nav-item.dropdown.dropup  .nav-link #footergoldenPerson {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
    text-shadow: 0 0 5px gold, 0 0 10px gold; /* Эффект свечения */
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
    
}

footer .nav-item.dropdown.dropup .nav-link #footergoldenPerson:hover {
  color: gold !important; /* Цвет иконки */
    transform: scale(1.6); /* Увеличение при наведении */
}

/* Счетчик запросов в друзья */
footer .nav-item.dropdown.dropup .nav-link #footerfriendRequestCount {
    background-color: gold  !important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold!important;
    border-radius: 50%!important;
    padding: 5px 8px!important;
    position: absolute!important;
    top: 1px!important;
    right: -1px!important;
    
    box-shadow: 0 0 5px gold , 0 0 10px gold !important; /* Эффект свечения */

}

footer .nav-item.dropdown.dropup .nav-link #footerfriendRequestCount:hover {
    background-color: gold !important; /* Более яркий цвет при наведении */
    transform: scale(1.2)!important; /* Увеличение при наведении */
}

/* Общий стиль для выпадающего списка */
#footerfriendRequestList {
    max-height: 300px!important; /* Ограничиваем высоту */
    width: 500px!important; /* Ширина списка */
    border-radius: 10px!important; /* Закругленные углы */
    overflow-y: auto!important; /* Прокрутка при переполнении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень списка */
    background-color: black; /* Фон списка */
    padding: 10px; /* Внутренние отступы */
    border: 1px solid gold ; /* Золотая рамка */
    box-shadow: 0 0 5px gold , 0 0 10px gold , 0 0 20px gold !important; /* Эффект свечения */
    transform: translate(-35%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
}

/* Элементы выпадающего списка */
#footerfriendRequestList .dropdown-item {
    padding: 10px; /* Внутренние отступы */
    font-size: 12px!important; /* Размер текста */
    color:gold!important; /*синий цвет текста */
    display: flex!important; /* Flex-контейнер для выравнивания */
    display: block!important; /* Убедитесь, что это блочный элемент */
    align-items: center; /* Центрирование по вертикали */
    text-align: center; /* Центр текста */
    width: 100%!important; /* Чтобы текст занимал всю ширину */
    border-radius: 8px; /* Закругленные углы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный эффект при наведении */

}

/* Эффект при наведении */
#footerfriendRequestList .dropdown-item:hover {
    background-color: #333; /* Темный фон */
    color: gold!important; 
}

/* Аватарка в уведомлении */
#footerfriendRequestList .dropdown-item img {
    width: 35px!important; /* Ширина аватарки */
    height: 35px!important; /* Высота аватарки */
    border-radius: 50%; /* Круглая форма */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold!important; /* Эффект свечения */
}

/* Имя в уведомлении */
#footerfriendRequestList .dropdown-item span {
    font-weight: bold; /* Жирный шрифт */
    color: gold!important; 
    font-size: 14px; /* Размер шрифта */
    margin-right: 10px; /* Отступ справа */
    flex-grow: 1; /* Текст занимает оставшееся пространство */

}
#footerfriendRequestList .dropdown-item.text-center {
    color: gold; /* Золотой цвет текста */
    font-size: 12px; /* Размер текста */
    font-weight: bold; /* Жирный шрифт */
    text-align: center; /* Центрирование текста */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    border-radius: 8px; /* Закругленные углы */
    margin: 5px 0; /* Отступы сверху и снизу */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавные изменения */
}
footer .friend-request-text{
    font-size: 10px!important; /* Размер текста */
    font-weight: normal!important; /* Обычный вес текста */
}

/* Кнопки "Принять" и "Отклонить" */
.dropdown-item button.btn-accept {
    width:70px!important;
  height: 30px!important;
    font-size: 12px;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #007bff!important; /* Синий фон */
    color: white; /* Белый текст */
}

.dropdown-item button.btn-accept:hover {
    background-color: #0056b3; /* Темный синий */
}

.dropdown-item button.btn-decline {
    width:70px!important;
  height: 30px!important;
    font-size: 12px;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #dc3545!important; /* Красный фон */
    color: white; /* Белый текст */
}

.dropdown-item button.btn-decline:hover {
    background-color: #a71d2a; /* Темный красный */
}


/* ЗОЛОТОЙ КОНВЕРТ ДЛЯ FOOTER */

#footergoldenEnvelope {
    color: gold !important; /* Цвет иконки */
    font-size: 24px !important; /* Размер иконки */
   
    margin-right: 1px!important; /* Отступ справа */
    margin-left: 20px!important; /* Отступ слева */
    transition: transform 0.3s ease!important; /* Эффект при наведении */
    
}
#footergoldenEnvelope:hover{
    transform: scale(1.6)!important;
}

.footerdropdown-item.text-center {
    color: gold!important; /* Золотой цвет текста */
    font-weight: bold; /* Жирный текст */
    font-size: 12px!important; /* Размер шрифта */
    
    background-color: transparent !important; /* Прозрачный фон */
    border: none; /* Убираем границы */
    padding: 10px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    border-radius: 5px; /* Закругление углов */
    transition: background-color 0.3s ease, color 0.3s ease!important; /* Плавный эффект */
    transform: scale(1.05)!important;
}

.footerdropdown-item.text-center:hover {
    color: gold!important; /* Ярче при наведении */
    background-color: rgba(255, 215, 0, 0.1)!important; /* Полупрозрачный фон при наведении */
    transform: scale(1.05)!important;
}


.nav-item.dropdown .nav-link #footermessageCount {
    background-color: gold!important; /* Принудительно устанавливаем фон */
    color: black !important; /* Принудительно устанавливаем текст */
    font-size: 12px !important;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 8px;
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-block; /* Показываем счетчик */
    box-shadow: 0 0 5px gold, 0 0 10px gold!important; /* Эффект свечения */
    transition: transform 0.3s ease; /* Добавляем плавность */
}
.nav-item.dropdown .nav-link #footermessageCount:hover {
  transform: scale(1.2)!important; /* Увеличение при наведении */
}
/*контейнер сообщения */
#footermessageList {
    max-height: 300px; /* Ограничиваем высоту */
    width: 500px!important; /* Ширина списка */
    border-radius: 10px; /* Закругленные углы */
    overflow-y: auto; /* Прокрутка при переполнении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень списка */
    background-color: black; /* Фон списка */
    padding: 10px; /* Внутренние отступы */
    border: 1px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold; /* Эффект свечения */
    right: 100%!important; /* Расстояние от правого края */
    transform: translate(-55%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
   
}

/* Элементы списка сообщений */
#footermessageList .message-item {
    padding: 10px!important; /* Внутренние отступы */
    font-size: 8px!important; /* Размер текста */
    color: gold!important; /* Золотой текст */
    display: flex; /* Flex-контейнер для выравнивания */
    align-items: center; /* Центрирование по вертикали */
    width: 100%; /* Ширина элемента */
    border-radius: 8px; /* Закругленные углы */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный эффект при наведении */
}

/* Эффект при наведении */
#footermessageList .message-item:hover {
    background-color: #333; /* Темный фон */
    color: gold!important; 
}

/* Аватарка сообщения */
#footermessageList .message-avatar {
    width: 40px!important; /* Ширина аватарки */
    height: 40px!important; /* Высота аватарки */
    border-radius: 50%; /* Круглая форма */
    margin-right: 10px; /* Отступ справа */
    border: 2px solid gold; /* Золотая рамка */
    box-shadow: 0 0 5px gold, 0 0 10px gold, 0 0 20px gold; /* Эффект свечения */
}

/* Контент сообщения (имя и текст) */
#footermessageList .envelope-content {
    flex-grow: 1; /* Занимает оставшееся пространство */
    margin-right: 15px; /* Отступ справа от метаинформации */
    
}

/* Имя пользователя */
#footermessageList .envelope-user-name {
    font-size: 18px; /* Размер текста */
    color: gold!important; /* Золотой цвет текста */
    font-weight: bold; /* Жирный шрифт */
    margin-bottom: 5px; /* Отступ снизу */
    display: block; /* Блочная модель */
    max-width: 300px!important;
}

/* Текст последнего сообщения */
#footermessageList .envelope-last-text {
    font-size: 14px; /* Размер текста */
    color: gold; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px!important; /* Ширина для обрезки длинных сообщений */
    font-style: normal!important;
   
}

#footermessageList .dropdown-item.text-center {
    color: gold; /* Золотой цвет текста */
    font-size: 12px; /* Размер текста */
    font-weight: gold; /* Жирный текст */
    text-align: center; /* Центровка текста */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    border-radius: 8px; /* Закругленные углы */
    margin: 5px 0; /* Отступы сверху и снизу */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавные эффекты при изменении */
}

/* СЧАТЧИК ГДЕ УВЕДОМЛЕНИЕ ВЫХОДИТ */
.envelope-count {
    display: inline-block; /* Убедитесь, что элемент ведёт себя как текст */
    font-size: 12px; /* Размер текста */
    font-weight: bold; /* Жирный шрифт для акцента */
    color: black; /* Цвет текста */
    background-color:gold!important; /* Синий фон */
    padding: 5px 10px; /* Внутренние отступы для округления */
    border-radius: 20px; /* Делает элемент полностью круглым */
    min-width: 25px; /* Минимальная ширина, чтобы форма оставалась круглой */
    text-align: center; /* Выравнивание текста по центру */
    line-height: 1.2; /* Регулировка высоты строки */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Лёгкая тень для объёма */
    margin-top: 5px; /* Отступ сверху */
    margin-left: 10px; /* Отступ слева */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Эффекты при наведении */
}

/* ЗОЛОТАЯ ТЕЛЕФОНАЯ ТРУБКА */

/* Стили для иконки телефонной трубки */
#footergoldenPhone {
  font-size: 24px; /* Размер иконки */
  color: gold; /* Цвет иконки */
  margin-right:5px!important;
  margin-left:15px!important;
}

/* Стили для счётчика */
#footerCallNotificationCount {
  position: absolute;
  top: -5px; /* Смещение по вертикали */
  right: -5px; /* Смещение по горизонтали */
  background-color: gold; /* Цвет фона */
  color: black; /* Цвет текста */
  border-radius: 50%; /* Круглая форма */
  padding: 2px 5px; /* Внутренние отступы */
  font-size: 12px; /* Размер текста */
  font-weight: bold; /* Жирный текст */
  display: none; /* Скрыт по умолчанию, если нет уведомлений */
 
}

/* Стили для выпадающего меню */
#footerCallNotificationList {
  min-width: 300px; /* Минимальная ширина списка */
  background-color: black; /* Цвет фона */
  color: gold; /* Цвет текста */
  border: 1px solid gold; /* Обводка */
  border-radius: 5px; /* Скругленные углы */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень */
  padding: 10px 0; /* Внутренние отступы */
  transform: translate(-70%)!important; /* Сдвигаем на половину ширины и высоты для центрирования */
    z-index: 9999!important; /* Высокий уровень слоя */
}

/* Стили для элемента списка внутри выпадающего меню */
#footerCallNotificationList .dropdown-item {
  padding: 10px 15px; /* Отступы */
  color: gold; /* Цвет текста */
  text-align: center; /* Центровка текста */
  font-size: 14px; /* Размер текста */
  transition: background-color 0.3s ease; /* Плавный переход */
}

#footerCallNotificationList .dropdown-item:hover {
  background-color: gold; /* Фон при наведении */
  color: gold; /* Цвет текста при наведении */
}

/* Стили для текста "Нет новых звонков" */
#footerCallNotificationList .text-center {
  font-style: italic; /* Курсив */
  color: gold; /* Цвет текста */
}