/* =========================================
   CONVERSATION PAGE
========================================= */

.conversation-page {
  max-width:
    1080px;

  margin:
    32px auto
    60px;

  padding:
    0 18px;
}


.conversation-card {
  overflow:
    hidden;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 10px 32px
    rgba(
      15,
      23,
      42,
      0.08
    );
}


/* =========================================
   EMPTY CONVERSATION
========================================= */

.conversation-empty {
  padding:
    60px 20px;

  color:
    var(--light-muted);

  text-align:
    center;
}


.conversation-empty-icon {
  margin-bottom:
    10px;

  font-size:
    2rem;
}


.conversation-empty-title {
  margin:
    0 0 5px;

  color:
    var(--navy);

  font-size:
    1rem;

  font-weight:
    850;
}


/* =========================================
   BLOCKED MESSAGE
========================================= */

.message-blocked-notice {
  margin:
    18px 22px;

  padding:
    16px;

  color:
    #7f1d1d;

  background-color:
    #fff7f7;

  border:
    1px solid
    #fecaca;

  border-radius:
    9px;
}


.message-blocked-title {
  margin:
    0 0 6px;

  font-weight:
    850;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .conversation-page {
    margin-top:
      12px;

    padding:
      0 10px;
  }


  .conversation-card {
    border-radius:
      10px;
  }


  .message-blocked-notice {
    margin:
      14px;
  }

}


/* =========================================
   MOBILE CHAT-FIRST POLISH
========================================= */

@media screen and (max-width: 768px) {

  .conversation-page {
    margin:
      6px auto 30px;

    padding:
      0 6px;
  }


  .conversation-card {
    border-radius:
      12px;
  }

}



/* =========================================
   DESKTOP CHAT-FIRST LAYOUT
========================================= */

@media screen and (min-width: 769px) {

  .conversation-page {
    max-width:
      1160px;

    margin:
      18px auto 40px;

    padding:
      0 14px;
  }

}


/* =========================================
   DESKTOP CONVERSATION PAGE TIGHTENING
========================================= */

@media screen and (min-width: 769px) {

  .conversation-page {
    max-width:
      1080px;

    margin:
      16px auto 36px;
  }

}