/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Tema hijo de Hello Elementor con interfaz Telegram profesional para Better Messages.
Author: Ernes
Template: hello-elementor
Version: 1.1.7
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   BETTER MESSAGES - TELEGRAM PROFESSIONAL SAFE UI
   Esta versión NO fuerza fullscreen ni oculta contenedores. Solo mejora el UI.
   ========================================================================== */

:root,
body[data-bm-theme="light"],
body.bm-theme-light,
body.bm-messages-light,
.bp-messages-wrap[data-bm-theme="light"],
#bp-messages-full-screen-wrap[data-bm-theme="light"] {
    --tg-page: #f4f8fb;
    --tg-panel: #ffffff;
    --tg-panel-2: #f8fafc;
    --tg-sidebar: #ffffff;
    --tg-chat: #d9edf9;
    --tg-chat-deep: #cfe6f4;
    --tg-header: rgba(255, 255, 255, .94);
    --tg-footer: rgba(255, 255, 255, .96);
    --tg-input: #eef3f8;
    --tg-input-focus: #ffffff;
    --tg-hover: #f1f6fb;
    --tg-active: #e3f4ff;
    --tg-border: #e2eaf2;
    --tg-border-strong: #cad7e4;
    --tg-text: #142235;
    --tg-text-strong: #07111f;
    --tg-muted: #678094;
    --tg-muted-2: #8ea1b3;
    --tg-accent: #2aabee;
    --tg-accent-hover: #168ac0;
    --tg-accent-soft: rgba(42, 171, 238, .15);
    --tg-in: #ffffff;
    --tg-out: #e4f4ff;
    --tg-out-strong: #d6efff;
    --tg-out-text: #142235;
    --tg-system: rgba(255, 255, 255, .78);
    --tg-shadow: 0 16px 44px rgba(15, 23, 42, .12);
    --tg-bubble-shadow: 0 2px 9px rgba(15, 23, 42, .10);
    --tg-wall-a: rgba(42, 171, 238, .12);
    --tg-wall-b: rgba(255, 255, 255, .35);
}

html[data-bm-theme="dark"],
body[data-bm-theme="dark"],
body.bm-theme-dark,
body.bm-messages-dark,
.bp-messages-wrap[data-bm-theme="dark"],
#bp-messages-full-screen-wrap[data-bm-theme="dark"],
.bp-messages-wrap.bm-theme-dark,
.bp-messages-wrap.bm-messages-dark,
#bp-messages-full-screen-wrap.bm-theme-dark,
#bp-messages-full-screen-wrap.bm-messages-dark {
    --tg-page: #0b1118;
    --tg-panel: #17212b;
    --tg-panel-2: #1b2733;
    --tg-sidebar: #17212b;
    --tg-chat: #0e1621;
    --tg-chat-deep: #101b28;
    --tg-header: rgba(23, 33, 43, .95);
    --tg-footer: rgba(23, 33, 43, .97);
    --tg-input: #242f3d;
    --tg-input-focus: #2c3a49;
    --tg-hover: #202b36;
    --tg-active: #24384d;
    --tg-border: #253445;
    --tg-border-strong: #314457;
    --tg-text: #dbe7f3;
    --tg-text-strong: #ffffff;
    --tg-muted: #91a7bb;
    --tg-muted-2: #71879a;
    --tg-accent: #2aabee;
    --tg-accent-hover: #53bdeb;
    --tg-accent-soft: rgba(42, 171, 238, .18);
    --tg-in: #182533;
    --tg-out: #2b5278;
    --tg-out-strong: #35628d;
    --tg-out-text: #ffffff;
    --tg-system: rgba(23, 33, 43, .80);
    --tg-shadow: 0 20px 55px rgba(0, 0, 0, .36);
    --tg-bubble-shadow: 0 2px 10px rgba(0, 0, 0, .24);
    --tg-wall-a: rgba(42, 171, 238, .075);
    --tg-wall-b: rgba(255, 255, 255, .035);
}

/* Contenedor principal: se mejora, pero no se obliga a fixed ni a overflow hidden agresivo. */
html body .bp-messages-wrap,
html body #bp-messages-full-screen-wrap {
    background: var(--tg-panel) !important;
    color: var(--tg-text) !important;
    border-color: var(--tg-border) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    text-rendering: optimizeLegibility;
}

html body .bp-messages-wrap.wm-telegram-ready:not(#bp-messages-full-screen-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(82vh, 880px) !important;
    border-radius: 18px !important;
    box-shadow: var(--tg-shadow) !important;
    overflow: visible !important;
}

html body #bp-messages-full-screen-wrap.wm-telegram-ready {
    background: var(--tg-panel) !important;
}

html body .bp-messages-wrap *,
html body #bp-messages-full-screen-wrap * {
    box-sizing: border-box !important;
}

/* Modo oscuro: texto visible sin convertir todo en negro. */
html[data-bm-theme="dark"] body .bp-messages-wrap,
body[data-bm-theme="dark"] .bp-messages-wrap,
body.bm-theme-dark .bp-messages-wrap,
body.bm-messages-dark .bp-messages-wrap,
html[data-bm-theme="dark"] body #bp-messages-full-screen-wrap,
body[data-bm-theme="dark"] #bp-messages-full-screen-wrap,
body.bm-theme-dark #bp-messages-full-screen-wrap,
body.bm-messages-dark #bp-messages-full-screen-wrap {
    color: var(--tg-text) !important;
}

html[data-bm-theme="dark"] body .bp-messages-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
body[data-bm-theme="dark"] .bp-messages-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
body.bm-theme-dark .bp-messages-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
body.bm-messages-dark .bp-messages-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
html[data-bm-theme="dark"] body #bp-messages-full-screen-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
body[data-bm-theme="dark"] #bp-messages-full-screen-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
body.bm-theme-dark #bp-messages-full-screen-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text),
body.bm-messages-dark #bp-messages-full-screen-wrap :where(.thread, .thread *, .bm-thread, .bm-thread *, .bpbm-chat-list-item, .bpbm-chat-list-item *, .chat-header, .chat-header *, .bm-reply, .bm-reply *, .chat-footer, .chat-footer *, .bm-message-content, .bm-message-content *, .bm-editor-content, .bm-editor-content *, input, textarea, label, button, .name, .thread-name, .last-message, .message, .content, .text) {
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
}

/* Sidebar / lista de chats */
html body .bp-messages-wrap .bp-messages-side-threads,
html body .bp-messages-wrap .threads-list-wrapper,
html body .bp-messages-wrap .chat-list,
html body #bp-messages-full-screen-wrap .bp-messages-side-threads,
html body #bp-messages-full-screen-wrap .threads-list-wrapper,
html body #bp-messages-full-screen-wrap .chat-list {
    background: var(--tg-sidebar) !important;
    color: var(--tg-text) !important;
    border-right: 1px solid var(--tg-border) !important;
}


html body .bp-messages-wrap .threads-list,
html body .bp-messages-wrap .threads,
html body .bp-messages-wrap .bm-threads-list,
html body #bp-messages-full-screen-wrap .threads-list,
html body #bp-messages-full-screen-wrap .threads,
html body #bp-messages-full-screen-wrap .bm-threads-list {
    background: transparent !important;
    padding: 6px 5px 10px !important;
}

html body .bp-messages-wrap .threads-list .thread,
html body .bp-messages-wrap .bm-thread,
html body .bp-messages-wrap .bpbm-chat-list-item,
html body #bp-messages-full-screen-wrap .threads-list .thread,
html body #bp-messages-full-screen-wrap .bm-thread,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    margin: 2px 5px !important;
    padding: 10px 12px !important;
    color: var(--tg-text) !important;
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

html body .bp-messages-wrap .threads-list .thread:hover,
html body .bp-messages-wrap .bm-thread:hover,
html body .bp-messages-wrap .bpbm-chat-list-item:hover,
html body #bp-messages-full-screen-wrap .threads-list .thread:hover,
html body #bp-messages-full-screen-wrap .bm-thread:hover,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item:hover {
    background: var(--tg-hover) !important;
}

html body .bp-messages-wrap .threads-list .thread.active,
html body .bp-messages-wrap .threads-list .thread.bp-messages-active-thread,
html body .bp-messages-wrap .bm-thread.active,
html body .bp-messages-wrap .bpbm-chat-list-item.active,
html body #bp-messages-full-screen-wrap .threads-list .thread.active,
html body #bp-messages-full-screen-wrap .threads-list .thread.bp-messages-active-thread,
html body #bp-messages-full-screen-wrap .bm-thread.active,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item.active {
    background: var(--tg-active) !important;
}

html body .bp-messages-wrap :where(.thread h4, .thread .name, .thread-name, .bm-thread-name, .bpbm-chat-list-item .name),
html body #bp-messages-full-screen-wrap :where(.thread h4, .thread .name, .thread-name, .bm-thread-name, .bpbm-chat-list-item .name) {
    color: var(--tg-text-strong) !important;
    -webkit-text-fill-color: var(--tg-text-strong) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
}

