/*
|--------------------------------------------------------------------------
| Student Chatroom - Responsive Styles
| Primary: #C49E55
| Breakpoints: 1200px / 992px / 768px / 576px
|--------------------------------------------------------------------------
*/

/* =========================
   Large Screens (1200px)
========================= */
@media (max-width: 1200px) {

    .stcr-sidebar{
        width:260px;
    }

    .stcr-message-bubble{
        max-width:65%;
    }
}

/* =========================
   Medium Screens (992px)
========================= */
@media (max-width: 992px) {

    .stcr-sidebar{
        width:220px;
    }

    .stcr-chat-item{
        font-size:14px;
    }

    .stcr-message-bubble{
        max-width:75%;
    }
}

/* =========================
   Tablets (768px)
========================= */
@media (max-width: 768px) {

        .stcr-wrapper {
        flex-direction: column-reverse;
        height: auto;
			gap: 20px;}

    .stcr-sidebar{
        width:100%;
        height:auto;
        display:flex;
       flex-direction: column;
        overflow-x:auto;
        border-right:none;
        border-bottom:1px solid #e6e6e6;
    }

    .stcr-chat-list{
        display:flex;
        flex-direction: column;
        overflow-x:auto;
        flex:1;
    }

    .stcr-chat-item{
        min-width:140px;
/*         text-align:center; */
        border-bottom:none;
        border-right:1px solid #e6e6e6;
    }

    .stcr-chat-area{
        height:calc(100vh - 120px);
    }

    .stcr-message-bubble{
        max-width:85%;
        font-size:13px;
    }

    .stcr-input-area{
        flex-direction:row;
    }

    .stcr-new-chat{
        font-size:13px;
    }
}

/* =========================
   Small Phones (576px)
========================= */
@media (max-width: 576px) {

    .stcr-sidebar-header{
        font-size:14px;
        padding:10px;
    }

    .stcr-chat-item{
        min-width:120px;
        font-size:12px;
        padding:8px;
    }

    .stcr-message-bubble{
        max-width:90%;
        font-size:12px;
        padding:8px 10px;
    }

    .stcr-input{
        font-size:13px;
        padding:8px;
    }

    .stcr-send-btn{
        padding:8px 12px;
        font-size:12px;
    }

    .stcr-chat-header{
        font-size:13px;
        padding:10px;
    }

    .stcr-mention-dropdown{
        width:180px;
    }
}

/* =========================
   Extra Small Phones (400px)
========================= */
@media (max-width: 400px) {

    .stcr-chat-item{
        min-width:100px;
        font-size:11px;
    }

    .stcr-message-bubble{
        max-width:95%;
    }

    .stcr-input-area{
        gap:6px;
    }

    .stcr-send-btn{
        padding:7px 10px;
    }
}