/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: PowerChat UI segura para Better Messages 2.15.32 con Telegram y Prism.
Author: Ernes
Template: hello-elementor
Version: 1.3.0
Text Domain: hello-elementor-child
*/

/*
 * PowerChat 1.3.0 deliberately leaves width, height, display, grid, position,
 * transform and responsive navigation to Better Messages. The theme changes
 * colors and presentation only, so new tabs, rooms, calls, GIFs, reactions,
 * mini chats and the 2.15.29 mobile settings control keep their native layout.
 */

:root,
html[data-wm-bm-theme="light"] {
    --wm-bm-page: #f4f8fb;
    --wm-bm-panel: #ffffff;
    --wm-bm-panel-2: #f8fafc;
    --wm-bm-chat: #d9edf9;
    --wm-bm-header: rgba(255, 255, 255, .96);
    --wm-bm-input: #eef3f8;
    --wm-bm-hover: #f1f6fb;
    --wm-bm-active: #e3f4ff;
    --wm-bm-border: #e2eaf2;
    --wm-bm-text: #142235;
    --wm-bm-strong: #07111f;
    --wm-bm-muted: #678094;
    --wm-bm-accent: #2aabee;
    --wm-bm-accent-hover: #168ac0;
    --wm-bm-shadow: 0 16px 44px rgba(15, 23, 42, .12);
    --wm-bm-overlay: rgba(8, 19, 31, .72);
}

html[data-wm-bm-theme="dark"] {
    --wm-bm-page: #0b1118;
    --wm-bm-panel: #17212b;
    --wm-bm-panel-2: #1b2733;
    --wm-bm-chat: #0e1621;
    --wm-bm-header: rgba(23, 33, 43, .97);
    --wm-bm-input: #242f3d;
    --wm-bm-hover: #202b36;
    --wm-bm-active: #24384d;
    --wm-bm-border: #2b3b4e;
    --wm-bm-text: #dbe7f3;
    --wm-bm-strong: #ffffff;
    --wm-bm-muted: #91a7bb;
    --wm-bm-accent: #2aabee;
    --wm-bm-accent-hover: #53bdeb;
    --wm-bm-shadow: 0 20px 55px rgba(0, 0, 0, .36);
    --wm-bm-overlay: rgba(2, 7, 12, .82);
}

html body .wm-telegram-ready[data-wm-bm-theme="light"] {
    --main-bm-color: 42, 171, 238 !important;
    --bm-button-bg: 42, 171, 238 !important;
    --bm-bg-color: 255, 255, 255 !important;
    --bm-bg-secondary: 248, 250, 252 !important;
    --bm-hover-bg: 241, 246, 251 !important;
    --bm-text-color: 20, 34, 53 !important;
    --bm-placeholder: 103, 128, 148 !important;
    --bm-border-color: 226, 234, 242 !important;
    --bm-border-secondary-color: 235, 240, 245 !important;
    --left-message-bg-color: 255, 255, 255 !important;
    --left-message-text-color: 20, 34, 53 !important;
    --left-message-nickname-color: 42, 139, 190 !important;
    --right-message-bg-color: 228, 244, 255 !important;
    --right-message-text-color: 20, 34, 53 !important;
    --right-message-nickname-color: 22, 138, 192 !important;
    --bm-sticky-date-bg: rgba(23, 60, 84, .78) !important;
    --bm-sticky-date-color: #ffffff !important;
}

html body .wm-telegram-ready[data-wm-bm-theme="dark"] {
    --main-bm-color: 42, 171, 238 !important;
    --bm-button-bg: 42, 171, 238 !important;
    --bm-bg-color: 23, 33, 43 !important;
    --bm-bg-secondary: 27, 39, 51 !important;
    --bm-hover-bg: 32, 43, 54 !important;
    --bm-text-color: 219, 231, 243 !important;
    --bm-placeholder: 145, 167, 187 !important;
    --bm-border-color: 43, 59, 78 !important;
    --bm-border-secondary-color: 37, 52, 69 !important;
    --left-message-bg-color: 24, 37, 51 !important;
    --left-message-text-color: 219, 231, 243 !important;
    --left-message-nickname-color: 83, 189, 235 !important;
    --right-message-bg-color: 43, 82, 120 !important;
    --right-message-text-color: 255, 255, 255 !important;
    --right-message-nickname-color: 255, 255, 255 !important;
    --bm-sticky-date-bg: rgba(23, 33, 43, .88) !important;
    --bm-sticky-date-color: #ffffff !important;
}

