/*
 * PowerChat Prism — optional visual skin for PowerChat UI 1.3.0.
 *
 * This file is intentionally presentation-only. It does not change Better
 * Messages' column sizing, navigation, positioning, responsive display or
 * React-owned DOM. Activate it with data-wm-bm-skin="prism".
 */

html[data-wm-bm-skin="prism"][data-wm-bm-theme="light"] {
    --wm-bm-page: #eef4fb;
    --wm-bm-panel: rgba(255, 255, 255, .92);
    --wm-bm-panel-2: rgba(248, 251, 255, .94);
    --wm-bm-chat: #fbfdff;
    --wm-bm-header: rgba(255, 255, 255, .82);
    --wm-bm-input: rgba(247, 250, 255, .94);
    --wm-bm-hover: rgba(234, 243, 255, .86);
    --wm-bm-active: rgba(232, 240, 255, .94);
    --wm-bm-border: rgba(166, 189, 219, .42);
    --wm-bm-text: #152746;
    --wm-bm-strong: #071734;
    --wm-bm-muted: #7184a4;
    --wm-bm-accent: #078cf4;
    --wm-bm-accent-hover: #0075d4;
    --wm-bm-shadow: 0 24px 70px rgba(39, 74, 116, .17);
    --wm-prism-pink: #f03ca6;
    --wm-prism-blue: #168cff;
    --wm-prism-cyan: #32c7ff;
    --wm-prism-surface: rgba(255, 255, 255, .74);
    --wm-prism-bubble-in: rgba(241, 246, 253, .95);
    --wm-prism-outline: rgba(80, 135, 196, .20);
    --wm-prism-glow-a: rgba(20, 143, 255, .12);
    --wm-prism-glow-b: rgba(240, 60, 166, .10);
}

html[data-wm-bm-skin="prism"][data-wm-bm-theme="dark"] {
    --wm-bm-page: #020813;
    --wm-bm-panel: rgba(5, 16, 31, .94);
    --wm-bm-panel-2: rgba(8, 21, 39, .96);
    --wm-bm-chat: #020a17;
    --wm-bm-header: rgba(5, 16, 31, .82);
    --wm-bm-input: rgba(7, 20, 38, .92);
    --wm-bm-hover: rgba(15, 37, 65, .80);
    --wm-bm-active: rgba(19, 43, 82, .82);
    --wm-bm-border: rgba(91, 139, 193, .25);
    --wm-bm-text: #e7f0fc;
    --wm-bm-strong: #ffffff;
    --wm-bm-muted: #8ca2bf;
    --wm-bm-accent: #11a2ff;
    --wm-bm-accent-hover: #43b8ff;
    --wm-bm-shadow: 0 28px 90px rgba(0, 0, 0, .55);
    --wm-prism-pink: #f42e98;
    --wm-prism-blue: #167cff;
    --wm-prism-cyan: #24c6ff;
    --wm-prism-surface: rgba(6, 19, 36, .78);
    --wm-prism-bubble-in: rgba(12, 29, 51, .94);
    --wm-prism-outline: rgba(88, 145, 207, .24);
    --wm-prism-glow-a: rgba(14, 124, 255, .14);
    --wm-prism-glow-b: rgba(244, 46, 152, .12);
}

html[data-wm-bm-skin="prism"] body {
    background-color: var(--wm-bm-page);
    background-image:
        radial-gradient(circle at 18% 12%, var(--wm-prism-glow-a), transparent 34%),
        radial-gradient(circle at 84% 88%, var(--wm-prism-glow-b), transparent 32%);
}

html body .wm-prism-ready[data-wm-bm-theme="light"] {
    --main-bm-color: 7, 140, 244 !important;
    --bm-button-bg: 7, 140, 244 !important;
    --bm-bg-color: 255, 255, 255 !important;
    --bm-bg-secondary: 248, 251, 255 !important;
    --bm-hover-bg: 234, 243, 255 !important;
    --bm-text-color: 21, 39, 70 !important;
    --bm-placeholder: 113, 132, 164 !important;
    --bm-border-color: 214, 226, 241 !important;
    --bm-border-secondary-color: 229, 237, 247 !important;
    --left-message-bg-color: 241, 246, 253 !important;
    --left-message-text-color: 21, 39, 70 !important;
    --left-message-nickname-color: 7, 140, 244 !important;
    --right-message-bg-color: 22, 140, 255 !important;
    --right-message-text-color: 255, 255, 255 !important;
    --right-message-nickname-color: 7, 140, 244 !important;
}

