/*
 * RADIO MIRAGE — THEME UNIFIED V8.5.2
 * ====================================
 *
 * Końcowy arkusz kolorów i kontrastu dla PC oraz telefonów.
 * Nie zmienia układu, rozmiarów, skalowania ani funkcjonalności.
 *
 * Jasne motywy:
 *   theme-light, theme-studio, theme-vintage
 *
 * Ciemne motywy:
 *   motyw domyślny, theme-space, theme-italo, theme-80s, theme-90s
 */

/* ====================================================================== */
/* ZMIENNE WSPÓLNE                                                       */
/* ====================================================================== */

body:not(.theme-light):not(.theme-studio):not(.theme-vintage) {
    --rm-ui-page: #08090e;
    --rm-ui-surface: #11121a;
    --rm-ui-surface-2: #171823;
    --rm-ui-surface-3: #20212d;
    --rm-ui-chat: #090a10;
    --rm-ui-input: #101119;
    --rm-ui-text: #f4f4f7;
    --rm-ui-text-soft: #c5c7d0;
    --rm-ui-muted: #8f929f;
    --rm-ui-border: rgba(255, 255, 255, .085);
    --rm-ui-border-strong: rgba(255, 255, 255, .14);
    --rm-ui-shadow: rgba(0, 0, 0, .35);
    --rm-ui-own-bg-1: rgba(241, 51, 75, .24);
    --rm-ui-own-bg-2: rgba(241, 51, 75, .095);
    --rm-ui-own-border: rgba(241, 51, 75, .30);
    --rm-ui-other-bg-1: rgba(35, 36, 47, .98);
    --rm-ui-other-bg-2: rgba(24, 25, 34, .98);
    --rm-ui-placeholder: #818490;
}

body.theme-light,
body.theme-studio,
body.theme-vintage {
    --rm-ui-page: #eef1f5;
    --rm-ui-surface: #ffffff;
    --rm-ui-surface-2: #f7f8fa;
    --rm-ui-surface-3: #eef1f5;
    --rm-ui-chat: #ffffff;
    --rm-ui-input: #ffffff;
    --rm-ui-text: #1b1d21;
    --rm-ui-text-soft: #43464d;
    --rm-ui-muted: #70747d;
    --rm-ui-border: rgba(28, 31, 36, .10);
    --rm-ui-border-strong: rgba(28, 31, 36, .16);
    --rm-ui-shadow: rgba(25, 28, 33, .10);
    --rm-ui-own-bg-1: #fff5f6;
    --rm-ui-own-bg-2: #ffe8ec;
    --rm-ui-own-border: #f0c8cf;
    --rm-ui-other-bg-1: #ffffff;
    --rm-ui-other-bg-2: #f4f6f8;
    --rm-ui-placeholder: #858992;
}

/* ====================================================================== */
/* GŁÓWNE TŁA I KONTENERY                                                 */
/* ====================================================================== */

body {
    background: var(--rm-ui-page) !important;
    color: var(--rm-ui-text) !important;
}

.chat-container {
    background: var(--rm-ui-surface) !important;
    border-color: var(--rm-ui-border) !important;
    box-shadow: 0 18px 46px var(--rm-ui-shadow) !important;
}

.chat-header,
.mobile-top-bar {
    background: color-mix(in srgb, var(--rm-ui-surface) 96%, transparent) !important;
    border-color: var(--rm-ui-border) !important;
    color: var(--rm-ui-text) !important;
}

.mobile-logo,
.chat-header,
.chat-header strong,
.user-info,
.user-info strong {
    color: var(--rm-ui-text) !important;
    text-shadow: none !important;
}

#hamburger-btn,
#mobile-close-btn {
    border-color: color-mix(in srgb, var(--neon-red) 48%, var(--rm-ui-border)) !important;
    background: color-mix(in srgb, var(--neon-red) 9%, var(--rm-ui-surface)) !important;
    color: color-mix(in srgb, var(--neon-red) 84%, var(--rm-ui-text)) !important;
}