html body .wm-telegram-ready {
    --bm-border-radius: 10px;
    --bm-message-border-radius: 15px;
    --bm-avatar-radius: 50%;
    --bm-date-radius: 12px;
    --bm-mini-chats-border-radius: 16px;
    color: var(--wm-bm-text);
    border-color: var(--wm-bm-border);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

html body .wm-telegram-ready.bp-messages-wrap:not(.bp-messages-full-screen),
html body .wm-telegram-ready#bp-messages-full-screen-wrap:not(.bp-messages-full-screen) {
    border-radius: 16px;
    box-shadow: var(--wm-bm-shadow);
}

html body .wm-telegram-ready :where(.chat-header, .chat-footer) {
    background-color: var(--wm-bm-header);
    border-color: var(--wm-bm-border);
    color: var(--wm-bm-text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html body .wm-telegram-ready :where(.bp-messages-side-threads, .threads-list-wrapper, .threads-list, .bm-threads-list) {
    background-color: var(--wm-bm-panel);
    border-color: var(--wm-bm-border);
    color: var(--wm-bm-text);
}

html body .wm-telegram-ready :where(.thread, .bm-thread, .bpbm-chat-list-item, .chat-room) {
    border-radius: 12px;
    border-color: transparent;
    transition: background-color .16s ease, border-color .16s ease;
}

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

html body .wm-telegram-ready :where(.thread.active, .thread.bp-messages-active-thread, .bm-thread.active, .bpbm-chat-list-item.active, .chat-room.active) {
    background-color: var(--wm-bm-active);
}

/*
 * The PowerChat logo is painted by the existing .bm-list/.bm-list-content
 * configuration. Keep that layer intact and remove only the dotted wallpaper
 * that 1.3.0 previously added on top of the conversation.
 */
html body .wm-telegram-ready :where(.bm-messages-list, .bm-messages-listing, .messages-list-wrapper) {
    background-color: var(--wm-bm-chat);
    background-image: none !important;
}

/* The full message row must never become a painted horizontal strip. */
html body .wm-telegram-ready :where(.bm-messages-stack, .bm-message) {
    background-image: none !important;
}

html body .wm-telegram-ready .bm-messages-list .bm-list .bm-messages-stack
    .bm-content .bm-messages-listing .bm-message,
html body .wm-telegram-ready .bm-messages-list .bm-list .bm-messages-stack
    .bm-content .bm-messages-listing .bm-message:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .wm-telegram-ready .bm-message-content {
    border-radius: var(--bm-message-border-radius);
    box-shadow: none;
}

/*
 * The row stays transparent, but received content keeps the compact Telegram
 * bubble shown in the reference. This is the only element allowed to paint the
 * incoming-message background, so the rest of the logo remains unobstructed.
 */
html body .wm-telegram-ready .bm-messages-list .bm-list .bm-messages-stack.bm-left-side
    .bm-content .bm-messages-listing .bm-message
    .bm-message-content:not(.bm-hide-background) {
    display: inline-block !important;
    flex: 0 1 auto !important;
    width: fit-content !important;
    background: rgba(var(--left-message-bg-color), 1) !important;
    border: 0 !important;
    border-radius: var(--bm-message-border-radius) !important;
    box-shadow: none !important;
}

html body .wm-telegram-ready .bm-messages-list .bm-list .bm-messages-stack.bm-left-side
    .bm-content .bm-messages-listing .bm-message
    .bm-message-content:not(.bm-hide-background) a {
    color: var(--wm-bm-accent) !important;
}

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

html body .wm-telegram-ready :where(.bm-editor, .bm-editor-content) {
    border-color: var(--wm-bm-border);
    color: var(--wm-bm-text);
}

html body .wm-telegram-ready .bm-editor {
    background-color: var(--wm-bm-input);
    border-radius: 18px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

html body .wm-telegram-ready .bm-editor:focus-within {
    border-color: var(--wm-bm-accent);
    box-shadow: 0 0 0 3px rgba(42, 171, 238, .16);
}

/* Composer contrast: BM uses a very low-opacity placeholder by default. */
html body .wm-telegram-ready .bm-reply .bm-editor .bm-editor-content {
    background: transparent !important;
    color: var(--wm-bm-text) !important;
}

html body .wm-telegram-ready .bm-reply .bm-editor .bm-editor-content:empty::before {
    color: var(--wm-bm-muted) !important;
    opacity: 1 !important;
}

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

html body .wm-telegram-ready :where(.bm-send-message, .new-message, button, [role="button"]) {
    border-radius: var(--bm-border-radius);
}

html body .wm-telegram-ready :where(.name, .thread-name, .bm-user-name) {
    color: var(--wm-bm-strong);
}

html body .wm-telegram-ready :where(.last-message, .sub-name, .bm-time, .bm-last-message-content) {
    color: var(--wm-bm-muted);
}

html body .wm-telegram-ready :where(img.avatar, .pic > img, .bpbm-user-me-avatar img) {
    object-fit: cover;
    object-position: center;
    border-radius: var(--bm-avatar-radius);
}

/* Stable Telegram-sized profile photos without changing BM's list layout. */
html body .wm-telegram-ready .threads-list .thread > .pic:not(.group),
html body .wm-telegram-ready .threads-list .thread > .pic:not(.group) > :where(a, span),
html body .wm-telegram-ready .threads-list .thread > .pic:not(.group) img,
html body .wm-telegram-ready .threads-list .thread > .pic:not(.group) .avatar {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px;
}

html body .wm-telegram-ready .threads-list .thread > .pic.group > *,
html body .wm-telegram-ready .threads-list .thread > .pic.group > * .avatar,
html body .wm-telegram-ready .threads-list .thread > .pic.group > * img {
    width: 25px !important;
    height: 25px !important;
}

html body .wm-telegram-ready .chat-header .thread-info > .avatar,
html body .wm-telegram-ready .chat-header .thread-info > .avatar :where(a, img) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
}

html body .wm-telegram-ready .bm-messages-stack .bm-pic,
html body .wm-telegram-ready .bm-messages-stack .bm-pic > span,
html body .wm-telegram-ready .bm-messages-stack .bm-pic img,
html body .wm-telegram-ready .bm-messages-stack .bm-pic .avatar {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px;
}

html body .wm-telegram-ready .bp-messages-chat-rooms-list .chat-room .pic.bm-chat-room-placeholder {
    background: var(--wm-bm-hover);
    color: var(--wm-bm-muted);
    border-radius: var(--bm-avatar-radius);
}

html body .wm-telegram-ready :where(.bm-reactions, .bm-reactions-trigger, .bm-message-reactions) {
    /* Native Better Messages reactions: colors only, no display/layout overrides. */
    color: var(--wm-bm-muted);
}

html body .wm-telegram-ready :where(input, textarea, select) {
    color: var(--wm-bm-text);
    border-color: var(--wm-bm-border);
}

html body .wm-telegram-ready :where(input, textarea, select)::placeholder {
    color: var(--wm-bm-muted);
    opacity: .9;
}

/* The conversation header intentionally keeps only Better Messages' menu. */
html body .wm-telegram-ready .thread-actions > :not(.expandingButtons) {
    display: none !important;
}

html body .wm-telegram-ready .thread-actions > .expandingButtons {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--wm-bm-text) !important;
    opacity: 1 !important;
}

html body .wm-telegram-ready .thread-actions > .expandingButtons svg {
    width: 19px;
    height: 19px;
    pointer-events: none;
}

/* Footer fallback, used only when a native thread header is not mounted. */
.wm-bm-footer-tools {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 4px;
    color: var(--wm-bm-text);
}

html[data-wm-bm-theme="light"] body .wm-bm-footer-tools {
    color: #142235 !important;
}

html[data-wm-bm-theme="dark"] body .wm-bm-footer-tools {
    color: #dbe7f3 !important;
}

.wm-bm-tool-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--wm-bm-muted) !important;
    opacity: 1 !important;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

