/* 4.9. Composants de Plugins */
/* Ultimate Member */
.um .um-form,
.um .um-field,
.um .um-field-area,
.um .um-field-label,
.um .um-field-half {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.content-container.um-page-wrapper { /* Surcharge pour Ultimate Member si nécessaire */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 9999 !important; /* Peut-être trop élevé, à évaluer */
}

/* ============================================================
   BP Better Messages — Intégration thème complète
   Architecture :
   - Le JS sync ajoute body.bm-messages-dark / body.bm-messages-light
   - body.bm-messages-dark écrase les variables du plugin + les valeurs hardcodées
   - html.light-mode fait de même pour le mode clair (voir light.css)
   ============================================================ */

/* --- Conteneur outer — chanfrein doré ---
   Même architecture que .post-item, .settings-panel, .search-form :
   ::before (or, inset:0) + ::after (fond, inset:2px) à z-index:-1 + padding.
   Le padding (≥ cut-md/2 = 6px) garantit que le plugin ne couvre pas
   les coins dorés chanfreinés. */
.content-area.messages-container {
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 2px;
    position: relative;
    isolation: isolate;
    background: transparent;
}
.content-area.messages-container::before,
.content-area.messages-container::after {
    content: '';
    position: absolute;
    z-index: -1;
    clip-path: polygon(
        var(--cut-md) 0, 100% 0, 100% calc(100% - var(--cut-md)),
        calc(100% - var(--cut-md)) 100%, 0 100%, 0 var(--cut-md)
    );
}
.content-area.messages-container::before {
    inset: 0;
    background: var(--color-accent);
}
.content-area.messages-container::after {
    inset: 2px;
    background: var(--color-background);
}

/* --- Wrapper plugin — clip-path chanfrein pour coller au bord doré sans gap ---
   clip-path découpe les coins du plugin selon la même forme chanfreinée que le
   conteneur, ce qui permet padding:2px (bordure collée) avec chanfreins visibles.
   ⚠ Effet de bord connu : le picker d'emojis et autres popups absolus seront
   clippés par ce clip-path (les éléments enfants ne peuvent pas s'y soustraire). */
.bp-messages-wrap {
    position: relative;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
    min-height: 500px;
    width: 100% !important;
    max-width: 100% !important;
    clip-path: polygon(
        var(--cut-md) 0%, 100% 0%, 100% calc(100% - var(--cut-md)),
        calc(100% - var(--cut-md)) 100%, 0% 100%, 0% var(--cut-md)
    );
}

/* --- Wrapper interne dark-mode du plugin — neutralise overflow-x:clip ---
   Le plugin ajoute la classe .dark-mode à un wrapper interne avec des classes
   CSS-in-JS aléatoires (ex: nazwymfkq idc0_350) qui ont overflow-x:clip,
   coupant la bordure droite du picker d'emojis. */
.bp-messages-wrap .dark-mode {
    overflow-x: visible !important;
}

/* ============================================================
   DARK MODE — Variables (body.bm-messages-dark)
   Écrase les defaults blanc/rouge du plugin
   ============================================================ */
body.bm-messages-dark {
    --bm-bg-color: 11, 26, 34;
    --bm-bg-secondary: 15, 28, 38;
    --bm-hover-bg: 20, 39, 54;
    --bm-text-color: 255, 255, 255;
    --bm-border-color: 119, 92, 49;
    --bm-border-secondary-color: 60, 45, 20;
    --bm-placeholder: 180, 160, 130;
    --main-bm-color: 119, 92, 49;
    --bm-button-bg: 119, 92, 49;
    --bm-button-color: 255, 255, 255;
    --bm-mention-bg: 20, 39, 54;
    --bm-mention-color: 180, 160, 130;
    --bm-sticky-date-bg: #0b1a22;
    --bm-sticky-date-color: #c0c0c0;
    --bm-scrollbar: rgba(119, 92, 49, 0.25);
    --bm-scrollbar-active: rgba(119, 92, 49, 0.6);
    --bm-scrollbar-focus: rgba(119, 92, 49, 0.8);
    --left-message-bg-color: 20, 39, 54;
    --left-message-text-color: 255, 255, 255;
    --left-message-nickname-color: 180, 160, 130;
    --right-message-bg-color: 119, 92, 49;
    --right-message-text-color: 255, 255, 255;
    --right-message-nickname-color: 255, 220, 160;
    --bm-border-active: 145, 112, 65;
    --bm-button-hover: rgba(119, 92, 49, 0.15);
    --bm-button-active: rgba(119, 92, 49, 0.25);
    --main-bm-border-color: rgba(119, 92, 49, 0.3);
}

/* --- Emoji picker — bordure dorée via ::after pour passer au-dessus du Shadow DOM ---
   Le web component <bm-emoji-picker> crée un stacking context qui paint PAR-DESSUS
   la border native de .bm-emoji-picker-container, rendant la bordure droite invisible.
   Solution : supprimer la border native et la recréer via ::after (position:absolute,
   z-index élevé) qui se dessine au-dessus du web component. */
.bm-emoji-picker-container {
    width: 352px !important; /* restaure la largeur d'origine du plugin */
    border: none !important; /* supprime la border native (couverte par le Shadow DOM) */
    position: relative;
}
.bm-emoji-picker-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(119, 92, 49, 0.62);
    border-radius: 10px;
    pointer-events: none;
    z-index: 9999;
}

