.smiles-wrapper {
  width: 280px;
/*  height: 473px;*/
    display: flex;
    flex-direction: column;
    gap: 8px;
} 
/* Стилизация полосы прокрутки */
.smiles-display {
    padding: 8px;
    height: 260px;
    overflow-y: auto; /* auto вместо scroll, чтобы полоса появлялась только при необходимости */
    
    /* Убедимся, что контент не выходит за границы */
    box-sizing: border-box;
    
    /* Для Firefox */
    scrollbar-width: thin;
    scrollbar-color: #3f6fff rgba(27, 27, 29, 0.5);
}

/* Для WebKit (Chrome, Safari, новые версии Edge) */
.smiles-display::-webkit-scrollbar, .smiles-categories::-webkit-scrollbar {
    width: 4px; /* Уменьшенная ширина для компактности */
    height: 4px; /* На случай горизонтальной прокрутки */
}

.smiles-display::-webkit-scrollbar-track, .smiles-categories::-webkit-scrollbar-track {
    background: rgba(27, 27, 29, 0.5);
    border-radius: 2px;
    margin: 2px 0; /* Отступ сверху и снизу, чтобы полоса не касалась края */
}

.smiles-display::-webkit-scrollbar-thumb, .smiles-categories::-webkit-scrollbar-thumb {
    background: #3f6fff; /* Цвет активного таба */
    border-radius: 2px;
    border: none; /* Убираем возможную рамку */
}

.smiles-display::-webkit-scrollbar-thumb:hover, .smiles-categories::-webkit-scrollbar-thumb:hover {
    background: #5680ff; /* Немного светлее при наведении */
}

/* Убедимся, что полоса прокрутки не выходит за границы */
.smiles-display::-webkit-scrollbar-corner, .smiles-categories::-webkit-scrollbar-corner {
    background: transparent;
}

/* Скрываем ненужные элементы полосы прокрутки */
.smiles-display::-webkit-scrollbar-button, .smiles-categories::-webkit-scrollbar-button {
    display: none;
}

/* Добавим дополнительные стили для родительского контейнера */
.smiles-wrapper {
    overflow: hidden; /* Чтобы ничего не выходило за пределы */
    border-radius: 8px; /* Если нужны скругленные углы */
}
.smiles-categories {
    padding: 8px;
    display: flex;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth; /* Добавляем плавную прокрутку */
}

@media(max-width: 599px) {
    .smiles-categories {
       overflow-x: scroll;     
    }
}


.buy-smiles-block {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#chat .popover {
    background: #2a2931;
    border-color: #2a2931;
    border-radius: 8px;
    border: 1px solid #ffffff2e;
}
.smiles-buy-heading {
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    /* font-family: "Exo 2", sans-serif; */
    background: #1b1b1d;
    border-radius: 4px;
    padding: 4px;
}
.lock-image {
    background: #1b1b1d;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    margin: 10px auto;
}
.smiles-buy-desc {
    margin-top: 8px;
}
.buy-smile-access {
    margin-top: auto;
    color: #fff;
    border-radius: 4px;
    box-shadow: none;
/*    width: 100%;*/
    height: 32px;
    border: none;
    font-weight: 500;
    background: linear-gradient(23deg, #2b56da 0%, #3f6fff 55%) !important;
    cursor: pointer;
    margin: auto 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buy-smile-access:hover {
    color: #fff;
}
.popover {
    border: none !important;
} 
.popover-body {
    padding: 0px;
}
.smiles_list {
    margin: 0px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    row-gap: 8px;
}

.smiles-list-item {
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: 0.2s all;
    border-radius: 8px;
}

.smiles-list-item:hover {
    scale: 110%;
}
.smile-category img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
}
.smile-display-item {
    display: none; /* Скрываем все табы по умолчанию */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    row-gap: 10px;
}
.smile-display-item.active {
    display: grid; /* Показываем только активный таб */
}
.smile-display-item.type-smiles {
    grid-template-columns: repeat(5, 1fr);
}
.smile-display-item img {
    width: 64px;
    height: 64px;
    cursor: pointer;
    transition: 0.3s all;
}
.smile-display-item.type-smiles img {
    width: 32px;
    height: 32px;
}
.smile-display-item img:hover {
    scale: 110%;
}
.smiles-list-item-wr {
    margin-bottom: 18px;
}

/* Стили для активной категории */
.smile-category {
    transition: all 0.2s ease;
    position: relative;
}
.smile-category.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background-color: #3f6fff;
    border-radius: 2px;
}
.smile-category:hover {
    transform: translateY(-2px);
}



/* Стили для некупленных стикерпаков */
.smile-category.not-purchased {
    position: relative;
    opacity: 0.7;
    cursor: pointer;
}

.smile-category.not-purchased img {
    filter: brightness(0.7);
}

.smile-category .lock-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

/* Сообщение для некупленных стикерпаков */
.sticker-lock-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.lock-icon-large {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.sticker-lock-message p {
    color: #ffffff;
    margin: 10px 0;
    font-size: 14px;
}

.buy-sticker-pack {
    margin-top: 10px;
    background: linear-gradient(23deg, #2b56da 0%, #3f6fff 55%);
    color: #fff;
    padding: 6px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.buy-sticker-pack:hover {
    background: linear-gradient(23deg, #3468ff 0%, #5383ff 55%);
    transform: translateY(-2px);
    color: #fff;
}