/* ==========================================================
   GAY PLATFORM GLOBAL CHAT V4
   Eén definitieve layoutlaag voor de echte chatruimte.
========================================================== */


/* ==========================================================
   WORKSPACE / VIEWPORT
========================================================== */

.global-chat-workspace {
    min-height: 0 !important;
}

#globalChatRoom {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;

    background: #101011;
}


/* Header blijft bovenaan */

#globalChatRoom > .global-chat-room-header {
    flex: 0 0 auto !important;
}


/* Eventuele moderatorbalk */

#globalChatRoom > .global-chat-announcement {
    flex: 0 0 auto !important;
}


/* ==========================================================
   ALLEEN BERICHTEN SCROLLEN
========================================================== */

#globalChatMessageList {
    position: relative !important;

    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    gap: 2px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 10px 10px 14px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;

    scroll-behavior: smooth;
}


/* ==========================================================
   ONDERSTE CHAT-ELEMENTEN BLIJVEN BUITEN DE SCROLL
========================================================== */

#globalChatNewMessagesButton,
#globalChatTyping,
#globalChatReplyBar,
#globalChatComposer,
#globalChatRoom > .global-chat-composer-footer {
    flex: 0 0 auto !important;
}


/* ==========================================================
   TYPING
========================================================== */

#globalChatTyping {
    margin: 0 !important;
    padding: 5px 12px !important;

    border-top: 1px solid rgba(255,255,255,.035);

    background: #111112;
}

#globalChatTyping[hidden] {
    display: none !important;
}


/* ==========================================================
   REPLY BAR
========================================================== */

#globalChatReplyBar {
    margin: 0 !important;
    padding: 7px 11px !important;

    background: #18161b;
    border-top: 1px solid rgba(168,85,247,.18);
}

#globalChatReplyBar[hidden] {
    display: none !important;
}


/* ==========================================================
   COMPOSER - ALTIJD ZICHTBAAR
========================================================== */

#globalChatComposer {
    position: relative !important;
    inset: auto !important;

    display: grid !important;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto !important;

    align-items: end !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 9px 10px !important;

    box-sizing: border-box !important;

    background: #111112 !important;
    border-top: 1px solid rgba(255,255,255,.075) !important;

    z-index: 30 !important;
}


/* Tools */

#globalChatComposer .global-chat-composer-tools {
    display: flex !important;
    align-items: center !important;

    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;
}


#globalChatComposer .global-chat-composer-tools button {
    display: inline-grid !important;
    place-items: center !important;

    flex: 0 0 auto !important;

    min-width: 34px !important;
    width: auto !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    color: #ded9e2 !important;

    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 9px !important;

    font-size: 12px !important;
    line-height: 1 !important;

    cursor: pointer;
}


#globalChatComposer .global-chat-composer-tools button:hover {
    color: #fff !important;

    background: rgba(168,85,247,.13) !important;
    border-color: rgba(168,85,247,.3) !important;
}


/* Input wrapper */

#globalChatComposer .global-chat-composer-input {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
}


/* Textarea */

#globalChatMessageInput {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 36px !important;
    max-height: 110px !important;

    margin: 0 !important;
    padding: 9px 58px 9px 11px !important;

    resize: none !important;

    box-sizing: border-box !important;

    color: #eeeaf0 !important;

    background: #1a1a1c !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 11px !important;

    outline: none !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}


#globalChatMessageInput:focus {
    border-color: rgba(168,85,247,.55) !important;

    box-shadow:
        0 0 0 2px rgba(168,85,247,.08) !important;
}


/* Teller */

#globalChatCharacterCounter {
    position: absolute !important;

    right: 8px !important;
    bottom: 6px !important;

    color: #6f6874 !important;

    font-size: 8px !important;

    pointer-events: none;
}


/* Send */

#globalChatSendButton {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    height: 36px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    color: #15120b !important;

    background: #f2c43f !important;
    border: 0 !important;
    border-radius: 10px !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    cursor: pointer;
}


