/* public/chats/chats.css */

.page-public-chats .wrap {
margin: 0 auto;
}

.page-public-chats .page-public-chats-menu {
position: relative;
z-index: 40;
}

.page-public-chats .page-public-chats-menu #menu-placeholder {
min-height: 64px;
}

.page-public-chats .chats-page-shell {
}

.page-public-chats .chats-page-top {
margin: auto;
text-align: center;
}

.page-public-chats .chats-page-top h1 {
margin: 20px auto 60px auto;
font-weight: 300;
color: #fff;
line-height: 1.1;
max-width: 480px;
padding: 0 10px;
}

.page-public-chats .home-chats-wrapper {
display: block;
padding: 0;
}

.page-public-chats .chats-block {
width: 100%;
max-width: none;
margin: 0;
}

.page-public-chats .ball-container {
position: relative;
width: 100%;
min-height: 520px;
}

.page-public-chats .chats-ssr-fallback {
margin-top: 32px;
}

.page-public-chats .chat-card {
padding: 16px;
border-radius: 16px;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.04);
}

.page-public-chats .chat-link {
font-weight: 600;
}

.page-public-chats .pager {
margin: 20px 0 0 0;
}

.page-public-chats .chats-seo-content {
margin: 28px 0 8px 0;
}

.page-public-chats .chats-seo-content__inner {
max-width: 980px;
margin: 0 auto;
padding: 30px;
}

.page-public-chats .chats-seo-content__inner--paged {
background: #ffffff09;
}

.page-public-chats .chats-seo-content h2 {
margin: 30px 0 14px 0;
font-size: 28px;
line-height: 1.2;
font-weight: 400;
color: #ffffff;
}

.page-public-chats .chats-seo-content p {
margin: 0 0 18px 0;
color: rgba(255, 255, 255, 0.88);
font-size: 19px;
line-height: 1.5;
font-weight: 300;
}

.page-public-chats .chats-seo-content p:last-child {
margin-bottom: 0;
}

.page-public-chats .chats-layout-actions {
display: flex;
gap: 10px;
align-items: stretch;
}

.page-public-chats .chat-display-mode-button {
border: 0;
cursor: pointer;
transition: 0.15s ease;
padding: 12px 21px;
background: #41434e;
width: min-content;
background: #1088a4;
border-radius: 999px;
color: #ffffffcc;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
width: min-content;
}

.page-public-chats .chat-display-mode-button:hover {
filter: brightness(1.2);
transform: translateY(-5px);
}

.page-public-chats[data-chat-view="orbits"] .chat-display-mode-button, .page-public-chats[data-chat-view="list"] .chat-display-mode-button {
color: #ffffff;
}

.page-public-chats #modalOverlay, .page-public-chats #profileModalOverlay {
display: none !important;
}

.chats-page-message-box {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(12px);
min-width: 240px;
max-width: calc(100vw - 32px);
padding: 12px 16px;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 3000;
text-align: center;
}

.chats-page-message-box.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

.chats-page-message-box--info {
background: #1f2937;
color: #ffffff;
}

.chats-page-message-box--error {
background: #7f1d1d;
color: #ffffff;
}

.chats-page-message-box--success {
background: #14532d;
color: #ffffff;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.page-public-chats .ball {
color: #ffffff;
user-select: none;
}

.page-public-chats .ball .emoji {
display: inline-flex;
justify-content: center;
align-items: center;
}

.page-public-chats .ball .emoji img {
max-width: 12px;
max-height: 14px;
margin: 0 7px 0 0px;
}

.page-public-chats .ball-satellites {
position: absolute;
left: 50%;
top: 50%;
pointer-events: none;
transform-origin: center center;
animation-name: orbit-user-points-spin;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: var(--satellite-spin-duration, 16000ms);
animation-direction: var(--satellite-spin-direction, normal);
}

.page-public-chats .ball-satellite-point {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.page-public-chats .custom-tooltip {
pointer-events: auto;
}

.page-public-chats .ball-content-wrapper {
position: relative;
z-index: 2;
}

.page-public-chats .ball-image {
display: block;
}

.page-public-chats .ball-initial-letter {
display: none;
align-items: center;
justify-content: center;
color: #ffffff;
}

.page-public-chats .ball-likes, .page-public-chats .ball-views, .page-public-chats .ball-messages, .page-public-chats .ball-online-participants {
/* display: none; */
align-items: center;
justify-content: center;
gap: 0px;
color: hsl(186 100% 50% / 1);
font-weight: 700;
position: absolute;
background: #20343d;
width: min-content;
padding: 2px 6px;
}

.page-public-chats .ball-last-message {
display: flex;
align-items: center;
}

.page-public-chats .ball-last-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
}

.page-public-chats .ball-last-avatar img {
width: 24px;
height: 23px;
border-radius: 999px;
object-fit: cover;
}

/* ===== MODE: ORBITS ===== */

.page-public-chats[data-chat-view="orbits"] .ball-container {
overflow-x: hidden;
overflow-y: visible;
min-height: 920px;
}

.page-public-chats[data-chat-view="orbits"] .ball-container--orbits {
display: block;
width: 100%;
min-height: 920px;
}