#chat-window {
    background:
        linear-gradient(
            rgba(127, 127, 127, .028) 1px,
            transparent 1px
        ),
        var(--rm-ui-chat) !important;
    background-size: 100% 36px !important;
    color: var(--rm-ui-text) !important;
}

/* ====================================================================== */
/* INFORMATOR, PANELE I NAWIGACJA                                        */
/* ====================================================================== */

#bot-informator,
#powiadomienieWP,
.chat-extra-tools,
.online-stats-container,
.radio-info {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border) !important;
    color: var(--rm-ui-text) !important;
}

#bot-informator-text,
#bot-informator-text strong,
#powiadomienieWP,
.stat-value,
.stat-label,
.radio-info,
.radio-info strong {
    color: var(--rm-ui-text) !important;
    text-shadow: none !important;
}

.extra-btn,
.nav-links,
.nav-link,
.stat-card,
.user-menu,
.theme-switcher {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border) !important;
    color: var(--rm-ui-text-soft) !important;
    box-shadow: none !important;
}

.extra-btn:hover,
.nav-link:hover {
    background: var(--rm-ui-surface-3) !important;
    color: var(--rm-ui-text) !important;
}

/* ====================================================================== */
/* PLAYER — TYLKO KOLORY                                                  */
/* ====================================================================== */

.rm-chat-player,
.sticky-player {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--rm-ui-surface) 97%, var(--neon-red) 3%),
            var(--rm-ui-surface)
        ) !important;
    border-color: var(--rm-ui-border-strong) !important;
    box-shadow: 0 18px 40px var(--rm-ui-shadow) !important;
    color: var(--rm-ui-text) !important;
}

.rm-player-head,
.rm-player-channels,
.rm-chat-player-main,
.rm-chat-player-controls,
.rm-player-visualizer {
    border-color: var(--rm-ui-border) !important;
}

.rm-player-brand strong,
.rm-player-brand span,
.rm-player-state,
.rm-now-title,
.rm-now-artist,
.rm-now-show,
.rm-now-channel,
.rm-volume-value {
    color: var(--rm-ui-text) !important;
    text-shadow: none !important;
}

.rm-player-brand small,
.rm-now-label,
.rm-player-state,
.rm-volume-value {
    color: var(--rm-ui-muted) !important;
}

.rm-player-channel {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border) !important;
    color: var(--rm-ui-text-soft) !important;
}

.rm-player-channel.is-active,
.rm-player-channel.active {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--neon-red) 88%, #ffffff 12%),
            var(--neon-red)
        ) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--neon-red) 80%, #ffffff 20%) !important;
}

.rm-chat-player button:not(.rm-player-channel) {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border-strong) !important;
    color: var(--rm-ui-text) !important;
}

/* ====================================================================== */
/* WIADOMOŚCI                                                             */
/* ====================================================================== */

.message-header,
.message-header .author,
.message-header .user-custom-status,
.message-footer,
.message-footer .time,
.message-bubble .time {
    text-shadow: none !important;
}

.message-header .author {
    color: color-mix(in srgb, var(--neon-red) 84%, var(--rm-ui-text)) !important;
}

.user-custom-status {
    color: var(--rm-ui-muted) !important;
}

.message-footer .time,
.message-bubble .time {
    color: var(--rm-ui-muted) !important;
}

/* Wiadomości innych */
.message-bubble.is-other .text-content {
    background:
        linear-gradient(
            145deg,
            var(--rm-ui-other-bg-1),
            var(--rm-ui-other-bg-2)
        ) !important;
    color: var(--rm-ui-text) !important;
    border-color: var(--rm-ui-border) !important;
    box-shadow: 0 8px 22px var(--rm-ui-shadow) !important;
    text-shadow: none !important;
}

/* Własne wiadomości */
.message-bubble.is-mine .text-content {
    background:
        linear-gradient(
            145deg,
            var(--rm-ui-own-bg-1),
            var(--rm-ui-own-bg-2)
        ) !important;
    color: var(--rm-ui-text) !important;
    border: 1px solid var(--rm-ui-own-border) !important;
    box-shadow:
        0 8px 24px var(--rm-ui-shadow),
        0 0 20px color-mix(in srgb, var(--neon-red) 9%, transparent) !important;
    text-shadow: none !important;
}