/* Footer onder composer */

#globalChatRoom > .global-chat-composer-footer {
    display: flex !important;

    justify-content: space-between !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 5px 11px 7px !important;

    color: #665f69 !important;

    background: #111112 !important;
    border: 0 !important;

    font-size: 8px !important;
}


/* ==========================================================
   DEFINITIEVE MESSAGE STRUCTUUR
========================================================== */

#globalChatMessageList .chat-message {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        32px
        minmax(0, 1fr)
        24px !important;

    grid-template-rows: auto !important;

    align-items: start !important;

    column-gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 5px 6px !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
}


#globalChatMessageList .chat-message:hover,
#globalChatMessageList .chat-message.is-actions-open {
    background: rgba(255,255,255,.035) !important;
}


/* Avatar */

#globalChatMessageList .chat-message-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: grid !important;
    place-items: center !important;

    width: 32px !important;
    height: 32px !important;

    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 50% !important;

    font-size: 10px !important;
}


#globalChatMessageList .chat-message-avatar img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}


/* Main */

#globalChatMessageList .chat-message-main {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    min-width: 0 !important;

    width: 100% !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* Header */

#globalChatMessageList .chat-message-header {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    gap: 5px !important;

    min-width: 0 !important;
    min-height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;
}


#globalChatMessageList .chat-message-name {
    flex: 0 0 auto !important;

    margin: 0 !important;

    color: #f1edf3 !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


#globalChatMessageList .chat-message-meta {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    gap: 3px !important;

    min-width: 0 !important;

    color: #918991 !important;

    font-size: 8px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


#globalChatMessageList .chat-message-meta-separator {
    opacity: .4 !important;
}


/* Bronbadge */

#globalChatMessageList .chat-area-badge {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    min-width: 22px !important;
    height: 14px !important;

    margin: 0 !important;
    padding: 0 5px !important;

    border-radius: 999px !important;

    font-size: 7px !important;
    font-weight: 900 !important;

    line-height: 1 !important;
}


#globalChatMessageList .chat-area-badge.area-gb {
    color: #171207 !important;
    background: #f2c43f !important;
}

#globalChatMessageList .chat-area-badge.area-gz {
    color: #fff !important;
    background: #8e35c2 !important;
}

#globalChatMessageList .chat-area-badge.area-gzcam {
    color: #fff !important;
    background: #16868c !important;
}

#globalChatMessageList .chat-area-badge.area-gz247 {
    color: #fff !important;
    background: #a83a3a !important;
}

#globalChatMessageList .chat-area-badge.area-gzon {
    color: #fff !important;
    background: #555b85 !important;
}

#globalChatMessageList .chat-area-badge.area-gzlv {
    color: #15120b !important;
    background: #f2c43f !important;
}


/* Tijd */

#globalChatMessageList .chat-message-time {
    flex: 0 0 auto !important;

    margin-left: auto !important;
    padding-left: 4px !important;

    color: #625b65 !important;

    font-size: 7px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


/* ==========================================================
   CONTENT
========================================================== */

#globalChatMessageList .chat-message-content {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    max-height: none !important;

    margin: 3px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    clear: both !important;
}


#globalChatMessageList .chat-message-content p {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #d8d2da !important;

    font-size: 10px !important;
    line-height: 1.4 !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
}


/* ==========================================================
   REPLY PREVIEW
========================================================== */

#globalChatMessageList .chat-message-reply-preview {
    display: block !important;

    width: min(100%, 430px) !important;
    height: auto !important;

    margin: 0 0 5px !important;
    padding: 5px 7px !important;

    overflow: hidden !important;

    color: inherit !important;

    background: rgba(255,255,255,.035) !important;
    border: 0 !important;
    border-left: 2px solid #a855f7 !important;
    border-radius: 0 6px 6px 0 !important;

    text-align: left !important;
}