.page-public-chats[data-chat-view="orbits"] .orbit-scene-viewport {
position: relative;
width: 100%;
max-width: 100%;
min-height: 920px;
margin: 0 auto;
overflow: visible;
}

.page-public-chats[data-chat-view="orbits"] .orbit-scene {
position: absolute;
left: 50%;
padding: 0;
margin: 0;
contain: layout paint;
transform: translateX(-50%);
transform-origin: top center;
backface-visibility: hidden;
background: radial-gradient(
hsl(179deg 100% 50%) 9%, 
hsl(194deg 100% 50% / 37%) 10%, 
hsl(194deg 100% 50% / 17%) 11%, 
hsl(194deg 100% 50% / 5%) 20%, 
#242529 34%);
}

.page-public-chats[data-chat-view="orbits"] .orbit-ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
}

.page-public-chats[data-chat-view="orbits"] .orbit-track {
position: absolute;
border-radius: 50%;
transform-origin: center center;
animation-name: orbit-layer-spin;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: var(--orbit-duration, 180000ms);
animation-direction: var(--orbit-direction, normal);
will-change: transform;
backface-visibility: hidden;
pointer-events: none;
}

.page-public-chats[data-chat-view="orbits"] .orbit-slot {
position: absolute;
inset: 0;
transform: rotate(var(--slot-angle, 0deg));
transform-origin: center center;
pointer-events: none;
}

.page-public-chats[data-chat-view="orbits"] .orbit-slot-positioner {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
pointer-events: none;
transition: 4.01s;
}

.page-public-chats[data-chat-view="orbits"] .orbit-slot-positioner:hover {
scale: 1.2;
z-index: 9999999;
transition: 0.2s;
}

.page-public-chats[data-chat-view="orbits"] .orbit-slot-upright {
width: 100%;
height: 100%;
animation-name: orbit-ball-keep-upright;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: var(--orbit-duration, 180000ms);
will-change: transform;
backface-visibility: hidden;
pointer-events: none;
}

.page-public-chats[data-chat-view="orbits"] .orbit-slot-upright > .ball {
position: relative;
left: auto !important;
top: auto !important;
}

.page-public-chats[data-chat-view="orbits"] .ball {
position: absolute;
cursor: pointer;
pointer-events: auto;
z-index: 2;
box-sizing: border-box;
border-radius: 50%;
padding: 0px;
}

.page-public-chats[data-chat-view="orbits"] .ball-content-wrapper {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff1f, #ffffff05);
transition: 1.0s;
box-shadow: 0px 0px 0px 0px #4b93ff94;

}

.page-public-chats[data-chat-view="orbits"] .ball-content-wrapper:hover {
box-shadow: 0px 0px 0px 15px #4b93ff94;
transition: 0.2s;
}

.page-public-chats[data-chat-view="orbits"] .ball-image, .page-public-chats[data-chat-view="orbits"] .ball-initial-letter {
width: 100% !important;
height: 100% !important;
border-radius: 50%;
}

.page-public-chats[data-chat-view="orbits"] .ball-image {
object-fit: cover;
}

.page-public-chats[data-chat-view="orbits"] .ball-initial-letter {
font-size: clamp(24px, 2vw, 54px);
line-height: 1;
}

.page-public-chats[data-chat-view="orbits"] .custom-tooltip {
position: absolute;
z-index: 1;
left: 100%;
top: 10px;
transform: translate(0%, 0%);
width: max-content;
max-width: 100px;
max-height: 52px;
overflow: hidden;
text-align: left;
color: #67dcf4;
font-size: 16px;
font-weight: 400;
line-height: 1;
padding: 0px 0px 0px 8px;
}

.page-public-chats[data-chat-view="orbits"] .ball-likes, .page-public-chats[data-chat-view="orbits"] .ball-views, .page-public-chats[data-chat-view="orbits"] .ball-messages, .page-public-chats[data-chat-view="orbits"] .ball-online-participants {
padding: 0px 7px 1px 0px;
border-radius: 50px;
font-size: 14px;
text-align: left;
display: inline-block;
position: relative;
min-width: 4ch;
height: 19px;
position: absolute;
z-index: 1;
left: 83%;
top: -12px;
transform: translate(0%, 0%);
pointer-events: none;
}

.page-public-chats[data-chat-view="orbits"] .ball--center {
z-index: 5;
}

.page-public-chats[data-chat-view="orbits"] .ball-last-message {
display: none;
}

/* ===== MODE: LIST ===== */

.page-public-chats[data-chat-view="list"] .ball-container--list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
min-height: 0;
}

.page-public-chats[data-chat-view="list"] .ball {
position: relative;
background-color: rgb(145 149 183 / 33%) !important;
border-radius: 19px;
background: #363743;
overflow: hidden;
cursor: pointer;
box-shadow: none;
padding: 7px;
box-shadow: 0px 1px 1px 0px #50516b;
backdrop-filter: blur(5px);
transition: 1.0s;
}
.page-public-chats[data-chat-view="list"] .ball:hover {
scale: 1.4;
position: relative;
z-index: 999999999999999;
transition: 0.2s;
box-shadow: 0px 5px 30px 0px #09090d;
}