html body .bp-messages-wrap :where(.last-message, .bm-last-message, .thread .time, .thread time, .bm-time, .bpbm-chat-list-item time),
html body #bp-messages-full-screen-wrap :where(.last-message, .bm-last-message, .thread .time, .thread time, .bm-time, .bpbm-chat-list-item time) {
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
}

/* Buscador e inputs */
html body .bp-messages-wrap :where(input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, .threads-search input, .search input, .bm-search input),
html body #bp-messages-full-screen-wrap :where(input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, .threads-search input, .search input, .bm-search input) {
    background: var(--tg-input) !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
    transition: background .16s ease, border .16s ease, box-shadow .16s ease !important;
}

html body .bp-messages-wrap :where(input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, .threads-search input, .search input, .bm-search input):focus,
html body #bp-messages-full-screen-wrap :where(input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, .threads-search input, .search input, .bm-search input):focus {
    background: var(--tg-input-focus) !important;
    border-color: var(--tg-accent) !important;
    box-shadow: 0 0 0 3px var(--tg-accent-soft) !important;
}

html body .bp-messages-wrap :where(input::placeholder, textarea::placeholder),
html body #bp-messages-full-screen-wrap :where(input::placeholder, textarea::placeholder) {
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    opacity: 1 !important;
}

/* Área de conversación */
html body .bp-messages-wrap .bm-messages-column,
html body .bp-messages-wrap .bp-messages-column,
html body .bp-messages-wrap .bpbm-chat-main,
html body .bp-messages-wrap .bm-list,
html body .bp-messages-wrap .bm-list-content,
html body #bp-messages-full-screen-wrap .bm-messages-column,
html body #bp-messages-full-screen-wrap .bp-messages-column,
html body #bp-messages-full-screen-wrap .bpbm-chat-main,
html body #bp-messages-full-screen-wrap .bm-list,
html body #bp-messages-full-screen-wrap .bm-list-content {
    color: var(--tg-text) !important;
}

html body .bp-messages-wrap .bm-messages-column,
html body .bp-messages-wrap .bp-messages-column,
html body .bp-messages-wrap .bm-list,
html body .bp-messages-wrap .bm-list-content,
html body #bp-messages-full-screen-wrap .bm-messages-column,
html body #bp-messages-full-screen-wrap .bp-messages-column,
html body #bp-messages-full-screen-wrap .bm-list,
html body #bp-messages-full-screen-wrap .bm-list-content {
    background-color: var(--tg-chat) !important;
    background-image:
        radial-gradient(circle at 20% 15%, var(--tg-wall-a) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, var(--tg-wall-b) 0 1px, transparent 1px),
        radial-gradient(circle at 35% 70%, var(--tg-wall-b) 0 1px, transparent 1px),
        linear-gradient(135deg, var(--tg-chat), var(--tg-chat-deep)) !important;
    background-size: 34px 34px, 42px 42px, 48px 48px, auto !important;
}



/* Layout principal: el listado queda fijo y el área de conversación ocupa TODO el resto. */
html body .bp-messages-wrap,
html body #bp-messages-full-screen-wrap {
    display: flex !important;
    align-items: stretch !important;
}

html body .bp-messages-wrap .bp-messages-side-threads,
html body .bp-messages-wrap .threads-list-wrapper,
html body .bp-messages-wrap .chat-list,
html body #bp-messages-full-screen-wrap .bp-messages-side-threads,
html body #bp-messages-full-screen-wrap .threads-list-wrapper,
html body #bp-messages-full-screen-wrap .chat-list {
    flex: 0 0 min(390px, 42vw) !important;
    width: min(390px, 42vw) !important;
}

html body .bp-messages-wrap .bpbm-chat-main,
html body .bp-messages-wrap .bpbm-chat-main-primary,
html body .bp-messages-wrap .bm-messages-column,
html body .bp-messages-wrap .bp-messages-column,
html body .bp-messages-wrap .bp-messages-chat-wrap,
html body .bp-messages-wrap .bp-messages-chat,
html body .bp-messages-wrap .chat-main,
html body #bp-messages-full-screen-wrap .bpbm-chat-main,
html body #bp-messages-full-screen-wrap .bpbm-chat-main-primary,
html body #bp-messages-full-screen-wrap .bm-messages-column,
html body #bp-messages-full-screen-wrap .bp-messages-column,
html body #bp-messages-full-screen-wrap .bp-messages-chat-wrap,
html body #bp-messages-full-screen-wrap .bp-messages-chat,
html body #bp-messages-full-screen-wrap .chat-main {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body .bp-messages-wrap .bm-list,
html body .bp-messages-wrap .bm-list-content,
html body .bp-messages-wrap .bm-messages-list,
html body .bp-messages-wrap .messages-list,
html body .bp-messages-wrap .chat-content,
html body .bp-messages-wrap .chat-footer,
html body .bp-messages-wrap .chat-header,
html body .bp-messages-wrap .bm-reply,
html body #bp-messages-full-screen-wrap .bm-list,
html body #bp-messages-full-screen-wrap .bm-list-content,
html body #bp-messages-full-screen-wrap .bm-messages-list,
html body #bp-messages-full-screen-wrap .messages-list,
html body #bp-messages-full-screen-wrap .chat-content,
html body #bp-messages-full-screen-wrap .chat-footer,
html body #bp-messages-full-screen-wrap .chat-header,
html body #bp-messages-full-screen-wrap .bm-reply {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

html body .bp-messages-wrap .bm-messages-stack,
html body .bp-messages-wrap .bm-message,
html body .bp-messages-wrap .bm-message-group,
html body #bp-messages-full-screen-wrap .bm-messages-stack,
html body #bp-messages-full-screen-wrap .bm-message,
html body #bp-messages-full-screen-wrap .bm-message-group {
    width: 100% !important;
    max-width: 100% !important;
}

/* Header/Footer */
html body .bp-messages-wrap .chat-header,
html body .bp-messages-wrap .bm-reply,
html body .bp-messages-wrap .chat-footer,
html body #bp-messages-full-screen-wrap .chat-header,
html body #bp-messages-full-screen-wrap .bm-reply,
html body #bp-messages-full-screen-wrap .chat-footer {
    background: var(--tg-header) !important;
    color: var(--tg-text) !important;
    border-color: var(--tg-border) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

html body .bp-messages-wrap .chat-footer,
html body #bp-messages-full-screen-wrap .chat-footer {
    background: var(--tg-footer) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

html body .bp-messages-wrap .bm-editor,
html body .bp-messages-wrap .bm-editor-content,
html body #bp-messages-full-screen-wrap .bm-editor,
html body #bp-messages-full-screen-wrap .bm-editor-content {
    background: var(--tg-input) !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}

html body .bp-messages-wrap .bm-editor:focus-within,
html body #bp-messages-full-screen-wrap .bm-editor:focus-within {
    background: var(--tg-input-focus) !important;
    border-color: var(--tg-accent) !important;
    box-shadow: 0 0 0 3px var(--tg-accent-soft) !important;
}

html body .bp-messages-wrap .bm-send-message,
html body #bp-messages-full-screen-wrap .bm-send-message,
html body .bp-messages-wrap button[type="submit"],
html body #bp-messages-full-screen-wrap button[type="submit"] {
    background: var(--tg-accent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(42, 171, 238, .25) !important;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

html body .bp-messages-wrap .bm-send-message:hover,
html body #bp-messages-full-screen-wrap .bm-send-message:hover,
html body .bp-messages-wrap button[type="submit"]:hover,
html body #bp-messages-full-screen-wrap button[type="submit"]:hover {
    background: var(--tg-accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(42, 171, 238, .32) !important;
}

/* Burbujas */
html body .bp-messages-wrap .bm-message,
html body #bp-messages-full-screen-wrap .bm-message {
    background: transparent !important;
    margin-bottom: 5px !important;
    padding-left: clamp(10px, 3.5vw, 42px) !important;
    padding-right: clamp(10px, 3.5vw, 42px) !important;
}

html body .bp-messages-wrap .bm-message-content,
html body #bp-messages-full-screen-wrap .bm-message-content {
    background: var(--tg-in) !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--tg-bubble-shadow) !important;
    font-size: 14.5px !important;
    line-height: 1.42 !important;
    max-width: min(76%, 720px) !important;
    padding: 8px 11px 8px 12px !important;
    overflow-wrap: anywhere !important;
}

html body .bp-messages-wrap .bm-messages-stack.incoming .bm-message-content,
html body .bp-messages-wrap .bm-messages-stack.bm-left-side .bm-message-content,
html body #bp-messages-full-screen-wrap .bm-messages-stack.incoming .bm-message-content,
html body #bp-messages-full-screen-wrap .bm-messages-stack.bm-left-side .bm-message-content {
    background: var(--tg-in) !important;
    border-bottom-left-radius: 5px !important;
}

html body .bp-messages-wrap .bm-message.my .bm-message-content,
html body .bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content,
html body .bp-messages-wrap .bm-messages-stack.bm-right-side .bm-message-content,
html body #bp-messages-full-screen-wrap .bm-message.my .bm-message-content,
html body #bp-messages-full-screen-wrap .bm-messages-stack.outgoing .bm-message-content,
html body #bp-messages-full-screen-wrap .bm-messages-stack.bm-right-side .bm-message-content {
    background: linear-gradient(135deg, var(--tg-out), var(--tg-out-strong)) !important;
    color: var(--tg-out-text) !important;
    -webkit-text-fill-color: var(--tg-out-text) !important;
    border-bottom-right-radius: 5px !important;
}