#globalChatMessageList .chat-message-reply-preview strong,
#globalChatMessageList .chat-message-reply-preview span {
    display: block !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* ==========================================================
   GIF = EIGEN KLEIN MEDIA BLOK
========================================================== */

#globalChatMessageList
.chat-message-content
> img.chat-message-image {
    position: static !important;

    display: block !important;

    float: none !important;

    width: auto !important;
    height: auto !important;

    max-width: 88px !important;
    max-height: 88px !important;

    margin: 6px 0 2px !important;
    padding: 0 !important;

    object-fit: contain !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;

    clear: both !important;
}


/* ==========================================================
   FOTO = EIGEN GROTER MEDIA BLOK
========================================================== */

#globalChatMessageList
.chat-message-content
> button.chat-message-image {
    position: static !important;

    display: block !important;

    float: none !important;

    width: fit-content !important;
    height: auto !important;

    max-width: 230px !important;
    max-height: none !important;

    margin: 6px 0 3px !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: transparent !important;

    clear: both !important;
}


#globalChatMessageList
.chat-message-content
> button.chat-message-image
> img {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 230px !important;
    max-height: 190px !important;

    margin: 0 !important;

    object-fit: contain !important;

    border-radius: 10px !important;
}


/* ==========================================================
   ACTIES
========================================================== */

#globalChatMessageList .chat-message-footer {
    display: none !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 4px !important;

    width: 100% !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;

    clear: both !important;
}


#globalChatMessageList
.chat-message.is-actions-open
.chat-message-footer {
    display: flex !important;
}


#globalChatMessageList .chat-message-footer button {
    min-height: 25px !important;

    padding: 0 7px !important;

    color: #bfb8c2 !important;

    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 7px !important;

    font-size: 9px !important;
}


#globalChatMessageList .chat-message-menu-button {
    grid-column: 3 !important;
    grid-row: 1 !important;

    position: relative !important;
    inset: auto !important;

    display: grid !important;
    place-items: center !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    color: #908a94 !important;

    background: transparent !important;
    border: 0 !important;

    cursor: pointer;
}


#globalChatMessageList .chat-message:hover .chat-message-menu-button,
#globalChatMessageList .chat-message.is-actions-open .chat-message-menu-button {
    opacity: 1 !important;
}


/* ==========================================================
   MENU
========================================================== */

#globalChatMessageList .chat-message-menu {
    position: absolute !important;

    top: 28px !important;
    right: 6px !important;

    z-index: 50 !important;
}


#globalChatMessageList .chat-message-menu[hidden] {
    display: none !important;
}


/* ==========================================================
   NEW MESSAGE BUTTON
========================================================== */

#globalChatNewMessagesButton {
    align-self: center !important;

    margin: 5px auto !important;
}


/* ==========================================================
   MOBIEL
========================================================== */

@media (max-width: 760px) {

    #globalChatComposer {
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;
    }


    #globalChatComposer .global-chat-composer-tools {
        grid-column: 1 / -1 !important;
    }


    #globalChatRoom > .global-chat-composer-footer {
        display: none !important;
    }


    #globalChatMessageList .chat-message {
        grid-template-columns:
            30px
            minmax(0,1fr)
            22px !important;
    }


    #globalChatMessageList
    .chat-message-content
    > button.chat-message-image {
        max-width: min(210px, 72vw) !important;
    }


    #globalChatMessageList
    .chat-message-content
    > button.chat-message-image
    > img {
        max-width: min(210px, 72vw) !important;
    }
}


/* ==========================================================
   V4 MEDIA WRAPPER
   Media kan nooit meer in header / volgend bericht lopen
========================================================== */

#globalChatMessageList .chat-message-media {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    margin: 6px 0 2px !important;
    padding: 0 !important;

    overflow: visible !important;

    clear: both !important;
}


/* GIF */

#globalChatMessageList
.chat-message.is-gif-message
.chat-message-media {
    width: fit-content !important;
    max-width: 90px !important;
}