/* --- Dark : Emoji picker — variables internes --- */
body.bm-messages-dark .bm-emoji-picker-container {
    --color-border: rgba(119, 92, 49, 0.3);
}

/* --- Dark : Scrollbars internes (OverlayScrollbars) --- */
body.bm-messages-dark .bp-messages-wrap .os-theme-dark {
    --os-handle-bg: rgba(119, 92, 49, 0.3);
    --os-handle-bg-hover: rgba(119, 92, 49, 0.55);
    --os-handle-bg-active: rgba(119, 92, 49, 0.75);
}

/* --- Dark : Séparations et bordures dorées --- */
body.bm-messages-dark .bp-messages-wrap .bp-messages-side-threads {
    border-right: 1px solid rgba(var(--bm-border-color), 0.8) !important;
}
body.bm-messages-dark .bp-messages-wrap .chat-header,
body.bm-messages-dark .bp-messages-wrap .chat-header.side-header {
    border-bottom: 1px solid rgba(var(--bm-border-color), 0.8) !important;
}
body.bm-messages-dark .bp-messages-wrap .chat-footer {
    border-top: 1px solid rgba(var(--bm-border-color), 0.5) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-reply {
    border-top: 1px solid rgba(var(--bm-border-color), 0.5) !important;
}
body.bm-messages-dark .bp-messages-wrap .threads-list .thread.bp-messages-active-thread > * {
    background: rgba(var(--main-bm-color), 0.12) !important;
}

/* --- Dark : Sidebar / liste des threads --- */
body.bm-messages-dark .bp-messages-wrap .threads-list .thread.unread > * {
    background: rgba(var(--bm-hover-bg), 0.5) !important;
}
body.bm-messages-dark .bp-messages-wrap .threads-list .thread .deleted {
    background: rgba(var(--bm-bg-color), 0.95) !important;
}
body.bm-messages-dark .bp-messages-wrap .threads-list .thread .time .bm-status {
    color: rgba(var(--bm-text-color), 0.5) !important;
}
body.bm-messages-dark .bp-messages-wrap .threads-list .thread .actions .bm-more-actions {
    color: rgba(var(--bm-text-color), 0.4) !important;
}
body.bm-messages-dark .bp-messages-wrap .threads-list .thread .unread-count,
body.bm-messages-dark .bp-messages-wrap .threads-list .thread .unread-mention {
    background: rgba(var(--main-bm-color), 1) !important;
    color: #fff !important;
}

/* --- Dark : Chat header --- */
body.bm-messages-dark .bp-messages-wrap .chat-header .group-online.online-now {
    color: #5dde5d !important;
}

/* --- Dark : Zone de saisie --- */
body.bm-messages-dark .bp-messages-wrap .textarea.input:focus,
body.bm-messages-dark .bp-messages-wrap .textarea.input.active,
body.bm-messages-dark .bp-messages-wrap textarea.input:focus {
    background: rgba(var(--bm-bg-color), 1) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-editor-format-tooltip > span {
    color: rgba(var(--bm-text-color), 1) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-reply .bm-attachment[data-count]:after {
    color: #fff !important;
}
body.bm-messages-dark .bp-messages-wrap .placeholder_input span {
    color: rgba(var(--bm-placeholder), 0.7) !important;
}

/* --- Dark : Réactions --- */
body.bm-messages-dark .bp-messages-wrap .bm-reactions-trigger {
    background: rgba(var(--bm-bg-secondary), 1) !important;
    box-shadow: 0 1px 4px rgba(var(--bm-border-color), 0.4) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-reactions-selector.bm-reactions-expanded {
    background: rgba(var(--bm-bg-secondary), 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* --- Dark : Mentions / autocomplete --- */
body.bm-messages-dark .bp-messages-wrap .bm-mentions {
    background: rgba(var(--bm-bg-secondary), 1) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-message-content .bm-mention {
    background: rgba(var(--bm-text-color), 0.1) !important;
}
body.bm-messages-dark .bp-messages-wrap .ui-widget-content {
    background: rgba(var(--bm-bg-secondary), 1) !important;
    color: rgba(var(--bm-text-color), 0.8) !important;
}
body.bm-messages-dark .bp-messages-wrap .ui-menu .ui-menu-item a {
    color: rgba(var(--bm-text-color), 0.7) !important;
}
body.bm-messages-dark .bp-messages-wrap .ui-state-hover,
body.bm-messages-dark .bp-messages-wrap .ui-widget-content .ui-state-hover {
    background: rgba(var(--bm-hover-bg), 1) !important;
}
body.bm-messages-dark .bp-messages-wrap .placeholder_input span {
    color: rgba(var(--bm-placeholder), 0.6) !important;
}

/* --- Dark : Indicateur de frappe --- */
body.bm-messages-dark .bp-messages-wrap .bm-typing__bullet {
    background-color: rgba(var(--bm-text-color), 0.35) !important;
}

/* --- Dark : Messages — timestamps et éléments héritant noir --- */
body.bm-messages-dark .bp-messages-wrap .bm-message-content.bm-hide-background .bm-time {
    color: rgba(var(--bm-text-color), 0.6) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-message-content .bm-voice-message-duration {
    color: rgba(var(--bm-text-color), 0.6) !important;
}
body.bm-messages-dark .bp-messages-wrap .bm-message.selected .bm-message-content:after {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* --- Dark : Pied de page / popup utilisateur --- */
body.bm-messages-dark .bp-messages-wrap .chat-footer .bpbm-user-me.bpbm-open > *,
body.bm-messages-dark .bp-messages-wrap .chat-footer .bpbm-user-me:hover > * {
    background: rgba(var(--bm-text-color), 0.05) !important;
}
body.bm-messages-dark .bp-messages-wrap .bpbm-user-me-popup {
    background: rgba(var(--bm-bg-secondary), 1) !important;
    box-shadow: 0 2px 10px rgba(var(--bm-border-color), 0.3) !important;
}
body.bm-messages-dark .bp-messages-wrap .bpbm-user-me-popup-list-item:hover {
    background: rgba(var(--bm-hover-bg), 1) !important;
}

/* --- Dark : Contrôles d'appel vidéo --- */
body.bm-messages-dark .bp-messages-wrap .bp-messages-group-call-controls-buttons > span {
    background: rgba(var(--bm-bg-secondary), 1) !important;
    color: rgba(var(--bm-text-color), 1) !important;
    border-color: rgba(var(--bm-border-color), 0.5) !important;
}
body.bm-messages-dark .bp-messages-wrap .bpbm-disable-mic,
body.bm-messages-dark .bp-messages-wrap .bpbm-enable-mic,
body.bm-messages-dark .bp-messages-wrap .bpbm-pic-in-pic,
body.bm-messages-dark .bp-messages-wrap .bpbm-configure-call,
body.bm-messages-dark .bp-messages-wrap .bpbm-switch-full-screen {
    background: rgba(var(--bm-bg-secondary), 1) !important;
    color: rgba(var(--bm-text-color), 1) !important;
}

/* --- Dark : État vide --- */
body.bm-messages-dark .bp-messages-wrap .bpbm-empty-icon svg * {
    stroke: rgba(var(--main-bm-color), 1) !important;
}
body.bm-messages-dark .bp-messages-wrap .bpbm-empty-message,
body.bm-messages-dark .bp-messages-wrap .bpbm-empty-or {
    color: rgba(var(--bm-text-color), 0.6) !important;
}

/* Text-scale : forcer rem pour que --text-scale s'applique aux messages */
.bpbm-search input                         { font-size: 0.875rem !important; }
.bpbm-search input::placeholder            { font-size: 0.875rem !important; }
.bp-messages-wrap .bpbm-empty-message      { font-size: 0.9375rem !important; }
.bp-messages-wrap .bpbm-empty-or           { font-size: 0.8125rem !important; }
.bp-messages-wrap .bpbm-empty-link         { font-size: 0.875rem !important; }
.bp-messages-wrap .name                    { font-size: 0.9375rem !important; }
.bp-messages-wrap .bm-last-message-content { font-size: 0.8125rem !important; }
.bp-messages-wrap .time-wrapper            { font-size: 0.75rem !important; }
.bp-messages-wrap .bm-user                 { font-size: 0.875rem !important; }
.bp-messages-wrap .bpbm-user-option-title  { font-size: 0.875rem !important; }
.bp-messages-wrap .bpbm-user-option-description { font-size: 0.8125rem !important; }
.bp-messages-wrap .bpbm-user-option label  { font-size: 0.8125rem !important; }
.bp-messages-wrap #bm-new-thread-title     { font-size: 1rem !important; }
.bp-messages-wrap .bm-conversation-start   { font-size: 0.8125rem !important; }
.bp-messages-wrap .bm-sticky-date          { font-size: 0.75rem !important; }
.bp-messages-wrap .bm-message-content      { font-size: 0.9375rem !important; }
.bp-messages-wrap .bm-editor-content       { font-size: 0.9375rem !important; }
.bp-messages-wrap .bm-subject-container    { font-size: 0.875rem !important; }
.bp-messages-wrap .bm-thread-info-action-label  { font-size: 0.8125rem !important; }
.bp-messages-wrap .bm-thread-info-tab      { font-size: 0.8125rem !important; }
.bp-messages-wrap .bm-thread-attachments-empty  { font-size: 0.8125rem !important; }
.bp-messages-wrap .bm-chat-header-title    { font-size: 1rem !important; }

/* Forum (MSB LOL) - Élargissement du contenu */
.msb-lol-create-discussion-page .content-area.content-area-empty-content,
.msb-lol-single-thread-page .content-area.content-area-empty-content,
.msb-lol-archive-thread-page .content-area.content-area-empty-content,
body.page-template-page-empty .content-area.content-area-empty-content, /* Fallback pour shortcode sur page vide */
main.msb-lol-create-discussion-page > .content-area.content-area-empty-content,
main.msb-lol-single-thread-page > .content-area.content-area-empty-content,
main.msb-lol-archive-thread-page > .content-area.content-area-empty-content,
main.site-main-empty-content > div.content-area.content-area-empty-content:has(> .msb-lol-forum-wrapper),
body.page-id-89 main.site-main-empty-content > div.content-area.content-area-empty-content { /* Fallback pour page ID spécifique */
    max-width: 1500px;
}