.message-bubble .text-inner,
.message-bubble .text-inner a {
    color: inherit !important;
}

.message-bubble .text-inner a {
    text-decoration-color: color-mix(in srgb, var(--neon-red) 65%, transparent) !important;
}

/* Cytaty i odpowiedzi */
.message-quote-box,
.reply-preview-bar {
    background: color-mix(in srgb, var(--rm-ui-surface-2) 94%, transparent) !important;
    border-color: var(--rm-ui-border) !important;
    border-left-color: var(--neon-red) !important;
    color: var(--rm-ui-text-soft) !important;
    box-shadow: none !important;
}

.quote-author,
.reply-author {
    color: color-mix(in srgb, var(--neon-red) 84%, var(--rm-ui-text)) !important;
}

.quote-text,
.reply-text {
    color: var(--rm-ui-muted) !important;
}

/* Tłumaczenie, reakcje i narzędzia */
.translate-btn,
.reaction-trigger-area,
.messenger-picker,
.reactions-summary {
    background: color-mix(in srgb, var(--rm-ui-surface-2) 96%, transparent) !important;
    border-color: var(--rm-ui-border) !important;
    color: var(--rm-ui-muted) !important;
    box-shadow: 0 6px 18px var(--rm-ui-shadow) !important;
}

.reaction-trigger-area .react-btn,
.translate-btn,
.reactions-summary {
    color: var(--rm-ui-muted) !important;
    text-shadow: none !important;
}

.reaction-trigger-area .react-btn:hover,
.reaction-trigger-area .react-btn:active {
    color: var(--neon-red) !important;
}

/* System i Wiesio */
.system-wiesio,
.message-bubble.system-wiesio {
    background: color-mix(in srgb, var(--neon-red) 8%, var(--rm-ui-surface-2)) !important;
    border-color: color-mix(in srgb, var(--neon-red) 24%, var(--rm-ui-border)) !important;
    color: var(--rm-ui-text) !important;
}

/* Zdjęcia, GIF-y i podglądy */
.message-image,
.chat-image,
.yt-preview-box,
.rich-preview-container {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border) !important;
    box-shadow: 0 8px 22px var(--rm-ui-shadow) !important;
}

/* ====================================================================== */
/* POLE PISANIA                                                           */
/* ====================================================================== */

.chat-input-area {
    background: color-mix(in srgb, var(--rm-ui-surface) 98%, transparent) !important;
    border-top-color: var(--rm-ui-border) !important;
    box-shadow: 0 -10px 28px var(--rm-ui-shadow) !important;
}

#message-form .input-row {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border-strong) !important;
    box-shadow: 0 8px 24px var(--rm-ui-shadow) !important;
}

#message-form .input-row:focus-within {
    border-color: color-mix(in srgb, var(--neon-red) 55%, var(--rm-ui-border)) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--neon-red) 10%, transparent),
        0 8px 24px var(--rm-ui-shadow) !important;
}

#msg-input,
.edit-message-textarea {
    background: var(--rm-ui-input) !important;
    color: var(--rm-ui-text) !important;
    border-color: var(--rm-ui-border) !important;
    caret-color: var(--neon-red) !important;
    box-shadow: none !important;
}

#msg-input::placeholder,
.edit-message-textarea::placeholder {
    color: var(--rm-ui-placeholder) !important;
    opacity: 1 !important;
}

.input-tools {
    border-color: var(--rm-ui-border) !important;
}

.input-tools .tool-btn,
#btn-giphy {
    background: var(--rm-ui-surface-2) !important;
    border-color: var(--rm-ui-border) !important;
    color: var(--rm-ui-text-soft) !important;
}

.input-tools .tool-btn:hover,
#btn-giphy:hover {
    background: var(--rm-ui-surface-3) !important;
    color: var(--rm-ui-text) !important;
}