html body .wm-prism-ready[data-wm-bm-theme="dark"] {
    --main-bm-color: 17, 162, 255 !important;
    --bm-button-bg: 17, 162, 255 !important;
    --bm-bg-color: 5, 16, 31 !important;
    --bm-bg-secondary: 8, 21, 39 !important;
    --bm-hover-bg: 15, 37, 65 !important;
    --bm-text-color: 231, 240, 252 !important;
    --bm-placeholder: 140, 162, 191 !important;
    --bm-border-color: 24, 49, 78 !important;
    --bm-border-secondary-color: 17, 38, 64 !important;
    --left-message-bg-color: 12, 29, 51 !important;
    --left-message-text-color: 231, 240, 252 !important;
    --left-message-nickname-color: 17, 162, 255 !important;
    --right-message-bg-color: 22, 124, 255 !important;
    --right-message-text-color: 255, 255, 255 !important;
    --right-message-nickname-color: 17, 162, 255 !important;
}

html body .wm-prism-ready {
    --bm-border-radius: 12px;
    --bm-message-border-radius: 15px;
    outline: 1px solid var(--wm-prism-outline);
    outline-offset: -1px;
    background: var(--wm-bm-panel);
    box-shadow: var(--wm-bm-shadow), inset 0 1px rgba(255, 255, 255, .05);
}

html body .wm-prism-ready :where(.chat-header, .chat-footer, .side-header) {
    background: var(--wm-bm-header);
    border-color: var(--wm-bm-border);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow: 0 1px 0 var(--wm-prism-outline);
}

html body .wm-prism-ready :where(.bp-messages-side-threads, .threads-list-wrapper, .threads-list, .bm-threads-list) {
    background:
        linear-gradient(180deg, var(--wm-prism-glow-a), transparent 28%),
        var(--wm-bm-panel);
    border-color: var(--wm-bm-border);
}

