/* Список чатов */
.ball-container {
transition: 2.0s ease;
position: relative;
overflow-x: hidden;
overflow-y: auto;
background-size: cover;
background-position: center center;
background-repeat: repeat;
box-sizing: border-box;
display: flex;
border-radius: 10px;
flex-wrap: wrap;
align-content: flex-start;
gap: 10px;
justify-content: center;
margin: 20px auto 0 0;
padding: 10px;
scrollbar-color: #00000026 #00000000;
scrollbar-width: thin;
}

/* Анимация для покачивания шариков */
@keyframes wobble {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(1px, 1px); }
50% { transform: translate(-1px, -1px); }
75% { transform: translate(1px, -1px); }
}

.ball {
position: absolute;
border-radius: 20%;
cursor: pointer;
background: #ffffff1c;
box-sizing: border-box;
animation: wobble var(--wobble-duration) ease-in-out infinite alternate var(--wobble-delay);
transition: all 0.5s ease;
box-shadow: inset #00000020 0px 40px 15px 0px, #ffffff33 0px 0px 0px 1px inset, #00000020 0px 30px 10px 0px;
}
.ball-content-wrapper {
/* display: flex; */
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s ease-out;
height: inherit;
justify-content: flex-start;
}

.ball-last-message {
display: none;
}
.ball:hover .ball-content-wrapper {
transform: scale(1.0);
}
.ball.ball-flash-orange-border {
border-color: #ffaa00; /* Orange border */
}
.ball-image {
width: 100% !important;
height: 76% !important;
aspect-ratio: 1 / 1 !important;
border-radius: 20% 20% 0% 0%;
object-fit: cover;
pointer-events: none;
position: relative;
}
.ball-name {
font-weight: 600;
color: #333;
font-size: 0.9rem;
line-height: 1.2;
word-break: break-word;
pointer-events: none;
display: none;
}
.ball-likes, .ball-views, .ball-messages {
pointer-events: none;
color: white;
display: flex;
align-items: center;
gap: 3px;
}
.ball-likes .emoji, .ball-views .emoji, .ball-messages .emoji {
position: relative;
}
.emoji p{
min-width: 4ch;
}
.ball-likes .emoji img, .ball-views .emoji img, .ball-messages .emoji img {
width: 13px;
margin: 0px 6px 0px 0px;
}
.ball-likes .emoji img, .modal-likes .emoji img {
pointer-events: none;
max-width: 11px;
max-height: 35px;
margin: 0 0 0 10px;
}
.ball-online-participants {
background: #FF5722;
padding: 0px 6px;
border-radius: 999px;
color: #ffffff;
}
.ball-initial-letter {
display: flex;
justify-content: center;
align-items: center;
width: 68%;
height: 68%;
border-radius: 50%;
font-size: 3rem;
font-weight: 100;
color: #fff;
pointer-events: none;
}
/* Подсказка для шаров чата при наведении */
.ball:hover .custom-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(-50px) scale(1);
}

































.ball-container {
padding: 0;
gap: 4px;
max-height: 441px;
height: auto !important;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

.ball {
cursor: pointer;
background: #4c4e5d;
padding: 0px;
border-radius: 12px;
animation: none;
box-shadow: 0px 1px 0px #00000010;
border: 0;
position: relative;
top: 0 !important;
left: 0 !important;
width: -webkit-fill-available !important;
height: auto !important;
overflow: hidden;
}

.ball-content-wrapper {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.ball-last-avatar {
display: flex;
}
.ball-last-avatar img{
display: flex;
width: 20px;
height: 20px;
object-fit: cover;
border-radius: 999px;
border: 0px solid #fff;
}
.ball-last-message {
display: flex;
gap: 0px;
margin: 0 5px 5px 5px;
line-height: 1;
align-items: center;
background: #f3f8ff;
color: #000000;
padding: 1px;
position: relative;
border-radius: 10px;
width: fit-content;
}

.ball-last-text {
text-align: left;
padding: 3px 5px 4px 6px;
border-radius: 0px 6px 6px 6px;
line-height: 1;
font-size: 13px;
max-height: 23px;
overflow: hidden;
}

.ball-image {
width: 70px !important;
height: 70px !important;
object-fit: cover;
pointer-events: none;
border-radius: 0px;
}

.ball-initial-letter {
width: 70px;
min-width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background: #00000017;
border-radius: 0px;
box-shadow: 0px 0px 1px 0px #ffffff4d;
}

.ball-likes, .ball-views, .ball-messages {
position: absolute;
top: 0px;
right: 0px;
pointer-events: none;
padding: 6px 11px;
border-radius: 0px 0px 0px 5px;
font-size: 12px !important;
height: 18px;
}

.ball-online-participants {
position: absolute;
top: 0px;
right: 0px;
pointer-events: none;
display: flex;
gap: 1px;
color: white;
margin: 0;
background: #FF5722;
padding: 2px 7px;
min-width: 7px;
border-radius: 0px 0px 0px 4px;
font-size: 12px !important;
}

.custom-tooltip {
opacity: 1;
position: absolute;
background: #00000000;
color: #ffffff;
padding: 5px 10px 5px 8px;
font-size: 15px;
FONT-WEIGHT: 600;
top: 0px !important;
left: 70px !important;
transition: none !important;
transform: translate(0%, 0%) !important;
display: flex;
align-items: flex-start;
width: 144px;
max-height: 11px;
overflow: hidden;
line-height: 1;
text-align: left;
border-radius: 0px 0px 10px 0px;
}


.animated-number, .animated-text {
text-align: left;
text-align: left;
display: inline-block;
position: relative;
min-width: 4ch;
height: 19px;    
}