/* ==========================================================================
   /message (MessageChat) sayfası - responsive düzen
   style.css ve responsive.css'ten SONRA yuklenir (index.html)
   ========================================================================== */

/* --- Kolonlar: mobilde alt alta, >=992px yan yana ---------------------- */
.chat-container-box > .col-xxl-3,
.chat-container-box > .col-lg-8 {
  width: 100%;
}

@media screen and (min-width: 992px) {
  .chat-container-box > .col-xxl-3 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .chat-container-box > .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}

@media screen and (min-width: 1400px) {
  .chat-container-box > .col-xxl-3 {
    width: 25%;
  }
  .chat-container-box > .col-lg-8 {
    width: 75%;
  }
}

/* --- Mobilde sag panelin olasi disari tasma/kesilmesini onle ---------- */
@media screen and (max-width: 991px) {
  .chat-container-box > .col-lg-8 {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
  .chat-container-content-box {
    margin-left: 0;
    border-left: 0;
  }
}

/* --- Sohbet listesi (sol panel) mobilde gizli, toggle ile overlay ----- */
@media screen and (max-width: 991px) {
  .chat-container-box .chat-div.chattoggle {
    display: block !important;
    position: absolute;
    top: 0;
    left: calc(var(--bs-gutter-x) * 0.5);
    right: calc(var(--bs-gutter-x) * 0.5);
    width: auto;
    max-height: 100%;
    overflow-y: auto;
    z-index: 20;
    padding-bottom: 0.75rem;
    background-color: rgba(var(--white), 1);
    border-radius: var(--app-border-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  }

  .chat-container-box .chat-div.chattoggle .card {
    box-shadow: none;
  }

  .close-togglebtn {
    display: block;
  }
}

/* Genis ekranda chattoggle sinifinin yan etkilerini nötrle -------------- */
@media screen and (min-width: 992px) {
  .chat-container-box .chat-div.chattoggle {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- Hic sohbet secilmediginde bos durum -------------------------------- */
.chat-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 2rem 1rem;
}

/* --- Mobilde sohbet listesi-toggle butonu her durumda gorunur ---------- */
.chat-container-box .toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}