#globalChatMessageList
.chat-message.is-gif-message
.chat-message-media
> img {
    position: static !important;

    display: block !important;

    float: none !important;

    width: auto !important;
    height: auto !important;

    max-width: 90px !important;
    max-height: 90px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    border-radius: 9px !important;
}


/* FOTO */

#globalChatMessageList
.chat-message.is-image-message
.chat-message-media {
    width: fit-content !important;
    max-width: 230px !important;
}


#globalChatMessageList
.chat-message.is-image-message
.chat-message-media
> button {
    position: static !important;

    display: block !important;

    float: none !important;

    width: fit-content !important;
    height: auto !important;

    max-width: 230px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: transparent !important;
}


#globalChatMessageList
.chat-message.is-image-message
.chat-message-media
> button
> img {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 230px !important;
    max-height: 190px !important;

    margin: 0 !important;

    object-fit: contain !important;

    border-radius: 10px !important;
}


/*
 * Een media-bericht krijgt expliciet zijn natuurlijke hoogte.
 */

#globalChatMessageList .chat-message.is-media-message,
#globalChatMessageList .chat-message.is-media-message .chat-message-main,
#globalChatMessageList .chat-message.is-media-message .chat-message-content {
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}


/*
 * Het volgende bericht start altijd pas NA het volledige mediablok.
 */

#globalChatMessageList
.chat-message.is-media-message
+ .chat-message {
    position: relative !important;

    clear: both !important;
}



/* ==========================================================
   V4 CHROME FIX
   Bericht gebruikt FLEX i.p.v. GRID.
   Buitenste bericht neemt altijd natuurlijke mediahoogte over.
========================================================== */

#globalChatMessageList .chat-message {
    display: flex !important;

    flex-direction: row !important;
    align-items: flex-start !important;

    gap: 7px !important;

    width: 100% !important;

    height: max-content !important;
    min-height: 40px !important;
    max-height: none !important;

    contain: none !important;

    overflow: visible !important;
}


/* Avatar = vaste eerste kolom */

#globalChatMessageList .chat-message > .chat-message-avatar {
    position: relative !important;

    flex: 0 0 32px !important;

    width: 32px !important;
    height: 32px !important;
}


/* Main bepaalt voortaan de HOOGTE van het volledige bericht */

#globalChatMessageList .chat-message > .chat-message-main {
    position: relative !important;

    display: flex !important;

    flex: 1 1 auto !important;
    flex-direction: column !important;

    align-self: stretch !important;

    min-width: 0 !important;

    width: auto !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    contain: none !important;

    overflow: visible !important;
}


/* ⋯ rechts */

#globalChatMessageList .chat-message > .chat-message-menu-button {
    position: relative !important;

    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;
}


/* Content + media moeten normale document-flow houden */

#globalChatMessageList .chat-message-content,
#globalChatMessageList .chat-message-media {
    position: relative !important;

    display: block !important;

    float: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    contain: none !important;

    overflow: visible !important;
}


/* Elk volgend bericht begint vanzelf pas onder het vorige */

#globalChatMessageList .chat-message + .chat-message {
    clear: both !important;
}



/* ==========================================================
   DEFINITIEVE FIX — BERICHTEN MOGEN NOOIT KRIMPEN
========================================================== */

#globalChatMessageList > .chat-message {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
}


/* ==========================================================
   GB_GLOBAL_CHAT_MESSAGE_BOLD_V1
   Tekst die gebruikers in Global Chat typen
   ========================================================== */

.chat-message-text,
.chat-message-content,
.chat-message-body,
.chat-message-message {
    font-weight: 700 !important;
}



/* ==========================================================
   GB_CHAT_TIME_READABLE_FINAL
   ========================================================== */

#globalChatMessageList .chat-message-time {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    opacity: 1 !important;

    line-height: 1.2 !important;

    margin-left: auto !important;
    padding-left: 6px !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85) !important;

    white-space: nowrap !important;
}