html body .bp-messages-wrap .bm-message.my .bm-message-content *,
html body .bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content *,
html body .bp-messages-wrap .bm-messages-stack.bm-right-side .bm-message-content *,
html body #bp-messages-full-screen-wrap .bm-message.my .bm-message-content *,
html body #bp-messages-full-screen-wrap .bm-messages-stack.outgoing .bm-message-content *,
html body #bp-messages-full-screen-wrap .bm-messages-stack.bm-right-side .bm-message-content * {
    color: var(--tg-out-text) !important;
    -webkit-text-fill-color: var(--tg-out-text) !important;
}

html body .bp-messages-wrap .bm-message-content a,
html body #bp-messages-full-screen-wrap .bm-message-content a {
    color: var(--tg-accent-hover) !important;
    -webkit-text-fill-color: var(--tg-accent-hover) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

html body .bp-messages-wrap .bm-message.my .bm-message-content a,
html body .bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content a,
html body .bp-messages-wrap .bm-messages-stack.bm-right-side .bm-message-content a,
html body #bp-messages-full-screen-wrap .bm-message.my .bm-message-content a,
html body #bp-messages-full-screen-wrap .bm-messages-stack.outgoing .bm-message-content a,
html body #bp-messages-full-screen-wrap .bm-messages-stack.bm-right-side .bm-message-content a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: underline !important;
}

html body .bp-messages-wrap .bm-time,
html body #bp-messages-full-screen-wrap .bm-time {
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    font-size: 11px !important;
    opacity: .9 !important;
}

html body .bp-messages-wrap .bm-message.my .bm-time,
html body .bp-messages-wrap .bm-messages-stack.outgoing .bm-time,
html body .bp-messages-wrap .bm-messages-stack.bm-right-side .bm-time,
html body #bp-messages-full-screen-wrap .bm-message.my .bm-time,
html body #bp-messages-full-screen-wrap .bm-messages-stack.outgoing .bm-time,
html body #bp-messages-full-screen-wrap .bm-messages-stack.bm-right-side .bm-time {
    color: rgba(255, 255, 255, .78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .78) !important;
}

html body .bp-messages-wrap .bm-conversation-start span,
html body .bp-messages-wrap .bm-sticky-date,
html body #bp-messages-full-screen-wrap .bm-conversation-start span,
html body #bp-messages-full-screen-wrap .bm-sticky-date {
    background: var(--tg-system) !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 999px !important;
    box-shadow: var(--tg-bubble-shadow) !important;
    padding: 5px 12px !important;
    text-transform: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Avatares e imágenes: corrige estiramiento. */
html body .bp-messages-wrap :where(.bm-avatar img, .avatar img, img.avatar, .thread-avatar img, .bpbm-avatar img, .user-avatar img),
html body #bp-messages-full-screen-wrap :where(.bm-avatar img, .avatar img, img.avatar, .thread-avatar img, .bpbm-avatar img, .user-avatar img) {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-block !important;
    background: var(--tg-input) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

html body .bp-messages-wrap .bm-message-content :where(img, video, canvas),
html body .bp-messages-wrap .bm-attachment :where(img, video, canvas),
html body .bp-messages-wrap .bpbm-attachment :where(img, video, canvas),
html body #bp-messages-full-screen-wrap .bm-message-content :where(img, video, canvas),
html body #bp-messages-full-screen-wrap .bm-attachment :where(img, video, canvas),
html body #bp-messages-full-screen-wrap .bpbm-attachment :where(img, video, canvas) {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 14px !important;
    display: block !important;
}

html body .bp-messages-wrap .bm-message-content figure,
html body .bp-messages-wrap .bm-attachment,
html body .bp-messages-wrap .bpbm-attachment,
html body #bp-messages-full-screen-wrap .bm-message-content figure,
html body #bp-messages-full-screen-wrap .bm-attachment,
html body #bp-messages-full-screen-wrap .bpbm-attachment {
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

/* Botonera propia */
.bm-footer-tools,
.wm-bm-footer-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

.bm-theme-btn,
.bm-avatar-btn,
.wm-bm-tool-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

.bm-theme-btn:hover,
.bm-avatar-btn:hover,
.wm-bm-tool-btn:hover {
    background: var(--tg-hover) !important;
    color: var(--tg-accent) !important;
    -webkit-text-fill-color: var(--tg-accent) !important;
    transform: translateY(-1px) !important;
}

.bm-theme-btn.is-active {
    background: var(--tg-accent-soft) !important;
    color: var(--tg-accent) !important;
    -webkit-text-fill-color: var(--tg-accent) !important;
}

/* Modales/selectores de grupos: se ven por encima y con colores correctos. */
.select2-container,
.select2-dropdown,
.select2-search,
.select2-results,
.bm-modal,
.bpbm-modal,
.bp-messages-modal,
.bp-messages-wrap .modal,
#bp-messages-full-screen-wrap .modal,
.bp-messages-wrap [role="dialog"],
#bp-messages-full-screen-wrap [role="dialog"] {
    z-index: 999999 !important;
}

.select2-dropdown,
.select2-container .select2-selection,
.select2-container .select2-results__option,
.select2-container .select2-search__field,
.bm-modal,
.bpbm-modal,
.bp-messages-modal,
.bp-messages-wrap .modal,
#bp-messages-full-screen-wrap .modal,
.bp-messages-wrap [role="dialog"],
#bp-messages-full-screen-wrap [role="dialog"] {
    background: var(--tg-panel) !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
    border-color: var(--tg-border) !important;
}

.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option[aria-selected="true"] {
    background: var(--tg-active) !important;
    color: var(--tg-text-strong) !important;
    -webkit-text-fill-color: var(--tg-text-strong) !important;
}

.select2-container .select2-selection__choice {
    background: var(--tg-accent-soft) !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
    border: 1px solid var(--tg-border) !important;
    border-radius: 999px !important;
}

/* Modal de avatar */
.wm-bm-avatar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(6, 12, 20, .58) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 18px !important;
    pointer-events: auto !important;
}

.wm-bm-avatar-overlay.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wm-bm-avatar-modal {
    position: relative !important;
    z-index: 2147483647 !important;
    width: min(430px, 100%) !important;
    background: var(--tg-panel) !important;
    color: var(--tg-text) !important;
    border: 1px solid var(--tg-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--tg-shadow) !important;
    padding: 20px !important;
}

.wm-bm-avatar-title {
    color: var(--tg-text-strong) !important;
    font-size: 20px !important;
    font-weight: 750 !important;
    margin-bottom: 14px !important;
    letter-spacing: -.02em !important;
}

.wm-bm-avatar-crop-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px 0 16px !important;
}

.wm-bm-avatar-crop-box {
    width: 260px !important;
    height: 260px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: var(--tg-input) !important;
    position: relative !important;
    border: 1px solid var(--tg-border) !important;
    touch-action: none !important;
}

.wm-bm-avatar-crop-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

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

.wm-bm-avatar-range {
    width: 100% !important;
    accent-color: var(--tg-accent) !important;
}

.wm-bm-avatar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-top: 16px !important;
}

.wm-bm-avatar-btn {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--tg-accent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer !important;
    padding: 10px 15px !important;
    font-weight: 700 !important;
    min-height: 40px !important;
}

.wm-bm-avatar-btn-secondary {
    background: var(--tg-input) !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
}

.wm-bm-avatar-status {
    color: var(--tg-muted) !important;
    margin-top: 10px !important;
    min-height: 18px !important;
    font-size: 13px !important;
}

/* Animación ligera para mensajes nuevos */
@keyframes wmTelegramMessageIn {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.wm-bm-message-new {
    animation: wmTelegramMessageIn .22s ease-out both !important;
}

/* Responsive sin ocultar columnas. */
@media (max-width: 782px) {
    html body .bp-messages-wrap.wm-telegram-ready:not(#bp-messages-full-screen-wrap) {
        border-radius: 0 !important;
        min-height: 78vh !important;
        box-shadow: none !important;
    }

    html body .bp-messages-wrap .bp-messages-side-threads,
    html body .bp-messages-wrap .threads-list-wrapper,
    html body #bp-messages-full-screen-wrap .bp-messages-side-threads,
    html body #bp-messages-full-screen-wrap .threads-list-wrapper {
        min-width: 260px !important;
        max-width: 100% !important;
    }

    html body .bp-messages-wrap .bm-message-content,
    html body #bp-messages-full-screen-wrap .bm-message-content {
        max-width: 88% !important;
    }

    .bm-footer-tools,
    .wm-bm-footer-tools {
        gap: 4px !important;
        margin-left: 4px !important;
    }

    .bm-theme-btn,
    .bm-avatar-btn,
    .wm-bm-tool-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 15px !important;
    }
}