#send-btn,
.edit-message-submit,
.font-size-save {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--neon-red) 88%, #ffffff 12%),
            var(--neon-red)
        ) !important;
    border-color: color-mix(in srgb, var(--neon-red) 78%, #ffffff 22%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--neon-red) 27%, transparent) !important;
}

/* ====================================================================== */
/* POPUPY, GIF-Y, EMOTIKONY I MODUŁY                                      */
/* ====================================================================== */

.popup-window,
.giphy-modal,
.emotes-popover,
.font-size-window,
.inline-message-editor {
    background: var(--rm-ui-surface) !important;
    border-color: var(--rm-ui-border-strong) !important;
    color: var(--rm-ui-text) !important;
    box-shadow: 0 18px 50px var(--rm-ui-shadow) !important;
}

.popup-window h2,
.popup-window h3,
.giphy-modal h2,
.emotes-popover h2,
.font-size-header h2 {
    color: var(--rm-ui-text) !important;
    text-shadow: none !important;
}

.popup-window p,
.popup-window label,
.font-size-description {
    color: var(--rm-ui-text-soft) !important;
}

.popup-window input,
.popup-window textarea,
.popup-window select,
.giphy-modal input {
    background: var(--rm-ui-input) !important;
    color: var(--rm-ui-text) !important;
    border-color: var(--rm-ui-border-strong) !important;
}

.popup-window input::placeholder,
.popup-window textarea::placeholder,
.giphy-modal input::placeholder {
    color: var(--rm-ui-placeholder) !important;
}

.font-size-preview,
#fontSizeDisplay {
    background: var(--rm-ui-surface-2) !important;
    color: var(--rm-ui-text) !important;
    border-color: var(--rm-ui-border) !important;
}

.font-size-actions {
    background:
        linear-gradient(
            to top,
            var(--rm-ui-surface) 72%,
            transparent
        ) !important;
}

.font-size-reset,
.font-size-close,
.popup-close-btn {
    background: var(--rm-ui-surface-2) !important;
    color: var(--rm-ui-text-soft) !important;
    border-color: var(--rm-ui-border) !important;
}

/* ====================================================================== */
/* JASNY MOTYW — DODATKOWE KONTRASTY                                     */
/* ====================================================================== */

body.theme-light .rm-player-brand small,
body.theme-studio .rm-player-brand small,
body.theme-vintage .rm-player-brand small,
body.theme-light .rm-now-label,
body.theme-studio .rm-now-label,
body.theme-vintage .rm-now-label {
    color: #626772 !important;
}

body.theme-light .message-bubble.is-mine .text-content,
body.theme-studio .message-bubble.is-mine .text-content,
body.theme-vintage .message-bubble.is-mine .text-content {
    color: #1b1d21 !important;
}

body.theme-light .message-bubble.is-other .text-content,
body.theme-studio .message-bubble.is-other .text-content,
body.theme-vintage .message-bubble.is-other .text-content {
    color: #1b1d21 !important;
}

/* ====================================================================== */
/* CIEMNY MOTYW — DODATKOWE KONTRASTY                                    */
/* ====================================================================== */

body:not(.theme-light):not(.theme-studio):not(.theme-vintage)
.message-bubble.is-mine .text-content,
body:not(.theme-light):not(.theme-studio):not(.theme-vintage)
.message-bubble.is-other .text-content {
    color: #f7f7fa !important;
}

body:not(.theme-light):not(.theme-studio):not(.theme-vintage)
#chat-window {
    scrollbar-color:
        color-mix(in srgb, var(--neon-red) 45%, transparent)
        rgba(255, 255, 255, .035);
}

/* ====================================================================== */
/* SCROLLBARY                                                             */
/* ====================================================================== */

#chat-window::-webkit-scrollbar-track,
.popup-window::-webkit-scrollbar-track,
.giphy-modal::-webkit-scrollbar-track,
.emotes-popover::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--rm-ui-surface-2) 92%, transparent) !important;
}

#chat-window::-webkit-scrollbar-thumb,
.popup-window::-webkit-scrollbar-thumb,
.giphy-modal::-webkit-scrollbar-thumb,
.emotes-popover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--neon-red) 42%, var(--rm-ui-border)) !important;
    border-color: transparent !important;
}