/* Override Better Messages' generic `.bp-messages-wrap button !important`. */
html body .wm-telegram-ready .wm-bm-footer-tools .wm-bm-tool-btn,
html body .wm-telegram-ready .wm-bm-footer-tools .bm-refresh-btn {
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--wm-bm-muted) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

.wm-bm-tool-btn svg,
.wm-bm-footer-tools .bm-refresh-btn img,
.wm-bm-footer-tools .bm-refresh-btn img.emoji {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    object-fit: contain;
    pointer-events: none;
}

.wm-bm-footer-tools .bm-refresh-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    color: var(--wm-bm-muted) !important;
}

.wm-bm-footer-tools .bm-refresh-btn:hover,
.wm-bm-footer-tools .bm-refresh-btn:focus-visible {
    background: var(--wm-bm-hover) !important;
    border-color: var(--wm-bm-border) !important;
    outline: none;
}

.wm-bm-tool-btn:hover,
.wm-bm-tool-btn:focus-visible,
.wm-bm-tool-btn.is-active {
    color: var(--wm-bm-accent) !important;
    background: var(--wm-bm-hover) !important;
    border-color: var(--wm-bm-border) !important;
    outline: none;
}

html body .wm-telegram-ready .wm-bm-footer-tools .wm-bm-tool-btn.is-active {
    color: var(--wm-bm-accent) !important;
    background: var(--wm-bm-active) !important;
}