html body .wm-prism-ready :where(
    .search,
    .search-form,
    .bp-messages-side-threads .search-bar,
    .bp-messages-side-threads input[type="search"],
    .bp-messages-side-threads input[type="text"]
) {
    border-color: var(--wm-bm-border) !important;
    background: var(--wm-prism-surface) !important;
    color: var(--wm-bm-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

html body .wm-prism-ready :where(.thread, .bm-thread, .bpbm-chat-list-item, .chat-room) {
    position: relative;
    border: 1px solid transparent;
    border-radius: 13px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

html body .wm-prism-ready :where(.thread, .bm-thread, .bpbm-chat-list-item, .chat-room):hover {
    background: var(--wm-bm-hover);
    border-color: var(--wm-prism-outline);
}

html body .wm-prism-ready :where(
    .thread.active,
    .thread.bp-messages-active-thread,
    .bm-thread.active,
    .bpbm-chat-list-item.active,
    .chat-room.active
) {
    border-color: color-mix(in srgb, var(--wm-prism-pink) 52%, var(--wm-prism-blue));
    background:
        linear-gradient(108deg, color-mix(in srgb, var(--wm-prism-pink) 18%, transparent), color-mix(in srgb, var(--wm-prism-blue) 16%, transparent)),
        var(--wm-bm-active);
    box-shadow: inset 3px 0 var(--wm-prism-pink), 0 8px 24px var(--wm-prism-glow-a);
}

/* Graceful fallback for engines without color-mix(). */
@supports not (color: color-mix(in srgb, red, blue)) {
    html body .wm-prism-ready :where(
        .thread.active,
        .thread.bp-messages-active-thread,
        .bm-thread.active,
        .bpbm-chat-list-item.active,
        .chat-room.active
    ) {
        border-color: var(--wm-prism-blue);
        background: var(--wm-bm-active);
    }
}

html body .wm-prism-ready :where(.thread, .bm-thread, .bpbm-chat-list-item, .chat-room)
    :where(.unread-count, .bm-unread-count, .bm-unread, .new-message-count) {
    background: linear-gradient(135deg, var(--wm-prism-pink), var(--wm-prism-blue)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px var(--wm-prism-glow-a);
}

html body .wm-prism-ready :where(.bm-messages-list, .messages-list-wrapper) {
    background-color: var(--wm-bm-chat) !important;
    background-image:
        radial-gradient(ellipse at 60% 38%, var(--wm-prism-glow-a), transparent 34%),
        radial-gradient(ellipse at 78% 60%, var(--wm-prism-glow-b), transparent 30%),
        linear-gradient(145deg, transparent 30%, rgba(105, 157, 217, .035) 55%, transparent 72%) !important;
}

html body .wm-prism-ready :where(.bm-messages-listing, .bm-messages-stack, .bm-content) {
    background: transparent !important;
    background-image: none !important;
}

/* Optional vector watermark. It is one low-opacity layer, never one per message. */
html body .wm-prism-ready .bm-list-content {
    position: relative;
    isolation: isolate;
}

html body .wm-prism-ready .bm-list-content::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 66%;
    width: min(36vw, 390px);
    aspect-ratio: 1;
    translate: -50% -50%;
    opacity: .17;
    pointer-events: none;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23168cff'/%3E%3Cstop offset='.52' stop-color='%23f03ca6'/%3E%3Cstop offset='1' stop-color='%23ffc14d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M200 55 322 126v148l-122 71-122-71V126Z'/%3E%3Cpath d='m78 126 122 72 122-72M200 198v147'/%3E%3Cpath opacity='.45' d='M8 247c54-62 102-72 145-30s89 62 139 6 82-41 105-5'/%3E%3C/g%3E%3C/svg%3E");
}

html body .wm-prism-ready .bm-list-content > :where(.bm-messages-stack, .bm-content, .bm-messages-listing) {
    position: relative;
    z-index: 1;
}

html body .wm-prism-ready .bm-message,
html body .wm-prism-ready .bm-message:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .wm-prism-ready .bm-messages-stack.bm-left-side .bm-message-content:not(.bm-hide-background) {
    background: var(--wm-prism-bubble-in) !important;
    border: 1px solid var(--wm-prism-outline) !important;
    border-radius: 7px 15px 15px 15px !important;
    color: var(--wm-bm-text) !important;
    box-shadow: 0 6px 18px rgba(1, 12, 27, .06) !important;
}

html body .wm-prism-ready .bm-messages-stack.bm-right-side .bm-message-content:not(.bm-hide-background) {
    background: linear-gradient(112deg, var(--wm-prism-pink), var(--wm-prism-blue)) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 15px 7px 15px 15px !important;
    color: #fff !important;
    box-shadow: 0 7px 24px color-mix(in srgb, var(--wm-prism-blue) 20%, transparent) !important;
}

html body .wm-prism-ready .bm-messages-stack.bm-right-side .bm-message-content :where(a, .bm-time, .bm-message-info) {
    color: #fff !important;
}

html body .wm-prism-ready :where(.bm-info, .name, .bm-user, .bm-user-name) {
    color: var(--wm-bm-accent) !important;
}

html body .wm-prism-ready .bm-message-content :where(.bm-replied-message, blockquote) {
    border-inline-start: 3px solid var(--wm-prism-cyan);
    border-radius: 8px;
    background: rgba(5, 21, 42, .10);
}

html body .wm-prism-ready .bm-message-content :where(.bm-attachment, .bm-file, .bm-document) {
    border-color: currentColor;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
}

html body .wm-prism-ready .bm-reply {
    background: var(--wm-bm-header);
    border-color: var(--wm-bm-border);
}

html body .wm-prism-ready .bm-editor {
    min-height: 44px;
    border: 1px solid var(--wm-bm-border) !important;
    border-radius: 13px;
    background: var(--wm-bm-input) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

html body .wm-prism-ready .bm-editor:focus-within {
    border-color: var(--wm-prism-blue) !important;
    box-shadow: 0 0 0 3px var(--wm-prism-glow-a), inset 0 1px rgba(255, 255, 255, .05);
}

html body .wm-prism-ready .bm-send-message {
    border: 1px solid rgba(255, 255, 255, .20) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--wm-prism-pink), var(--wm-prism-blue)) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px var(--wm-prism-glow-a) !important;
}

html body .wm-prism-ready .bm-reply :where(.bm-attachment, .bm-gif, .bm-stickers, .bm-emojies) {
    color: var(--wm-bm-accent) !important;
}

html body .wm-prism-ready :where(.expandingButtons, #bmre-floating-call, .bm-thread-header-action) {
    border: 1px solid var(--wm-bm-border) !important;
    background: var(--wm-prism-surface) !important;
    color: var(--wm-bm-accent) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

html body .wm-prism-ready #bmre-floating-call:hover,
html body .wm-prism-ready .expandingButtons:hover {
    border-color: var(--wm-prism-blue) !important;
    background: var(--wm-bm-hover) !important;
}

html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools .wm-bm-tool-btn,
html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools .bm-refresh-btn {
    border-color: var(--wm-bm-border) !important;
    background: var(--wm-prism-surface) !important;
    color: var(--wm-bm-muted) !important;
}

html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools :where(.wm-bm-tool-btn, .bm-refresh-btn):hover,
html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools :where(.wm-bm-tool-btn, .bm-refresh-btn):focus-visible,
html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools .wm-bm-tool-btn.is-active {
    border-color: var(--wm-prism-blue) !important;
    background: var(--wm-bm-active) !important;
    color: var(--wm-bm-accent) !important;
    box-shadow: 0 0 0 3px var(--wm-prism-glow-a);
}

html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools .wm-bm-skin-btn.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--wm-prism-pink), var(--wm-prism-blue)) !important;
}