/* ====================================================================== */
/* V8.5.3 — JEDNOZNACZNE TŁO CZATU I WYŁĄCZNIE LOGO rm.png                */
/* ====================================================================== */

/*
 * Dwie wcześniejsze czerwone ikonki były ikonami Font Awesome.
 * Zastępują je obrazy rm.png bez zmiany konstrukcji nagłówków.
 */
.mobile-logo {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.mobile-logo-image {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: block !important;
    flex: 0 0 28px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.rm-player-brand-mark {
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
}

.rm-player-brand-logo {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
}

/*
 * Jasny motyw:
 * wymuszenie białego tła dokładnie na elemencie main#chat-window.
 * Selektor jest celowo bardziej szczegółowy niż stare reguły
 * .chat-messages z głównego style7.css.
 */
html body.theme-light .chat-container > main#chat-window.chat-messages,
html body.theme-studio .chat-container > main#chat-window.chat-messages,
html body.theme-vintage .chat-container > main#chat-window.chat-messages {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(
            rgba(24, 28, 34, .025) 1px,
            transparent 1px
        ) !important;
    background-size: 100% 36px !important;
    color: #1b1d21 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Jasny motyw — tekst i dymki pozostają czytelne na bieli. */
html body.theme-light main#chat-window .message-bubble.is-other .text-content,
html body.theme-studio main#chat-window .message-bubble.is-other .text-content,
html body.theme-vintage main#chat-window .message-bubble.is-other .text-content {
    background: linear-gradient(145deg, #ffffff, #f4f6f8) !important;
    color: #1b1d21 !important;
    border-color: #dfe3e8 !important;
}

html body.theme-light main#chat-window .message-bubble.is-mine .text-content,
html body.theme-studio main#chat-window .message-bubble.is-mine .text-content,
html body.theme-vintage main#chat-window .message-bubble.is-mine .text-content {
    background: linear-gradient(145deg, #fff5f6, #ffe8ec) !important;
    color: #1b1d21 !important;
    border-color: #f0c8cf !important;
}

/*
 * Ciemny motyw:
 * analogicznie wymuszone właściwe ciemne tło na PC i telefonie.
 */
html body:not(.theme-light):not(.theme-studio):not(.theme-vintage)
.chat-container > main#chat-window.chat-messages {
    background-color: #090a10 !important;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        ) !important;
    background-size: 100% 36px !important;
    color: #f4f4f7 !important;
    opacity: 1 !important;
    filter: none !important;
}

html body:not(.theme-light):not(.theme-studio):not(.theme-vintage)
main#chat-window .message-bubble.is-other .text-content {
    background: linear-gradient(
        145deg,
        rgba(35, 36, 47, .98),
        rgba(24, 25, 34, .98)
    ) !important;
    color: #f7f7fa !important;
    border-color: rgba(255, 255, 255, .085) !important;
}

html body:not(.theme-light):not(.theme-studio):not(.theme-vintage)
main#chat-window .message-bubble.is-mine .text-content {
    background: linear-gradient(
        145deg,
        rgba(241, 51, 75, .24),
        rgba(241, 51, 75, .095)
    ) !important;
    color: #f7f7fa !important;
    border-color: rgba(241, 51, 75, .30) !important;
}

/* Mniejszy znak na bardzo wąskich telefonach, bez zmiany układu strony. */
@media (max-width: 340px) {
    .mobile-logo-image {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex-basis: 24px !important;
    }
}


/* ====================================================================== */
/* V8.5.4 — lepsza widoczność żółtej etykiety harmonogramu na jasnym tle   */
/* Zakres: wyłącznie .bot-upcoming w jasnych motywach.                     */
/* ====================================================================== */
html body.theme-light #bot-informator .bot-upcoming,
html body.theme-studio #bot-informator .bot-upcoming,
html body.theme-vintage #bot-informator .bot-upcoming {
    background: #fff4cf !important;
    color: #9a6a00 !important;
    border: 1px solid #e7c56c !important;
    box-shadow: none !important;
    text-shadow: none !important;
}