@media (max-width: 782px) {
    html body .bp-messages-wrap .bp-messages-side-threads,
    html body .bp-messages-wrap .threads-list-wrapper,
    html body .bp-messages-wrap .chat-list,
    html body #bp-messages-full-screen-wrap .bp-messages-side-threads,
    html body #bp-messages-full-screen-wrap .threads-list-wrapper,
    html body #bp-messages-full-screen-wrap .chat-list {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   POWERCHAT TELEGRAM REPAIR PATCH - v1.0.6
   Corrige distorsiones visuales sin tocar el plugin Websocket by WMP.
   ========================================================================== */

/* 1) Evitar que emojis dentro de mensajes se vuelvan imágenes gigantes. */
html body .bp-messages-wrap .bm-message-content img.emoji,
html body .bp-messages-wrap .bm-message-content .emoji,
html body #bp-messages-full-screen-wrap .bm-message-content img.emoji,
html body #bp-messages-full-screen-wrap .bm-message-content .emoji {
    width: 1.18em !important;
    height: 1.18em !important;
    min-width: 1.18em !important;
    min-height: 1.18em !important;
    max-width: 1.18em !important;
    max-height: 1.18em !important;
    display: inline-block !important;
    vertical-align: -0.18em !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    margin: 0 .04em !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2) Avatares: no aplicar 42px a los grupos pequeños de Better Messages. */
html body .bp-messages-wrap .threads-list .thread .pic.group,
html body #bp-messages-full-screen-wrap .threads-list .thread .pic.group,
html body .bp-messages-wrap .avatar-group,
html body #bp-messages-full-screen-wrap .avatar-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: visible !important;
}

html body .bp-messages-wrap .threads-list .thread .pic.group span.avatar,
html body #bp-messages-full-screen-wrap .threads-list .thread .pic.group span.avatar,
html body .bp-messages-wrap .avatar-group span.avatar,
html body #bp-messages-full-screen-wrap .avatar-group span.avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin: -1px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

html body .bp-messages-wrap .threads-list .thread .pic.group img.avatar,
html body .bp-messages-wrap .threads-list .thread .pic.group img.avatar-15,
html body #bp-messages-full-screen-wrap .threads-list .thread .pic.group img.avatar,
html body #bp-messages-full-screen-wrap .threads-list .thread .pic.group img.avatar-15,
html body .bp-messages-wrap .avatar-group img.avatar,
html body .bp-messages-wrap .avatar-group img.avatar-15,
html body #bp-messages-full-screen-wrap .avatar-group img.avatar,
html body #bp-messages-full-screen-wrap .avatar-group img.avatar-15 {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

html body .bp-messages-wrap .chat-header .avatar-group,
html body #bp-messages-full-screen-wrap .chat-header .avatar-group {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
}

html body .bp-messages-wrap .chat-header .avatar-group span.avatar,
html body .bp-messages-wrap .chat-header .avatar-group img.avatar,
html body .bp-messages-wrap .chat-header .avatar-group img.avatar-15,
html body #bp-messages-full-screen-wrap .chat-header .avatar-group span.avatar,
html body #bp-messages-full-screen-wrap .chat-header .avatar-group img.avatar,
html body #bp-messages-full-screen-wrap .chat-header .avatar-group img.avatar-15 {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

/* Avatares normales: tamaños controlados por área. */
html body .bp-messages-wrap .threads-list .thread .pic:not(.group) img.avatar,
html body #bp-messages-full-screen-wrap .threads-list .thread .pic:not(.group) img.avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
}

html body .bp-messages-wrap .bm-messages-list .bm-message .avatar img,
html body .bp-messages-wrap .bm-messages-list img.avatar,
html body #bp-messages-full-screen-wrap .bm-messages-list .bm-message .avatar img,
html body #bp-messages-full-screen-wrap .bm-messages-list img.avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
}

html body .bp-messages-wrap .chat-header img.avatar,
html body #bp-messages-full-screen-wrap .chat-header img.avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
}

/* 3) Footer: mantener herramientas ordenadas, sin deformar el botón enviar. */
html body .bp-messages-wrap .chat-footer,
html body .bp-messages-wrap .bm-reply,
html body #bp-messages-full-screen-wrap .chat-footer,
html body #bp-messages-full-screen-wrap .bm-reply {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 62px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
}

html body .bp-messages-wrap .bm-editor,
html body .bp-messages-wrap .bm-editor-content,
html body #bp-messages-full-screen-wrap .bm-editor,
html body #bp-messages-full-screen-wrap .bm-editor-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 118px !important;
    border-radius: 22px !important;
}

html body .bp-messages-wrap .wm-bm-footer-tools,
html body .bp-messages-wrap .bm-footer-tools,
html body #bp-messages-full-screen-wrap .wm-bm-footer-tools,
html body #bp-messages-full-screen-wrap .bm-footer-tools {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    order: 40 !important;
}

html body .bp-messages-wrap .bm-theme-btn,
html body .bp-messages-wrap .bm-avatar-btn,
html body .bp-messages-wrap .wm-bm-tool-btn,
html body .bp-messages-wrap .bmre-refresh-app,
html body #bp-messages-full-screen-wrap .bm-theme-btn,
html body #bp-messages-full-screen-wrap .bm-avatar-btn,
html body #bp-messages-full-screen-wrap .wm-bm-tool-btn,
html body #bp-messages-full-screen-wrap .bmre-refresh-app {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 17px !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .bp-messages-wrap .bm-send-message,
html body .bp-messages-wrap .chat-footer button[type="submit"]:not(.wm-bm-tool-btn):not(.bm-theme-btn):not(.bm-avatar-btn):not(.bmre-refresh-app),
html body .bp-messages-wrap .bm-reply button[type="submit"]:not(.wm-bm-tool-btn):not(.bm-theme-btn):not(.bm-avatar-btn):not(.bmre-refresh-app),
html body #bp-messages-full-screen-wrap .bm-send-message,
html body #bp-messages-full-screen-wrap .chat-footer button[type="submit"]:not(.wm-bm-tool-btn):not(.bm-theme-btn):not(.bm-avatar-btn):not(.bmre-refresh-app),
html body #bp-messages-full-screen-wrap .bm-reply button[type="submit"]:not(.wm-bm-tool-btn):not(.bm-theme-btn):not(.bm-avatar-btn):not(.bmre-refresh-app) {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 52px !important;
    overflow: hidden !important;
    line-height: 1 !important;
    aspect-ratio: 1 / 1 !important;
}

html body .bp-messages-wrap .bm-send-message svg,
html body .bp-messages-wrap .bm-send-message img,
html body .bp-messages-wrap .chat-footer button[type="submit"] svg,
html body .bp-messages-wrap .chat-footer button[type="submit"] img,
html body #bp-messages-full-screen-wrap .bm-send-message svg,
html body #bp-messages-full-screen-wrap .bm-send-message img,
html body #bp-messages-full-screen-wrap .chat-footer button[type="submit"] svg,
html body #bp-messages-full-screen-wrap .chat-footer button[type="submit"] img {
    pointer-events: none !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 4) Adjuntos, previews y etiquetas: evitar textos o chips gigantes. */
html body .bp-messages-wrap .bm-attachment,
html body .bp-messages-wrap .bpbm-attachment,
html body .bp-messages-wrap .bm-message-content .bm-attachment,
html body #bp-messages-full-screen-wrap .bm-attachment,
html body #bp-messages-full-screen-wrap .bpbm-attachment,
html body #bp-messages-full-screen-wrap .bm-message-content .bm-attachment {
    font-size: 13px !important;
    line-height: 1.25 !important;
    max-width: min(520px, 100%) !important;
}

html body .bp-messages-wrap :where(.bm-attachment a, .bpbm-attachment a, .bm-file, .bm-file-name, .bm-attachment-name, .bpbm-attachment-title, .bpbm-file-name, .link-preview, .link-preview *, .bm-link-preview, .bm-link-preview *),
html body #bp-messages-full-screen-wrap :where(.bm-attachment a, .bpbm-attachment a, .bm-file, .bm-file-name, .bm-attachment-name, .bpbm-attachment-title, .bpbm-file-name, .link-preview, .link-preview *, .bm-link-preview, .bm-link-preview *) {
    font-size: 13px !important;
    line-height: 1.28 !important;
    max-height: none !important;
}

html body .bp-messages-wrap :where(.bm-thread-icon, .bm-thread-icon svg, .thread-actions svg, .chat-header svg),
html body #bp-messages-full-screen-wrap :where(.bm-thread-icon, .bm-thread-icon svg, .thread-actions svg, .chat-header svg) {
    width: 1em !important;
    height: 1em !important;
    max-width: 1.15em !important;
    max-height: 1.15em !important;
}

/* 5) Tipografía más compacta para la lista y etiquetas de conversación. */
html body .bp-messages-wrap .threads-list .thread h4,
html body .bp-messages-wrap .threads-list .thread .name,
html body .bp-messages-wrap .bpbm-chat-list-item .name,
html body #bp-messages-full-screen-wrap .threads-list .thread h4,
html body #bp-messages-full-screen-wrap .threads-list .thread .name,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .name {
    font-size: 15px !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
}