html[data-wm-bm-skin="prism"] .wm-bm-avatar-modal,
html[data-wm-bm-skin="prism"] .bmre-call-card,
html[data-wm-bm-skin="prism"] .bmre-admin-modal {
    border-color: var(--wm-bm-border) !important;
    background: var(--wm-bm-panel) !important;
    color: var(--wm-bm-text) !important;
    box-shadow: var(--wm-bm-shadow) !important;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

html[data-wm-bm-skin="prism"] * {
    scrollbar-color: var(--wm-bm-border) transparent;
}

@media (max-width: 760px) {
    html body .wm-prism-ready {
        outline: 0;
        box-shadow: none;
    }

    html body .wm-prism-ready .bm-list-content::after {
        left: 58%;
        width: min(72vw, 310px);
        opacity: .10;
    }

    html body .wm-prism-ready :where(.chat-header, .chat-footer, .side-header) {
        backdrop-filter: blur(14px) saturate(125%);
        -webkit-backdrop-filter: blur(14px) saturate(125%);
    }

    /* R3: the normal mobile location is the native footer. Keeping it in-flow
       prevents the child theme and BMRE from moving the same node forever. */
    html body .wm-telegram-ready .chat-footer > .wm-bm-footer-tools {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        gap: 3px !important;
        padding: 2px max(4px, env(safe-area-inset-right)) 2px max(4px, env(safe-area-inset-left)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        scrollbar-width: none;
    }

    html body .wm-telegram-ready .chat-footer > .wm-bm-footer-tools::-webkit-scrollbar {
        display: none;
    }

    html body :where(.wm-telegram-ready .chat-footer > .wm-bm-footer-tools, body > .wm-bm-tools-floating) :where(.wm-bm-tool-btn, .bm-refresh-btn) {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 6px !important;
        flex: 0 0 32px !important;
    }

    html body :where(.wm-telegram-ready .chat-footer > .wm-bm-footer-tools, body > .wm-bm-tools-floating) :where(svg, img, img.emoji) {
        width: 17px !important;
        height: 17px !important;
    }

    /* R2 reserved 72px for the old floating pill. It produced the empty band
       between the final message and the composer after the tools moved. */
    html body .wm-telegram-ready .bm-list-content { padding-bottom: 1px !important; }

    html body .wm-prism-ready .bm-reply {
        gap: 6px;
        padding-inline: 8px;
    }

    html body .wm-prism-ready .bm-reply :where(
        .bm-attachment,
        .bm-gif,
        .bm-stickers,
        .bm-emojies,
        .bm-send-message
    ) {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    html body .wm-prism-ready :where(.chat-header, .chat-footer, .side-header),
    html[data-wm-bm-skin="prism"] .wm-bm-avatar-modal,
    html[data-wm-bm-skin="prism"] .bmre-call-card,
    html[data-wm-bm-skin="prism"] .bmre-admin-modal {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--wm-bm-panel) !important;
    }
}

@media (forced-colors: active) {
    html body .wm-prism-ready .bm-messages-stack.bm-right-side .bm-message-content:not(.bm-hide-background),
    html body .wm-prism-ready .bm-send-message,
    html[data-wm-bm-skin="prism"] body .wm-bm-footer-tools .wm-bm-skin-btn.is-active {
        background: Highlight !important;
        color: HighlightText !important;
        border: 1px solid HighlightText !important;
    }
}