/* ==========================================================
   GAYZZEE WELKOM CHAT — STRUCTURELE V4
   Desktop + mobiel — 12 augustus 2026

   De chatkolom wordt één echte flexkolom:
   header/notices/extras/composer blijven buiten het scrollvlak;
   alleen de berichtenlijst gebruikt de resterende hoogte.
   Hierdoor kan het laatste bericht niet achter het tekstvak vallen.
========================================================== */

/* Desktop welkom: volledige chatkolom structureel scheiden. */
@media (min-width: 980px) {
  .chat-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Mobiel welkom: alleen wanneer de Chat-tab zichtbaar is. */
@media (max-width: 979px) {
  body[data-mobile-tab="chat"] .chat-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Alleen de berichtenlijst groeit en scrollt. */
.chat-panel > #messages,
.chat-panel > .messages,
.chat-panel > #globalChatMessageList,
.chat-panel > .global-chat-message-list {
  position: relative !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding-bottom: 18px !important;
  scroll-padding-bottom: 18px !important;
}

/* Alle runtime-elementen onder de berichtenlijst blijven apart. */
.chat-panel > #globalChatReplyBar,
.chat-panel > #globalChatTyping,
.chat-panel > #globalChatNewMessagesButton,
.chat-panel > #globalChatComposer,
.chat-panel > .chat-composer,
.chat-panel > .gayzzee-global-chat-composer,
.chat-panel > #globalChatCharacterCounter {
  flex: 0 0 auto !important;
}

/* Composer hoort nooit bovenop de berichtenlijst te liggen. */
.chat-panel > #globalChatComposer,
.chat-panel > .chat-composer,
.chat-panel > .gayzzee-global-chat-composer {
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 8px !important;
  box-sizing: border-box !important;
}

.chat-panel > #globalChatMessageList > :last-child,
.chat-panel > .global-chat-message-list > :last-child,
.chat-panel > #messages > :last-child,
.chat-panel > .messages > :last-child {
  margin-bottom: 4px !important;
  scroll-margin-bottom: 18px !important;
}