html body .bp-messages-wrap .threads-list .thread .bm-info,
html body .bp-messages-wrap .threads-list .thread .last-message,
html body .bp-messages-wrap .threads-list .thread .excerpt,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info,
html body #bp-messages-full-screen-wrap .threads-list .thread .last-message,
html body #bp-messages-full-screen-wrap .threads-list .thread .excerpt {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
}

@media (max-width: 1100px) {
    html body .bp-messages-wrap .wm-bm-footer-tools,
    html body .bp-messages-wrap .bm-footer-tools,
    html body #bp-messages-full-screen-wrap .wm-bm-footer-tools,
    html body #bp-messages-full-screen-wrap .bm-footer-tools {
        gap: 3px !important;
    }

    html body .bp-messages-wrap .bm-theme-btn,
    html body .bp-messages-wrap .bm-avatar-btn,
    html body .bp-messages-wrap .wm-bm-tool-btn,
    html body .bp-messages-wrap .bmre-refresh-app,
    html body #bp-messages-full-screen-wrap .bm-theme-btn,
    html body #bp-messages-full-screen-wrap .bm-avatar-btn,
    html body #bp-messages-full-screen-wrap .wm-bm-tool-btn,
    html body #bp-messages-full-screen-wrap .bmre-refresh-app {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        font-size: 15px !important;
    }

    html body .bp-messages-wrap .bm-send-message,
    html body .bp-messages-wrap .chat-footer button[type="submit"]:not(.wm-bm-tool-btn):not(.bm-theme-btn):not(.bm-avatar-btn):not(.bmre-refresh-app),
    html body #bp-messages-full-screen-wrap .bm-send-message,
    html body #bp-messages-full-screen-wrap .chat-footer button[type="submit"]:not(.wm-bm-tool-btn):not(.bm-theme-btn):not(.bm-avatar-btn):not(.bmre-refresh-app) {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        flex-basis: 46px !important;
    }
}


/* ==========================================================================
   v1.0.7 - FIX: last-message avatars and attachment preview icons
   Better Messages uses small avatars inside .last-message. A previous broad
   avatar rule made those 42px and caused overlap in the thread list.
   ========================================================================== */

/* Thread row must keep avatar/title/message in their own lanes. */
html body .bp-messages-wrap .threads-list .thread,
html body .bp-messages-wrap .bm-thread,
html body .bp-messages-wrap .bpbm-chat-list-item,
html body #bp-messages-full-screen-wrap .threads-list .thread,
html body #bp-messages-full-screen-wrap .bm-thread,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item {
    min-height: 68px !important;
    overflow: hidden !important;
}

/* Last message line: compact horizontal row with ellipsis. */
html body .bp-messages-wrap .last-message,
html body .bp-messages-wrap .bm-last-message,
html body #bp-messages-full-screen-wrap .last-message,
html body #bp-messages-full-screen-wrap .bm-last-message {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1.22 !important;
}

/* The small sender avatar inside the last-message preview must stay tiny. */
html body .bp-messages-wrap .bm-last-message-avatar,
html body #bp-messages-full-screen-wrap .bm-last-message-avatar {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 3px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    vertical-align: middle !important;
}

/* Override the broad .avatar/img.avatar 42px rule specifically for previews. */
html body .bp-messages-wrap .bm-last-message-avatar .avatar,
html body .bp-messages-wrap .bm-last-message-avatar span.avatar,
html body .bp-messages-wrap .bm-last-message-avatar img.avatar,
html body .bp-messages-wrap .bm-last-message-avatar .bbpm-avatar,
html body .bp-messages-wrap .bm-last-message-avatar .bbpm-avatar img,
html body #bp-messages-full-screen-wrap .bm-last-message-avatar .avatar,
html body #bp-messages-full-screen-wrap .bm-last-message-avatar span.avatar,
html body #bp-messages-full-screen-wrap .bm-last-message-avatar img.avatar,
html body #bp-messages-full-screen-wrap .bm-last-message-avatar .bbpm-avatar,
html body #bp-messages-full-screen-wrap .bm-last-message-avatar .bbpm-avatar img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Content side of the last message must be allowed to shrink. */
html body .bp-messages-wrap .bm-last-message-content,
html body #bp-messages-full-screen-wrap .bm-last-message-content {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Rich preview like "1 attachment": compact icon + text, not a large label. */
html body .bp-messages-wrap .last-message-rich,
html body #bp-messages-full-screen-wrap .last-message-rich {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
}

/* Attachment/document SVG in thread preview. */
html body .bp-messages-wrap .last-message-rich svg,
html body .bp-messages-wrap .bm-last-message-content svg,
html body #bp-messages-full-screen-wrap .last-message-rich svg,
html body #bp-messages-full-screen-wrap .bm-last-message-content svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex: 0 0 14px !important;
    display: inline-block !important;
    vertical-align: -2px !important;
    margin: 0 !important;
}

/* Group avatar stacks should not overflow over the thread text. */
html body .bp-messages-wrap .threads-list .thread .avatar-group,
html body .bp-messages-wrap .bm-thread .avatar-group,
html body .bp-messages-wrap .bpbm-chat-list-item .avatar-group,
html body #bp-messages-full-screen-wrap .threads-list .thread .avatar-group,
html body #bp-messages-full-screen-wrap .bm-thread .avatar-group,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .avatar-group {
    max-width: 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    flex: 0 0 58px !important;
    overflow: visible !important;
}

/* Smaller group-stack images only; main single thread avatars stay 42px. */
html body .bp-messages-wrap .threads-list .thread .avatar-group img.avatar,
html body .bp-messages-wrap .bm-thread .avatar-group img.avatar,
html body .bp-messages-wrap .bpbm-chat-list-item .avatar-group img.avatar,
html body #bp-messages-full-screen-wrap .threads-list .thread .avatar-group img.avatar,
html body #bp-messages-full-screen-wrap .bm-thread .avatar-group img.avatar,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .avatar-group img.avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
}

/* The title and preview block should never sit under avatars. */
html body .bp-messages-wrap .threads-list .thread :where(.thread-info, .bm-info, .content, .thread-content),
html body .bp-messages-wrap .bm-thread :where(.thread-info, .bm-info, .content, .thread-content),
html body .bp-messages-wrap .bpbm-chat-list-item :where(.thread-info, .bm-info, .content, .thread-content),
html body #bp-messages-full-screen-wrap .threads-list .thread :where(.thread-info, .bm-info, .content, .thread-content),
html body #bp-messages-full-screen-wrap .bm-thread :where(.thread-info, .bm-info, .content, .thread-content),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item :where(.thread-info, .bm-info, .content, .thread-content) {
    min-width: 0 !important;
    overflow: hidden !important;
}


/* ==========================================================================
   v1.0.8 - FIX: thread list text containment / cleaner Telegram rows
   Corrige textos que se salen del margen en la lista lateral.
   ========================================================================== */

/* Cada fila de conversación debe recortar contenido interno, no dejar que el texto invada el margen derecho. */
html body .bp-messages-wrap .threads-list .thread,
html body .bp-messages-wrap .bm-thread,
html body .bp-messages-wrap .bpbm-chat-list-item,
html body #bp-messages-full-screen-wrap .threads-list .thread,
html body #bp-messages-full-screen-wrap .bm-thread,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item {
    position: relative !important;
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Contenedores internos: permiten ellipsis real dentro de flex/grid. */
html body .bp-messages-wrap .threads-list .thread :where(.thread-info, .bm-info, .content, .thread-content, .bm-thread-content, .bpbm-thread-content, .bm-thread-info),
html body .bp-messages-wrap .bm-thread :where(.thread-info, .bm-info, .content, .thread-content, .bm-thread-content, .bpbm-thread-content, .bm-thread-info),
html body .bp-messages-wrap .bpbm-chat-list-item :where(.thread-info, .bm-info, .content, .thread-content, .bm-thread-content, .bpbm-thread-content, .bm-thread-info),
html body #bp-messages-full-screen-wrap .threads-list .thread :where(.thread-info, .bm-info, .content, .thread-content, .bm-thread-content, .bpbm-thread-content, .bm-thread-info),
html body #bp-messages-full-screen-wrap .bm-thread :where(.thread-info, .bm-info, .content, .thread-content, .bm-thread-content, .bpbm-thread-content, .bm-thread-info),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item :where(.thread-info, .bm-info, .content, .thread-content, .bm-thread-content, .bpbm-thread-content, .bm-thread-info) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Nombre del chat: una sola línea limpia. */
html body .bp-messages-wrap .threads-list .thread :where(h4, .name, .thread-name, .bm-thread-name),
html body .bp-messages-wrap .bm-thread :where(h4, .name, .thread-name, .bm-thread-name),
html body .bp-messages-wrap .bpbm-chat-list-item :where(h4, .name, .thread-name, .bm-thread-name),
html body #bp-messages-full-screen-wrap .threads-list .thread :where(h4, .name, .thread-name, .bm-thread-name),
html body #bp-messages-full-screen-wrap .bm-thread :where(h4, .name, .thread-name, .bm-thread-name),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item :where(h4, .name, .thread-name, .bm-thread-name) {
    display: block !important;
    min-width: 0 !important;
    max-width: calc(100% - 76px) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

