/* DanceCafe - compacte LIVE-balk */

.chat > #dcLiveBar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: relative !important;
  flex: 0 0 42px !important;

  width: 100%;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

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

  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px;

  overflow: hidden !important;
}

#dcLiveBarSub {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#dcLiveListenButton {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.chat > .messages {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .chat > #dcLiveBar {
    padding: 0 8px !important;
    gap: 5px;
  }

  #dcLiveListenButton {
    padding: 5px 7px;
    font-size: 11px;
  }
}

/* DanceCafe: vier grid-rijen voor kop, LIVE-balk, berichten en invoer */
.chat {
    grid-template-rows: 83px 42px minmax(0, 1fr) 86px !important;
}

.chat > #dcLiveBar {
    grid-row: 2;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

.chat > .messages {
    grid-row: 3;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.chat > .compose {
    grid-row: 4;
}