/*
|--------------------------------------------------------------------------
| Student Chatroom - Chat Specific Styles
| Primary: #C49E55
| Secondary: #FFFFFF
|--------------------------------------------------------------------------
*/

/* Chat container wrapper */
.stcr-chat-container{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* Chat header top bar */
.stcr-chat-topbar{
    padding:12px 15px;
    background:#ffffff;
    border-bottom:1px solid #e6e6e6;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

input.stcr-input {
    border-radius: 100px !important;
    border: 1px solid #c49e5b !important;
}
.stcr-chat-title{
    font-size:16px;
    font-weight:600;
    color:#333;
}

.stcr-chat-actions{
    display:flex;
    gap:10px;
}

.stcr-action-btn{
    background:#f7f7f7;
    border:1px solid #e6e6e6;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}

.stcr-action-btn:hover{
    border-color:#C49E55;
    color:#C49E55;
}

/* Message area */
.stcr-message-area{
    flex:1;
    overflow-y:auto;
    padding:15px;
/*     background:#fafafa; */
}

/* Message row */
.stcr-msg-row{
    display:flex;
    margin-bottom:12px;
}

/* Self vs others */
.stcr-msg-row.self{
    justify-content:flex-end;
}

.stcr-msg-row.other{
    justify-content:flex-start;
}

/* Message bubble */
.stcr-msg-bubble{
    max-width:65%;
    padding:10px 12px;
    border-radius:10px;
    font-size:14px;
    line-height:1.4;
    position:relative;
    word-break:break-word;
}

/* Self message */
.stcr-msg-row.self .stcr-msg-bubble{
    background:#C49E55;
    color:#fff;
    border-bottom-right-radius:2px;
}

/* Other message */
.stcr-msg-row.other .stcr-msg-bubble{
    background:#ffffff;
    border:1px solid #e6e6e6;
    color:#333;
    border-bottom-left-radius:2px;
}

/* Message meta */
.stcr-msg-meta{
    font-size:11px;
    margin-top:5px;
    opacity:0.7;
}

/* Input area */
.stcr-chat-input-area{
    display:flex;
    align-items:center;
    padding:10px;
    border-top:1px solid #e6e6e6;
    background:#fff;
    gap:10px;
}

.stcr-chat-input{
    flex:1;
    padding:10px;
    border:1px solid #e6e6e6;
    border-radius:6px;
    outline:none;
}

.stcr-chat-input:focus{
    border-color:#C49E55;
}

/* Send button */
.stcr-send-btn{
    background:#C49E55;
    color:#fff;
    border:none;
    padding:10px 14px;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
}

.stcr-send-btn:hover{
    opacity:0.9;
}

/* Attachment preview */
.stcr-attachment-preview {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    background: antiquewhite;
    border-radius: 10px;
   
    color: #000 !important;
}

.stcr-message-area .stcr-attachment-preview {
	 padding: 5px;
}

.stcr-attachment-item{
    background:#f7f7f7;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    border:1px solid #e6e6e6;
}

/* New chat modal / dropdown */
.stcr-user-list, .stcr-recommend-list{
    max-height:250px;
    overflow-y:auto;
    border:1px solid #e6e6e6;
    border-radius:6px;
    background:#fff;
}

.stcr-user-item, .stcr-recommend-item{
    padding:10px;
    cursor:pointer;
    border-bottom:1px solid #f1f1f1;
}
input.recommend-search-bar {
    width: 100%;
    margin: 10px 0px;
    padding: 10px;
    border-radius: 100px;
    border: 1px solid #e8e8e8;
}

.stcr-user-item:hover, .stcr-recommend-item:hover{
    background:#fff3d6;
}

.stcr-user-item.active{
    background:#C49E55;
    color:#fff;
}

/* Mention dropdown */
.stcr-mention-dropdown {
    position: absolute;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    width: 220px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 99999;
    display: none;
    bottom: -9px;
    /* top: 0; */
    left: -220px;
}

.stcr-mention-item{
    padding:8px;
    cursor:pointer;
    font-size:13px;
}

.stcr-mention-item:hover{
    background:#C49E55;
    color:#fff;
}

/* Mobile responsive */
@media(max-width:768px){

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

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

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