/* Último mensaje: máximo dos líneas, sin salirse del item. */
html body .bp-messages-wrap .threads-list .thread :where(.last-message, .bm-last-message, .excerpt, .message, .bm-message-preview),
html body .bp-messages-wrap .bm-thread :where(.last-message, .bm-last-message, .excerpt, .message, .bm-message-preview),
html body .bp-messages-wrap .bpbm-chat-list-item :where(.last-message, .bm-last-message, .excerpt, .message, .bm-message-preview),
html body #bp-messages-full-screen-wrap .threads-list .thread :where(.last-message, .bm-last-message, .excerpt, .message, .bm-message-preview),
html body #bp-messages-full-screen-wrap .bm-thread :where(.last-message, .bm-last-message, .excerpt, .message, .bm-message-preview),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item :where(.last-message, .bm-last-message, .excerpt, .message, .bm-message-preview) {
    min-width: 0 !important;
    max-width: calc(100% - 46px) !important;
    overflow: hidden !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
}

/* Si el texto viene como nodos internos, también se recorta. */
html body .bp-messages-wrap .bm-last-message-content,
html body .bp-messages-wrap .last-message-rich,
html body #bp-messages-full-screen-wrap .bm-last-message-content,
html body #bp-messages-full-screen-wrap .last-message-rich {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hora y badge de no leídos: siempre a la derecha, sin empujar el texto. */
html body .bp-messages-wrap .threads-list .thread :where(.time, time, .bm-time, .unread-count, .bm-unread, .counter),
html body .bp-messages-wrap .bm-thread :where(.time, time, .bm-time, .unread-count, .bm-unread, .counter),
html body .bp-messages-wrap .bpbm-chat-list-item :where(.time, time, .bm-time, .unread-count, .bm-unread, .counter),
html body #bp-messages-full-screen-wrap .threads-list .thread :where(.time, time, .bm-time, .unread-count, .bm-unread, .counter),
html body #bp-messages-full-screen-wrap .bm-thread :where(.time, time, .bm-time, .unread-count, .bm-unread, .counter),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item :where(.time, time, .bm-time, .unread-count, .bm-unread, .counter) {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Avatar principal y stack de grupo: no deben invadir el bloque de texto. */
html body .bp-messages-wrap .threads-list .thread > :where(.avatar, .avatar-group, .bm-avatar, .thread-avatar),
html body .bp-messages-wrap .bm-thread > :where(.avatar, .avatar-group, .bm-avatar, .thread-avatar),
html body .bp-messages-wrap .bpbm-chat-list-item > :where(.avatar, .avatar-group, .bm-avatar, .thread-avatar),
html body #bp-messages-full-screen-wrap .threads-list .thread > :where(.avatar, .avatar-group, .bm-avatar, .thread-avatar),
html body #bp-messages-full-screen-wrap .bm-thread > :where(.avatar, .avatar-group, .bm-avatar, .thread-avatar),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item > :where(.avatar, .avatar-group, .bm-avatar, .thread-avatar) {
    flex: 0 0 auto !important;
    z-index: 1 !important;
}

/* Mejor estética para filas activas/hover sin romper el layout. */
html body .bp-messages-wrap .threads-list .thread.active,
html body .bp-messages-wrap .threads-list .thread.bp-messages-active-thread,
html body .bp-messages-wrap .bm-thread.active,
html body .bp-messages-wrap .bpbm-chat-list-item.active,
html body #bp-messages-full-screen-wrap .threads-list .thread.active,
html body #bp-messages-full-screen-wrap .threads-list .thread.bp-messages-active-thread,
html body #bp-messages-full-screen-wrap .bm-thread.active,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item.active {
    background: linear-gradient(90deg, var(--tg-active), rgba(42,171,238,.10)) !important;
    box-shadow: inset 3px 0 0 var(--tg-accent) !important;
}

html body .bp-messages-wrap .threads-list .thread:hover,
html body .bp-messages-wrap .bm-thread:hover,
html body .bp-messages-wrap .bpbm-chat-list-item:hover,
html body #bp-messages-full-screen-wrap .threads-list .thread:hover,
html body #bp-messages-full-screen-wrap .bm-thread:hover,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item:hover {
    background: rgba(42,171,238,.08) !important;
}

/* En pantallas estrechas, reduce un poco el título para que no empuje el layout. */
@media (max-width: 900px) {
    html body .bp-messages-wrap .threads-list .thread :where(h4, .name, .thread-name, .bm-thread-name),
    html body .bp-messages-wrap .bm-thread :where(h4, .name, .thread-name, .bm-thread-name),
    html body .bp-messages-wrap .bpbm-chat-list-item :where(h4, .name, .thread-name, .bm-thread-name),
    html body #bp-messages-full-screen-wrap .threads-list .thread :where(h4, .name, .thread-name, .bm-thread-name),
    html body #bp-messages-full-screen-wrap .bm-thread :where(h4, .name, .thread-name, .bm-thread-name),
    html body #bp-messages-full-screen-wrap .bpbm-chat-list-item :where(h4, .name, .thread-name, .bm-thread-name) {
        font-size: 14px !important;
        max-width: calc(100% - 64px) !important;
    }
}


/* ==========================================================================
   v1.0.9 - FIX DEFINITIVO: preview/last-message dentro de .bm-info
   El HTML real usa:
   .bm-info > h4 + .last-message > .bm-last-message-avatar + .bm-last-message-content
   Por eso los fixes genéricos anteriores no siempre aplicaban.
   ========================================================================== */

/* El bloque de info debe poder encogerse dentro del item. */
html body .bp-messages-wrap .threads-list .thread .bm-info,
html body .bp-messages-wrap .bm-thread .bm-info,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: block !important;
}

/* Título del chat/grupo: recortado con espacio reservado para iconos. */
html body .bp-messages-wrap .threads-list .thread .bm-info > h4,
html body .bp-messages-wrap .bm-thread .bm-info > h4,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > h4,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > h4,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > h4,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > h4 {
    display: block !important;
    width: 100% !important;
    max-width: calc(100% - 58px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.18 !important;
}

/* Iconos de pin/mute dentro del título: pequeños y alineados. */
html body .bp-messages-wrap .threads-list .thread .bm-info > h4 .bm-thread-icon,
html body .bp-messages-wrap .bm-thread .bm-info > h4 .bm-thread-icon,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > h4 .bm-thread-icon,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > h4 .bm-thread-icon,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > h4 .bm-thread-icon,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > h4 .bm-thread-icon {
    display: inline-flex !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    vertical-align: -2px !important;
}

/* La línea del último mensaje: grid compacto, no flex abierto. */
html body .bp-messages-wrap .threads-list .thread .bm-info > .last-message,
html body .bp-messages-wrap .bm-thread .bm-info > .last-message,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > .last-message,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > .last-message,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > .last-message,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > .last-message {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: calc(100% - 42px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Avatar pequeño del remitente en el preview. */
html body .bp-messages-wrap .threads-list .thread .bm-info > .last-message .bm-last-message-avatar,
html body .bp-messages-wrap .bm-thread .bm-info > .last-message .bm-last-message-avatar,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > .last-message .bm-last-message-avatar,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > .last-message .bm-last-message-avatar,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > .last-message .bm-last-message-avatar,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > .last-message .bm-last-message-avatar {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 1 !important;
}

/* Todos los spans/img internos del avatar preview se fuerzan a 16px. */
html body .bp-messages-wrap .threads-list .thread .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar),
html body .bp-messages-wrap .bm-thread .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar),
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar),
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar),
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar),
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
}

/* Texto del preview: recorte real con ellipsis. */
html body .bp-messages-wrap .threads-list .thread .bm-info > .last-message .bm-last-message-content,
html body .bp-messages-wrap .bm-thread .bm-info > .last-message .bm-last-message-content,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > .last-message .bm-last-message-content,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > .last-message .bm-last-message-content,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > .last-message .bm-last-message-content,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > .last-message .bm-last-message-content {
    grid-column: 2 !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

/* Si Better Messages pone rich preview dentro del content. */
html body .bp-messages-wrap .threads-list .thread .bm-info > .last-message .last-message-rich,
html body .bp-messages-wrap .bm-thread .bm-info > .last-message .last-message-rich,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > .last-message .last-message-rich,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > .last-message .last-message-rich,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > .last-message .last-message-rich,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > .last-message .last-message-rich {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* SVGs como clip/documento en el preview. */
html body .bp-messages-wrap .threads-list .thread .bm-info > .last-message svg,
html body .bp-messages-wrap .bm-thread .bm-info > .last-message svg,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info > .last-message svg,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info > .last-message svg,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info > .last-message svg,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info > .last-message svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    flex: 0 0 13px !important;
    vertical-align: -2px !important;
}

/* Reserva derecha para hora/badge y evita que el texto pase por debajo. */
html body .bp-messages-wrap .threads-list .thread .bm-info,
html body .bp-messages-wrap .bm-thread .bm-info,
html body .bp-messages-wrap .bpbm-chat-list-item .bm-info,
html body #bp-messages-full-screen-wrap .threads-list .thread .bm-info,
html body #bp-messages-full-screen-wrap .bm-thread .bm-info,
html body #bp-messages-full-screen-wrap .bpbm-chat-list-item .bm-info {
    padding-right: 46px !important;
}