.page-public-chats[data-chat-view="list"] .ball-content-wrapper {
display: flex;
align-items: stretch;
}

.page-public-chats[data-chat-view="list"] .ball-image, .page-public-chats[data-chat-view="list"] .ball-initial-letter {
width: 70px;
height: 70px;
border-radius: 14px;
position: relative;
}

.page-public-chats[data-chat-view="list"] .ball-image {
object-fit: cover;
}

.page-public-chats[data-chat-view="list"] .ball-initial-letter {
font-size: 34px;
}

.page-public-chats[data-chat-view="list"] .custom-tooltip {
position: absolute;
color: #ffffff;
font-size: 18px;
FONT-WEIGHT: 400;
top: 4px;
left: 83px;
border-radius: 20px;
transition: none;
transform: translate(0%, 0%);
display: flex;
min-width: 156px;
height: 36px;
width: min-content;
overflow: hidden;
line-height: 1;
text-align: center;
justify-content: center;
align-items: flex-start;
}

.page-public-chats[data-chat-view="list"] .ball-likes, .page-public-chats[data-chat-view="list"] .ball-views, .page-public-chats[data-chat-view="list"] .ball-messages, .page-public-chats[data-chat-view="list"] .ball-online-participants {
top: 0px;
right: 0px;
min-width: 4ch;
border-radius: 30px;
font-size: 12px;
height: 16px;
}

.page-public-chats[data-chat-view="list"] .ball-last-message {
position: absolute;
right: 10px;
bottom: 3px;
gap: 6px;
color: #000000;
background: rgb(218 234 255 / 98%);
border-radius: 14px 14px 0px 14px;
padding: 2px 12px 2px 2px;
max-width: 63%;
box-shadow: 0px 4px 7px 0px #00000063;
/* background: rgb(218 255 238 / 98%); */
/* box-shadow: 0px 0px 17px 0px #3dffa44d; */
}

.page-public-chats[data-chat-view="list"] .ball-last-message::after {
content: '';
position: absolute;
width: 20px;
height: 14px;
background: #d7e6fb;
clip-path: path('M 0 0 L 0 -13 Q -1 10 12 12 L 0 10 Z');
bottom: -4px;
right: -19px;
}

.page-public-chats[data-chat-view="list"] .ball-last-text {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.0;
font-size: 14px;
font-weight: 600;
overflow: hidden;
}

.page-public-chats[data-chat-view="list"] .ball-satellites {
display: none;
}

@keyframes orbit-layer-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes orbit-ball-keep-upright {
from {
transform: rotate(calc(var(--slot-angle, 0deg) * -1));
}
to {
transform: rotate(calc(var(--slot-angle, 0deg) * -1)) rotate(var(--upright-turn, -360deg));
}
}

@keyframes orbit-user-points-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (max-width: 980px) {
.page-public-chats[data-chat-view="orbits"] .ball-container {
min-height: 460px;
}
}

@media (max-width: 820px) {
.page-public-chats .chats-layout-actions {
flex-direction: column;
}

.page-public-chats .chat-display-mode-button {
margin: auto;
}

.page-public-chats[data-chat-view="list"] .ball-container--list {
}

.page-public-chats[data-chat-view="orbits"] .custom-tooltip {
width: 120px;
font-size: 12px;
}

.page-public-chats .chats-seo-content {
margin-top: 22px;
}

}

/* ===========================
Каталог чатов (/chats ...)
=========================== */
.page-catalog {
margin: 0;
font-family: Segoe UI;
background: #242529;
color: #000000;
}

.page-catalog a {
text-decoration: none;
color: #ffffff;
}

.page-catalog a:hover {
text-decoration: underline;
}

.page-catalog header.site {
padding: 5px;
background: #383d47;
}

.page-catalog .wrap {
margin: auto;
}

.page-catalog h1 {
font-size: 28px;
}

.page-catalog .meta {
font-size: 12px;
opacity: .8;
margin: 6px 0 0;
}

.page-catalog .badge {
display: inline-block;
background: #bcc0c7;
color: #000000;
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
}

.page-catalog .chat-card {
background: #edf2fa;
margin: 3px;
padding: 10px 20px;
border-radius: 10px;
}

.page-catalog .chat-link {
font-size: 18px;
font-weight: 600;
color: #272727;
}

.page-catalog .desc {
margin: 8px 0 0;
opacity: .9;
line-height: 1.5;
}

.page-catalog nav.pager {
display: flex;
justify-content: center;
}

.page-catalog nav.pager a {
padding: 18px 18px 19px 21px;
background: #42434f;
border-radius: 999px;
display: flex;
align-items: center;
line-height: 0;
color: #ffffffa1;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
}

.page-catalog .stats {
color: #00cfff;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
width: 290px;
margin: -43px auto 20px auto;
}














.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: #00000059 0px 20px 20px 0px; */
}

.ball-container {
transition: 2.0s ease;
position: relative;
background-size: cover;
background-position: center center;
background-repeat: repeat;
box-sizing: border-box;
display: flex;
border-radius: 30px;
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;
}