.wm-bm-tools-floating {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 100020;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--wm-bm-border);
    border-radius: 999px;
    background: var(--wm-bm-header);
    box-shadow: var(--wm-bm-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Avatar editor: this is child-owned UI, so structural rules are scoped here. */
.wm-bm-avatar-overlay {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--wm-bm-overlay);
    color: var(--wm-bm-text);
}

.wm-bm-avatar-overlay:not([hidden]) {
    display: flex !important;
}

.wm-bm-avatar-overlay[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.wm-bm-avatar-modal {
    width: min(94vw, 480px);
    max-height: min(92vh, 760px);
    overflow: auto;
    padding: 22px;
    border: 1px solid var(--wm-bm-border);
    border-radius: 18px;
    background: var(--wm-bm-panel);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .36);
}

.wm-bm-avatar-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.wm-bm-avatar-top-close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--wm-bm-border);
    border-radius: 12px;
    background: var(--wm-bm-input);
    color: var(--wm-bm-text);
    cursor: pointer;
    font: 600 24px/1 system-ui, sans-serif;
}

.wm-bm-avatar-top-close:hover,
.wm-bm-avatar-top-close:focus-visible {
    border-color: var(--wm-bm-accent);
    background: var(--wm-bm-hover);
    outline: 3px solid rgba(42, 171, 238, .18);
    outline-offset: 1px;
}

.wm-bm-avatar-title {
    margin-bottom: 5px;
    color: var(--wm-bm-strong);
    font-size: 20px;
    font-weight: 700;
}

.wm-bm-avatar-help {
    margin: 0;
    color: var(--wm-bm-muted);
    font-size: 13px;
    line-height: 1.45;
}

.wm-bm-avatar-crop-wrap {
    display: flex;
    justify-content: center;
}

.wm-bm-avatar-crop-box {
    position: relative;
    width: min(70vw, 300px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--wm-bm-border);
    border-radius: 18px;
    background: var(--wm-bm-input);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.wm-bm-avatar-crop-box.is-dragging {
    cursor: grabbing;
}

.wm-bm-avatar-crop-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.wm-bm-avatar-crop-guide {
    position: absolute;
    inset: 8%;
    border: 2px solid rgba(255, 255, 255, .84);
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .24);
    pointer-events: none;
}

.wm-bm-avatar-controls,
.wm-bm-avatar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.wm-bm-avatar-range {
    flex: 1 1 150px;
    accent-color: var(--wm-bm-accent);
}

.wm-bm-avatar-btn,
.wm-bm-avatar-icon-btn {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--wm-bm-accent);
    border-radius: 10px;
    background: var(--wm-bm-accent);
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.wm-bm-avatar-icon-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 20px;
}

.wm-bm-avatar-btn:hover,
.wm-bm-avatar-icon-btn:hover,
.wm-bm-avatar-btn:focus-visible,
.wm-bm-avatar-icon-btn:focus-visible {
    background: var(--wm-bm-accent-hover);
    border-color: var(--wm-bm-accent-hover);
    outline: 3px solid rgba(42, 171, 238, .18);
    outline-offset: 1px;
}

.wm-bm-avatar-btn-secondary {
    background: transparent;
    color: var(--wm-bm-text);
    border-color: var(--wm-bm-border);
}

.wm-bm-avatar-status {
    min-height: 22px;
    margin-top: 12px;
    color: var(--wm-bm-muted);
    text-align: center;
    font-size: 13px;
}

/* Keep Better Messages and Select2 dialogs above Elementor without restyling them. */
#better-messages-modals-container,
.bp-messages-wrap .bm-modal,
.select2-container--open {
    z-index: 100090;
}

@media (max-width: 640px) {
    .wm-bm-tools-inline {
        gap: 2px;
        padding: 2px;
    }

    .wm-bm-tool-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .wm-bm-avatar-modal {
        width: 100%;
        padding: 16px;
        border-radius: 15px;
    }

    .wm-bm-avatar-crop-box {
        width: min(78vw, 280px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wm-telegram-ready *,
    .wm-bm-avatar-overlay *,
    .wm-bm-footer-tools * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}