/* ==========================================================================
   v1.1.0 - FIX: thread list layout reset using the real Better Messages DOM
   Real DOM: .thread > .pic + .bm-info + .time + .actions
   This replaces the over-aggressive v1.0.8/v1.0.9 containment rules visually.
   ========================================================================== */

/* Sidebar safety: avoid horizontal overflow. */
html body .bp-messages-wrap .threads-list,
html body #bp-messages-full-screen-wrap .threads-list,
html body .bp-messages-wrap .threads-list-wrapper,
html body #bp-messages-full-screen-wrap .threads-list-wrapper {
    overflow-x: hidden !important;
}

/* Each conversation row uses a clean 3-column grid:
   avatar stack | text area | time/unread area */
html body .bp-messages-wrap .threads-list > .thread,
html body #bp-messages-full-screen-wrap .threads-list > .thread {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 62px !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 74px !important;
    padding: 10px 8px 10px 12px !important;
    margin: 2px 4px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* Avatar block: fixed lane. */
html body .bp-messages-wrap .threads-list > .thread > .pic,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    display: block !important;
    align-self: center !important;
    justify-self: center !important;
    position: relative !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Group avatar stack inside .pic.group: compact 2x2 style. */
html body .bp-messages-wrap .threads-list > .thread > .pic.group .avatar,
html body .bp-messages-wrap .threads-list > .thread > .pic.group .bbpm-avatar,
html body .bp-messages-wrap .threads-list > .thread > .pic.group img.avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group .avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group .bbpm-avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group img.avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Single avatar in direct chats. */
html body .bp-messages-wrap .threads-list > .thread > .pic:not(.group) .avatar,
html body .bp-messages-wrap .threads-list > .thread > .pic:not(.group) .bbpm-avatar,
html body .bp-messages-wrap .threads-list > .thread > .pic:not(.group) img.avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic:not(.group) .avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic:not(.group) .bbpm-avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic:not(.group) img.avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Text block: fixed in middle lane. Remove previous padding/max-width restrictions. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Title: one line, no forced narrow width. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > h4,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > h4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
}

/* Pin/mute icons inside title: compact. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > h4 .bm-thread-icon,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > h4 .bm-thread-icon {
    display: inline-flex !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    margin-left: 4px !important;
    vertical-align: -2px !important;
}

/* Last message preview: fixed avatar + ellipsis text. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
}

/* Some direct chats do not have .bm-last-message-avatar: then make content span full width. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message:not(:has(.bm-last-message-avatar)),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message:not(:has(.bm-last-message-avatar)) {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Preview sender avatar. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-avatar {
    grid-column: 1 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-avatar :where(.avatar, .bbpm-avatar, img.avatar) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Preview text: never overflow. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-content,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Attachment rich preview inside content: inline, not block. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message .last-message-rich,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message .last-message-rich {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

/* Icons in preview. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message svg,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    flex: 0 0 13px !important;
}

/* Right time / unread lane. */
html body .bp-messages-wrap .threads-list > .thread > .time,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .time {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
}

/* Keep action dots out of layout unless user hovers. */
html body .bp-messages-wrap .threads-list > .thread > .actions,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .actions {
    position: absolute !important;
    right: 6px !important;
    top: 8px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html body .bp-messages-wrap .threads-list > .thread:hover > .actions,
html body #bp-messages-full-screen-wrap .threads-list > .thread:hover > .actions {
    opacity: .75 !important;
    pointer-events: auto !important;
}

/* Active row styling with no layout damage. */
html body .bp-messages-wrap .threads-list > .thread.bp-messages-active-thread,
html body .bp-messages-wrap .threads-list > .thread.active,
html body #bp-messages-full-screen-wrap .threads-list > .thread.bp-messages-active-thread,
html body #bp-messages-full-screen-wrap .threads-list > .thread.active {
    background: linear-gradient(90deg, var(--tg-active), rgba(42,171,238,.10)) !important;
    box-shadow: inset 3px 0 0 var(--tg-accent) !important;
}

/* Very narrow sidebar fallback. */
@media (max-width: 900px) {
    html body .bp-messages-wrap .threads-list > .thread,
    html body #bp-messages-full-screen-wrap .threads-list > .thread {
        grid-template-columns: 50px minmax(0, 1fr) 54px !important;
        column-gap: 8px !important;
        padding-left: 8px !important;
        padding-right: 6px !important;
    }
    html body .bp-messages-wrap .threads-list > .thread > .time,
    html body #bp-messages-full-screen-wrap .threads-list > .thread > .time {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        font-size: 10px !important;
    }
}


/* ==========================================================================
   v1.1.1 - FIX: own-message preview, cleaner composer, compact group avatars
   ========================================================================== */

/* 1) Direct/own last-message preview: when there is no sender avatar,
   the text must start in column 1, not jump to the right. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message:not(:has(.bm-last-message-avatar)) .bm-last-message-content,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message:not(:has(.bm-last-message-avatar)) .bm-last-message-content {
    grid-column: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Prevent previous rules or inline structures from centering the preview. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message {
    justify-content: start !important;
    justify-items: stretch !important;
    text-align: left !important;
}

/* 2) Composer/footer: clean Telegram-like layout without oval send button. */
html body .bp-messages-wrap .bm-reply.bm-attachments,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 40px 40px 54px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    min-height: 64px !important;
    background: var(--tg-footer) !important;
    border-top: 1px solid var(--tg-border) !important;
    box-shadow: 0 -8px 22px rgba(0,0,0,.10) !important;
}

/* Attachment icon button. */
html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-attachment,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-attachment {
    grid-column: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.035) !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Editor pill. */
html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-editor,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-editor {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    max-height: 130px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--tg-input) !important;
    border: 1px solid transparent !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 16px !important;
}

html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-editor:focus-within,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-editor:focus-within {
    background: var(--tg-input-focus) !important;
    border-color: rgba(42,171,238,.55) !important;
    box-shadow: 0 0 0 3px var(--tg-accent-soft) !important;
}

html body .bp-messages-wrap .bm-reply.bm-attachments .bm-editor-content,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments .bm-editor-content {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    max-height: 112px !important;
    overflow-y: auto !important;
    padding: 7px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

/* Sticker and emoji buttons. */
html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-stickers,
html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-emojies,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-stickers,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-emojies {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tg-muted) !important;
    -webkit-text-fill-color: var(--tg-muted) !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-stickers { grid-column: 3 !important; }
html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-emojies { grid-column: 4 !important; }
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-stickers { grid-column: 3 !important; }
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-emojies { grid-column: 4 !important; }

/* Send button: always circular, never oval. */
html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-send-message,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-send-message {
    grid-column: 5 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--tg-accent), var(--tg-accent-hover)) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 10px 24px rgba(42,171,238,.28) !important;
    transform: none !important;
}

html body .bp-messages-wrap .bm-reply.bm-attachments svg,
html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* 3) Compact and cleaner group avatars in the thread list. */
html body .bp-messages-wrap .threads-list > .thread > .pic.group,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    position: relative !important;
    border-radius: 16px !important;
    overflow: visible !important;
}

/* Use explicit positions instead of the native loose stack. */
html body .bp-messages-wrap .threads-list > .thread > .pic.group > .avatar,
html body .bp-messages-wrap .threads-list > .thread > .pic.group > .bbpm-avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .bbpm-avatar {
    position: absolute !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 2px var(--tg-sidebar), 0 3px 8px rgba(0,0,0,.20) !important;
    background: var(--tg-input) !important;
}

html body .bp-messages-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(1),
html body .bp-messages-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(1),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(1),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(1) {
    left: 3px !important;
    top: 3px !important;
    z-index: 4 !important;
}

html body .bp-messages-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(2),
html body .bp-messages-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(2),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(2),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(2) {
    right: 3px !important;
    top: 3px !important;
    z-index: 3 !important;
}

html body .bp-messages-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(3),
html body .bp-messages-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(3),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(3),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(3) {
    left: 3px !important;
    bottom: 3px !important;
    z-index: 2 !important;
}

html body .bp-messages-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(4),
html body .bp-messages-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(4),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .avatar:nth-child(4),
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group > .bbpm-avatar:nth-child(4) {
    right: 3px !important;
    bottom: 3px !important;
    z-index: 1 !important;
}

html body .bp-messages-wrap .threads-list > .thread > .pic.group img.avatar,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic.group img.avatar {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Slightly reduce avatar column to gain text space. */
html body .bp-messages-wrap .threads-list > .thread,
html body #bp-messages-full-screen-wrap .threads-list > .thread {
    grid-template-columns: 50px minmax(0, 1fr) 62px !important;
}


/* ==========================================================================
   v1.1.2 - CLEANUP: remove hover/inner lines from thread list
   ========================================================================== */

/* Remove the thin horizontal lines/blocks created by earlier Telegram repairs. */
html body .bp-messages-wrap .threads-list > .thread,
html body .bp-messages-wrap .threads-list > .thread *,
html body #bp-messages-full-screen-wrap .threads-list > .thread,
html body #bp-messages-full-screen-wrap .threads-list > .thread * {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

