/*
 * JR Messenger Redesign v1.0.1
 * Presentation only. Scoped to body.jr-messenger-redesign.
 */

body.jr-messenger-redesign {
    --jr-messenger-ink: #28231f;
    --jr-messenger-muted: #716c66;
    --jr-messenger-gold: #c99645;
    --jr-messenger-gold-soft: #e8c27f;
    --jr-messenger-cream: rgba(255, 253, 249, 0.96);
    --jr-messenger-toolbar: #f4efe7;
    --jr-messenger-line: rgba(86, 74, 61, 0.14);
    --jr-messenger-shadow: 0 9px 28px rgba(55, 43, 30, 0.13);
}

/* ------------------------------
   Remove the old page/hero title
   ------------------------------ */
body.jr-messenger-redesign .entry-hero,
body.jr-messenger-redesign .page-hero-section,
body.jr-messenger-redesign .entry-header:not(.jr-messenger-redesign__header),
body.jr-messenger-redesign .page-header,
body.jr-messenger-redesign .page-title-wrap,
body.jr-messenger-redesign .hero-section-overlay {
    display: none !important;
}

/* --------------------------------
   Confirmed redesign container flow
   -------------------------------- */
body.jr-messenger-redesign #primary.content-area,
body.jr-messenger-redesign .content-container.site-container {
    box-sizing: border-box !important;
}

body.jr-messenger-redesign #main.site-main {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: 1160px !important;
    margin: 28px auto 46px !important;
    padding: 0 !important;
}

body.jr-messenger-redesign article.entry,
body.jr-messenger-redesign .entry-content-wrap,
body.jr-messenger-redesign .entry-content.single-content,
body.jr-messenger-redesign .entry-content {
    box-sizing: border-box !important;
    max-width: none !important;
}

body.jr-messenger-redesign article.entry,
body.jr-messenger-redesign .entry-content-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.jr-messenger-redesign .entry-content-wrap,
body.jr-messenger-redesign .entry-content.single-content {
    padding: 0 !important;
}

/* -----------------------------------------------------
   Messenger page: no separate title/header card in v1.0.1
   ----------------------------------------------------- */
body.jr-messenger-redesign .jr-messenger-redesign__header {
    display: none !important;
}

/* ----------------
   Messenger frame
   ---------------- */
