/* Anonymous/random chat visuals. Loaded after chat.css. */

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 12px;
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.13) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.35);
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].empty-current-chat {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    opacity: 0.75;
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].search-current-chat {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1px solid rgba(59, 130, 246, 0.28);
    opacity: 1;
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].search-current-chat:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(16, 185, 129, 0.07) 100%);
    border-color: rgba(59, 130, 246, 0.42);
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].search-current-chat .tg-avatar-wrap {
    border: 1.5px solid rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
    animation: pulseSearchBorder 3.4s ease-in-out infinite;
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].plot-ad-search-current-chat {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-color: rgba(167, 139, 250, 0.32);
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].plot-ad-search-current-chat:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(16, 185, 129, 0.07) 100%);
    border-color: rgba(196, 181, 253, 0.46);
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].plot-ad-search-current-chat .tg-avatar-wrap {
    border: 1.5px solid rgba(167, 139, 250, 0.48);
    background: rgba(124, 58, 237, 0.12);
    color: #c4b5fd;
    animation: pulseSearchBorder 3.4s ease-in-out infinite;
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.01) 100%);
    border-color: rgba(16, 185, 129, 0.18);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].empty-current-chat {
    border-color: rgba(0, 0, 0, 0.12);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].search-current-chat {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-color: rgba(37, 99, 235, 0.22);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].search-current-chat:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(37, 99, 235, 0.34);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].search-current-chat .tg-avatar-wrap {
    border-color: rgba(37, 99, 235, 0.32);
    background: rgba(37, 99, 235, 0.07);
    color: #2563eb;
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].plot-ad-search-current-chat {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-color: rgba(124, 58, 237, 0.22);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].plot-ad-search-current-chat:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(124, 58, 237, 0.34);
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"].plot-ad-search-current-chat .tg-avatar-wrap {
    border-color: rgba(124, 58, 237, 0.32);
    background: rgba(124, 58, 237, 0.07);
    color: #7c3aed;
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"].empty-current-chat .tg-avatar-wrap {
    border: 1.5px dashed rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    animation: pulseSearchBorder 3.4s ease-in-out infinite;
}

@keyframes pulseSearchBorder {
    0%, 100% { border-color: rgba(255, 255, 255, 0.2); }
    50% { border-color: rgba(16, 185, 129, 0.55); color: rgba(16, 185, 129, 0.6); }
}

.pinned-slot.current-chat-slot[data-chat-kind="anonymous"] .current-slot-badge {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: pulseOnline 3s ease-in-out infinite;
    box-shadow: 0 0 4px #10b981;
}

@keyframes pulseOnline {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.15); }
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.01) 100%) !important;
    border-color: rgba(16, 185, 129, 0.18) !important;
}

body.light .pinned-slot.current-chat-slot[data-chat-kind="anonymous"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.03) 100%) !important;
}

body[data-chat-kind="anonymous"] .chat-header-avatar.chat-header-avatar--anonymous {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, transparent);
    color: color-mix(in srgb, var(--accent-color) 75%, #ffffff);
    cursor: default;
}

body[data-chat-kind="anonymous"] .chat-header-avatar.chat-header-avatar--anonymous .chat-header-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: 100%;
    height: 100%;
}

body[data-chat-kind="anonymous"] .chat-header-avatar.chat-header-avatar--anonymous .ui-icon {
    width: 18px;
    height: 18px;
}