html body .bp-messages-wrap .threads-list > .thread > .bm-info,
html body .bp-messages-wrap .threads-list > .thread > .bm-info > h4,
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message,
html body .bp-messages-wrap .threads-list > .thread > .time,
html body .bp-messages-wrap .threads-list > .thread > .pic,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > h4,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .time,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .pic {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Disable hover visual change. It should look the same with or without mouse. */
html body .bp-messages-wrap .threads-list > .thread:hover,
html body .bp-messages-wrap .threads-list > .thread:hover > .bm-info,
html body .bp-messages-wrap .threads-list > .thread:hover > .time,
html body .bp-messages-wrap .threads-list > .thread:hover > .pic,
html body #bp-messages-full-screen-wrap .threads-list > .thread:hover,
html body #bp-messages-full-screen-wrap .threads-list > .thread:hover > .bm-info,
html body #bp-messages-full-screen-wrap .threads-list > .thread:hover > .time,
html body #bp-messages-full-screen-wrap .threads-list > .thread:hover > .pic {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Active row keeps a clean selected state, but no inner bars/lines. */
html body .bp-messages-wrap .threads-list > .thread.bp-messages-active-thread,
html body .bp-messages-wrap .threads-list > .thread.active,
html body #bp-messages-full-screen-wrap .threads-list > .thread.bp-messages-active-thread,
html body #bp-messages-full-screen-wrap .threads-list > .thread.active {
    background: rgba(42, 171, 238, .14) !important;
    box-shadow: inset 3px 0 0 var(--tg-accent) !important;
}

html body .bp-messages-wrap .threads-list > .thread.bp-messages-active-thread:hover,
html body .bp-messages-wrap .threads-list > .thread.active:hover,
html body #bp-messages-full-screen-wrap .threads-list > .thread.bp-messages-active-thread:hover,
html body #bp-messages-full-screen-wrap .threads-list > .thread.active:hover {
    background: rgba(42, 171, 238, .14) !important;
    box-shadow: inset 3px 0 0 var(--tg-accent) !important;
}

/* Keep actions hidden without affecting row width. */
html body .bp-messages-wrap .threads-list > .thread > .actions,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .actions {
    display: none !important;
}

/* Preserve compact preview layout. */
html body .bp-messages-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-content,
html body #bp-messages-full-screen-wrap .threads-list > .thread > .bm-info > .last-message .bm-last-message-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   v1.1.5 - SAFE MOBILE ROLLBACK
   Base: v1.1.2. Removes the aggressive mobile column rules from v1.1.3/v1.1.4.
   This keeps Better Messages' native mobile navigation intact.
   ========================================================================== */

/* Important: do NOT override .bp-messages-threads-wrapper,
   .bp-messages-column, .threads-list-wrapper, or transforms on mobile.
   Better Messages uses those for its mobile slide navigation. */

/* Safe mobile composer only: no column/list hiding. */
@media (max-width: 768px) {
    html,
    html body,
    html.bmre-early-fullscreen,
    html.bmre-early-fullscreen body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        background: #0b141a !important;
    }

    html body .bp-messages-wrap .bm-reply.bm-attachments,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) 34px 34px 48px !important;
        gap: 5px !important;
        min-height: 60px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 7px 8px !important;
        overflow: visible !important;
    }

    html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-attachment,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-attachment {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        border-radius: 13px !important;
    }

    html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-editor,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-editor {
        min-height: 40px !important;
        border-radius: 20px !important;
        padding: 0 12px !important;
        min-width: 0 !important;
    }

    html body .bp-messages-wrap .bm-reply.bm-attachments .bm-editor-content,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments .bm-editor-content {
        font-size: 14px !important;
        min-width: 0 !important;
    }

    html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-stickers,
    html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-emojies,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-stickers,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-emojies {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    html body .bp-messages-wrap .bm-reply.bm-attachments > .bm-send-message,
    html body #bp-messages-full-screen-wrap .bm-reply.bm-attachments > .bm-send-message {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        border-radius: 50% !important;
    }

    /* Message/media containment only, safe. */
    html body .bp-messages-wrap .bm-message-content,
    html body #bp-messages-full-screen-wrap .bm-message-content {
        max-width: calc(100vw - 78px) !important;
    }

    html body .bp-messages-wrap .bm-message-content img,
    html body #bp-messages-full-screen-wrap .bm-message-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Avatar/profile modal mobile fix, safe. */
    html body .wm-bm-avatar-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        overflow: auto !important;
    }

    html body .wm-bm-avatar-modal {
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        max-height: calc(100vh - 32px) !important;
        padding: 16px !important;
        border-radius: 18px !important;
        overflow: auto !important;
    }

    html body .wm-bm-avatar-crop-wrap {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        margin: 0 auto 14px auto !important;
        overflow: hidden !important;
    }

    html body .wm-bm-avatar-crop-area,
    html body .wm-bm-avatar-crop-box {
        max-width: 240px !important;
        max-height: 240px !important;
        width: min(240px, calc(100vw - 72px)) !important;
        height: min(240px, calc(100vw - 72px)) !important;
    }

    html body .wm-bm-avatar-preview,
    html body .wm-bm-avatar-crop-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    html body .wm-bm-avatar-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    html body .wm-bm-avatar-actions button,
    html body .wm-bm-avatar-modal button {
        min-height: 38px !important;
        padding: 8px 14px !important;
        border-radius: 18px !important;
        font-size: 13px !important;
    }
}

/* Optional chat background variable, safe.
   Replace none with url("https://.../your-background.webp") when needed. */
:root {
    --wm-powerchat-bg-image: none;
}

html body .bp-messages-wrap .bm-messages-column,
html body .bp-messages-wrap .bp-messages-column,
html body .bp-messages-wrap .bm-list,
html body .bp-messages-wrap .bm-list-content,
html body #bp-messages-full-screen-wrap .bm-messages-column,
html body #bp-messages-full-screen-wrap .bp-messages-column,
html body #bp-messages-full-screen-wrap .bm-list,
html body #bp-messages-full-screen-wrap .bm-list-content {
    background-image:
        var(--wm-powerchat-bg-image),
        radial-gradient(circle at 20% 15%, var(--tg-wall-a) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, var(--tg-wall-b) 0 1px, transparent 1px),
        radial-gradient(circle at 35% 70%, var(--tg-wall-b) 0 1px, transparent 1px),
        linear-gradient(135deg, var(--tg-chat), var(--tg-chat-deep)) !important;
    background-size: auto, 34px 34px, 42px 42px, 48px 48px, auto !important;
    background-position: center center, 0 0, 0 0, 0 0, center center !important;
    background-repeat: no-repeat, repeat, repeat, repeat, no-repeat !important;
}


/* ==========================================================================
   v1.1.6 - Mobile open-chat alignment
   Keeps Better Messages mobile index native, but normalizes the open conversation
   slide position. This prevents the left blank strip in group conversations.
   ========================================================================== */

@media (max-width: 768px) {
    /* Only when an actual conversation is open. Do not touch .bm-index-page. */
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden {
        width: 200vw !important;
        max-width: 200vw !important;
        min-width: 200vw !important;
        height: 100% !important;
        overflow: hidden !important;
        transform: translateX(-100vw) !important;
        display: block !important;
        position: relative !important;
    }

    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden > .bp-messages-column,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden > .bp-messages-column {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden > .bp-messages-column:first-child,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden > .bp-messages-column:first-child {
        left: 0 !important;
        transform: none !important;
    }

    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden > .bp-messages-column:nth-child(2),
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-threads-wrapper.threads-hidden > .bp-messages-column:nth-child(2) {
        left: 0 !important;
        transform: translateX(100vw) !important;
    }

    /* Open conversation internals should consume the active 100vw column. */
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .chat-header,
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .bpbm-chat-content,
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .bpbm-chat-main,
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .bm-reply,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .chat-header,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .bpbm-chat-content,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .bpbm-chat-main,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bp-messages-column:nth-child(2) .bm-reply {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bm-messages-listing,
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .bm-messages-list,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bm-messages-listing,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .bm-messages-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Group header on mobile: keep title + participants readable. */
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .thread-info,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .thread-info {
        min-width: 0 !important;
        max-width: calc(100vw - 122px) !important;
        overflow: hidden !important;
    }

    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .thread-info-data,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .thread-info-data {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .name,
    html body .bp-messages-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .sub-name,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .name,
    html body #bp-messages-full-screen-wrap.bp-messages-mobile:not(.bm-index-page) .chat-header .sub-name {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
}


/* ── Aviso "solo sábados" para el cambio de foto (v1.1.7) ── */
.wm-bm-avatar-locked-toast {
    position: fixed !important;
    left: 50% !important;
    bottom: 32px !important;
    transform: translateX(-50%) translateY(12px) !important;
    background: rgba(20, 24, 32, .96) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    padding: 13px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.5) !important;
    z-index: 2147483647 !important;
    opacity: 0 !important;
    transition: opacity .3s ease, transform .3s ease !important;
    pointer-events: none !important;
    max-width: calc(100vw - 40px) !important;
    text-align: center !important;
}
.wm-bm-avatar-locked-toast.is-visible {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}