body.jr-messenger-redesign .jr-messenger-redesign__app,
body.jr-messenger-redesign .bp-messages-wrap,
body.jr-messenger-redesign .better-messages,
body.jr-messenger-redesign #better-messages,
body.jr-messenger-redesign .bm-messages-wrap {
    box-sizing: border-box !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__app {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(123, 103, 80, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 252, 246, 0.94) !important;
    box-shadow: var(--jr-messenger-shadow) !important;
}

/* Better Messages commonly sets its own fixed height. Keep the application
   generous on desktop but do not alter any messaging behaviour. */
body.jr-messenger-redesign .jr-messenger-redesign__app > .bp-messages-wrap,
body.jr-messenger-redesign .jr-messenger-redesign__app > .better-messages,
body.jr-messenger-redesign .jr-messenger-redesign__app > #better-messages,
body.jr-messenger-redesign .jr-messenger-redesign__app > .bm-messages-wrap,
body.jr-messenger-redesign .bp-messages-wrap.jr-messenger-redesign__root,
body.jr-messenger-redesign .better-messages.jr-messenger-redesign__root,
body.jr-messenger-redesign #better-messages.jr-messenger-redesign__root,
body.jr-messenger-redesign .bm-messages-wrap.jr-messenger-redesign__root {
    width: 100% !important;
    min-height: 590px !important;
    height: clamp(590px, 66vh, 690px) !important;
    max-height: none !important;
    margin: 0 !important;
    border: 1px solid rgba(92, 80, 67, 0.18) !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* Toolbars and top bars */
body.jr-messenger-redesign .jr-messenger-redesign__root .chat-header,
body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list-header,
body.jr-messenger-redesign .jr-messenger-redesign__root .top-bar,
body.jr-messenger-redesign .jr-messenger-redesign__root [class*="toolbar"],
body.jr-messenger-redesign .jr-messenger-redesign__root [class*="header"]:not(.thread-info):not(.messages-stack) {
    border-color: var(--jr-messenger-line) !important;
}

/* Search fields */
body.jr-messenger-redesign .jr-messenger-redesign__root input[type="search"],
body.jr-messenger-redesign .jr-messenger-redesign__root input[type="text"][placeholder*="Search" i],
body.jr-messenger-redesign .jr-messenger-redesign__root input[placeholder*="Search" i] {
    min-height: 38px !important;
    padding: 8px 13px !important;
    border: 1px solid rgba(92, 80, 67, 0.13) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--jr-messenger-ink) !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root input[placeholder*="Search" i]::placeholder {
    color: #9a958f !important;
}


/* Search row alignment fix: keep the search field vertically centered in the left header bar. */
body.jr-messenger-redesign .jr-messenger-redesign__root .chat-header.side-header,
body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list-header,
body.jr-messenger-redesign .jr-messenger-redesign__root .bp-messages-search,
body.jr-messenger-redesign .jr-messenger-redesign__root [class*="search"] form {
    align-items: center !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root .chat-header.side-header,
body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list-header,
body.jr-messenger-redesign .jr-messenger-redesign__root .bp-messages-search {
    display: flex !important;
    align-items: center !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root .bp-messages-search form,
body.jr-messenger-redesign .jr-messenger-redesign__root [class*="search"] form {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    min-height: 100% !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root input[type="search"],
body.jr-messenger-redesign .jr-messenger-redesign__root input[type="text"][placeholder*="Search" i],
body.jr-messenger-redesign .jr-messenger-redesign__root input[placeholder*="Search" i] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    position: relative !important;
    top: 0 !important;
    vertical-align: middle !important;
}

/* Conversation list: cleaner separators, slightly roomier rows. */
body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list .thread,
body.jr-messenger-redesign .jr-messenger-redesign__root .thread-item,
body.jr-messenger-redesign .jr-messenger-redesign__root [class*="threads-list"] > div {
    border-color: rgba(75, 66, 56, 0.09) !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list .thread:hover,
body.jr-messenger-redesign .jr-messenger-redesign__root .thread-item:hover {
    background: #fbf8f2 !important;
}

/* Keep the left conversation pane useful for long names while preserving the
   Better Messages split-pane structure. */
@media (min-width: 901px) {
    body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list-wrapper,
    body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list-container,
    body.jr-messenger-redesign .jr-messenger-redesign__root [class*="threads-list-wrapper"] {
        width: 31% !important;
        min-width: 330px !important;
        max-width: 390px !important;
    }
}

/* Empty conversation state enhancement inserted by JS. */
body.jr-messenger-redesign .jr-messenger-redesign__welcome-title {
    margin: 10px 0 9px !important;
    color: var(--jr-messenger-ink) !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

body.jr-messenger-redesign a.jr-messenger-redesign__new-chat,
body.jr-messenger-redesign button.jr-messenger-redesign__new-chat {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px !important;
    margin-top: 7px !important;
    border: 1px solid #d59d42 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #efc97f, #e4b764) !important;
    box-shadow: 0 2px 0 rgba(120, 79, 20, 0.12) !important;
    color: #24201b !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

body.jr-messenger-redesign a.jr-messenger-redesign__new-chat:hover,
body.jr-messenger-redesign button.jr-messenger-redesign__new-chat:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 4px 10px rgba(110, 73, 23, 0.14) !important;
}



/* New-conversation compose header: keep the gold bar clean and full-width.
   Do not let the empty-state CTA styling affect the live compose header. */
body.jr-messenger-redesign .jr-messenger-redesign__root .chat-header.jr-messenger-redesign__new-chat,
body.jr-messenger-redesign .jr-messenger-redesign__root #bm-new-thread-title.jr-messenger-redesign__new-chat {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root .chat-header.jr-messenger-redesign__new-chat {
    width: 100% !important;
    gap: 0 !important;
}

body.jr-messenger-redesign .jr-messenger-redesign__root #bm-new-thread-title,
body.jr-messenger-redesign .jr-messenger-redesign__root #bm-new-thread-title.jr-messenger-redesign__new-chat {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    color: #28231f !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Bottom account/settings strip */
body.jr-messenger-redesign .jr-messenger-redesign__root .threads-list-footer,
body.jr-messenger-redesign .jr-messenger-redesign__root .user-panel,
body.jr-messenger-redesign .jr-messenger-redesign__root [class*="threads-list-footer"] {
    background: #f3eee5 !important;
    border-color: var(--jr-messenger-line) !important;
}

/* Keep floating site controls such as Report and Friends/Groups above the app. */
body.jr-messenger-redesign .jr-floating-controls,
body.jr-messenger-redesign [class*="friends-groups"],
body.jr-messenger-redesign [class*="report"] {
    z-index: 40;
}

/* ------------------------------------------------------------
   Full Messenger page only: remove the floating Friends/Groups
   Better Messages launcher. The full in-page Messenger remains.
   ------------------------------------------------------------ */
body.jr-messenger-redesign .jr-messenger-redesign__floating-popout {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Extra no-flash guard for the known launcher markup. The main Messenger
   receives .jr-messenger-redesign__root and is therefore excluded. */
body.jr-messenger-redesign .bp-messages-wrap.bp-better-messages-list:not(.jr-messenger-redesign__root)[style*="z-index"]:has(.jr-bm-tabs) {
    display: none !important;
}


/* ------------------------------------------------------------
   Desktop expanded/full-screen Messenger
   ------------------------------------------------------------ */
html.jr-messenger-redesign--fullscreen,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen {
    overflow: hidden !important;
}

/* Full-screen Messenger should be immersive: remove site chrome that can sit
   above/below the Better Messages viewport while expanded. Restored on exit. */
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen #masthead,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .site-header,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen #colophon,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen footer.site-footer,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .site-footer,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .site-footer-wrap {
    display: none !important;
}

/* The normal redesign shell intentionally clips its rounded card. In desktop
   fullscreen that clipping is undesirable and was cutting across the top bar. */
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__app {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__root,
body.jr-messenger-redesign .jr-messenger-redesign__root.jr-messenger-redesign__root--fullscreen {
    position: fixed !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
    z-index: 2147482000 !important;
}

/* Keep the desktop toolbar/header row on top of the message surface instead
   of allowing the main pane to visually cover its lower edge. */
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__root .chat-header,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__root .threads-list-header,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__root .top-bar {
    position: relative !important;
    z-index: 30 !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__root .chat-header.side-header,
body.jr-messenger-redesign.jr-messenger-redesign--fullscreen .jr-messenger-redesign__root .threads-list-header {
    min-height: 44px !important;
}

/* --------------
   Tablet/mobile
   -------------- */
@media (max-width: 900px) {
    body.jr-messenger-redesign #main.site-main {
        width: calc(100% - 28px) !important;
        margin-top: 18px !important;
        margin-bottom: 32px !important;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__app {
        padding: 7px !important;
        border-radius: 14px !important;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__app > .bp-messages-wrap,
    body.jr-messenger-redesign .jr-messenger-redesign__app > .better-messages,
    body.jr-messenger-redesign .jr-messenger-redesign__app > #better-messages,
    body.jr-messenger-redesign .jr-messenger-redesign__app > .bm-messages-wrap,
    body.jr-messenger-redesign .jr-messenger-redesign__root {
        min-height: 560px !important;
        height: min(72vh, 680px) !important;
    }
}

@media (max-width: 600px) {
    body.jr-messenger-redesign #main.site-main {
        width: calc(100% - 18px) !important;
        margin-top: 12px !important;
    }


    body.jr-messenger-redesign .jr-messenger-redesign__title {
        font-size: 30px !important;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__subtitle {
        font-size: 14px !important;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__ornament {
        gap: 10px;
        margin: 8px auto;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__heart {
        font-size: 31px;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__app {
        padding: 4px !important;
        border-radius: 11px !important;
    }

    body.jr-messenger-redesign .jr-messenger-redesign__app > .bp-messages-wrap,
    body.jr-messenger-redesign .jr-messenger-redesign__app > .better-messages,
    body.jr-messenger-redesign .jr-messenger-redesign__app > #better-messages,
    body.jr-messenger-redesign .jr-messenger-redesign__app > .bm-messages-wrap,
    body.jr-messenger-redesign .jr-messenger-redesign__root {
        min-height: 590px !important;
        height: calc(100dvh - 205px) !important;
        border-radius: 8px !important;
    }
}