.mcp-messages-app{
    display:flex;
    gap:24px;

    flex:1;
    min-height:0;
}

.mcp-messages-sidebar{
    width:280px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    overflow:hidden;
}

.mcp-messages-conversation{
    flex:1;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    overflow:hidden;
    min-height:600px;
}

.mcp-thread-list{
    padding:0px;
}

.mcp-messages-thread{

    display:flex;
    align-items:flex-start;

    gap:14px;

    padding:20px 22px;

    border-bottom:1px solid #edf2f7;

    cursor:pointer;

    transition:.2s;
}

.mcp-messages-thread.active{

    background:#fff;

    box-shadow:
        inset 4px 0 0 var(--mcp-brand),
        inset 0 0 0 1px rgba(0,0,0,.03);

}

.mcp-messages-thread:not(.active):hover{

    background:#fafcff;

}

.mcp-messages-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#365472;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}

.mcp-messages-thread-body{
    flex:1;
    min-width:0;
}

.mcp-messages-thread-name{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:500;

    margin-bottom:4px;

}

.mcp-messages-thread.unread
.mcp-messages-thread-name{

    font-weight:700;

}

.mcp-messages-thread-preview{

    margin-top:6px;

    color:#6f7682;

    font-size:15px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.mcp-messages-thread.unread
.mcp-messages-thread-preview{

    color:#374151;

}

.mcp-messages-thread.unread
.mcp-messages-thread-time{

    color:#5f6772;

}

.mcp-messages-thread-meta{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-left:20px;

    flex-shrink:0;

}

.mcp-messages-thread-time{
    font-size:.8rem;
    color:#888;
    margin-bottom:6px;
}

.mcp-messages-thread-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#365472;
    color:#fff;
    font-size:.75rem;
    font-weight:600;
}

.mcp-messages-conversation-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid #e8edf3;
}

.mcp-messages-contact{
    display:flex;
    align-items:center;
    gap:14px;
}

.mcp-messages-contact .mcp-messages-avatar{
    width:48px;
    height:48px;
    font-size:16px;
}

.mcp-messages-contact-name{
    font-size:18px;
    font-weight:700;
    color:#1f2937;
    line-height:1.2;
}

.mcp-messages-contact-status{
    font-size:14px;
    color:#6b7280;
    margin-top:2px;
}

.mcp-messages-feed{

    flex:1;

    overflow-y:auto;

    padding:24px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

}

.mcp-messages-message{
    display:flex;
    flex-direction:column;
    margin-bottom:18px;
}

.mcp-messages-message.received{
    align-items:flex-start;
}

.mcp-message-bubble{

    max-width:65%;

    background:#dfeaf8;

    padding:16px 18px;

    border-radius:18px;

    line-height:1.5;

    color:#374151;

}

/* Incoming messages */

.mcp-messages-message.received .mcp-message-bubble{

    border-top-left-radius:4px;

}

/* Outgoing messages */

.mcp-messages-message.sent .mcp-message-bubble{

    border-top-right-radius:4px;

}

.mcp-messages-message.sent{

    display:flex;
    flex-direction:column;
    align-items:flex-end;

}

.mcp-messages-message.sent .mcp-message-bubble{

    background:var(--mcp-brand);
    color:#fff;

}

.mcp-messages-message.sent .mcp-message-time{

    text-align:right;

    margin-top:4px;

    margin-right:10px;

}

.mcp-message-time{
    font-size:12px;
    color:#8a94a6;
    margin-top:4px;
    margin-left:10px;
}

.mcp-messages-composer{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 28px;
    background:#f7f9fc;
    border-top:1px solid #e5ebf2;
}

.mcp-messages-input{
    flex:1;
    margin-left:-12px;
    min-height:38px;
    max-height:140px;
    resize:none;
    border:1px solid #d9e2ec;
    border-radius:24px;
    padding:10px 18px;
    font:inherit;
    outline:none;
    transition:.2s;
}

.mcp-messages-input:focus{
    border-color:var(--mcp-brand);
    box-shadow:0 0 0 3px rgba(54,84,114,.12);
}

.mcp-messages-attach{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #d8e2ec;

    border-radius:50%;

    background:#fff;

    color:#5d6b7b;

    cursor:pointer;

    flex-shrink:0;

}

.mcp-messages-send{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:none;
    border-radius:50%;

    background:var(--mcp-brand);
    color:#fff;

    cursor:pointer;
    transition:.2s;

    flex-shrink:0;
}

.mcp-messages-send:hover{
    background:var(--mcp-brand-hover);
}

.mcp-messages-send svg{
    transform:rotate(-15deg);
}

.mcp-page-header{
    flex-shrink:0;
}

.mcp-messages-sidebar,
.mcp-messages-conversation{

    display:flex;
    flex-direction:column;

    min-height:0;
}

.mcp-messages-page{
    display:flex;
    flex-direction:column;
    height:100%;
    padding-bottom:18px;
    box-sizing:border-box;
}

/*======================================
ATTACHMENTS
======================================*/

.mcp-chat-attachment{

    background:#eef2f6;

    border:1px solid #d7dde6;
    border-radius:16px;

    color:#4b5563;
    text-decoration:none;

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 18px;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .15s ease;

}

.mcp-chat-attachment:hover{

    background:#e6ebf1;

    border-color:#c3ccd8;

    box-shadow:0 2px 8px rgba(0,0,0,.06);

    transform:translateY(-1px);

}

.mcp-chat-attachment:active{

    transform:translateY(0);

}

/*--------------------------------------
Icon
--------------------------------------*/

.mcp-chat-attachment-icon{

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    background:#f8fafc;

    border:1px solid #d2dae4;
    border-radius:12px;

    color:#7f8b9a;

    font-size:22px;

    line-height:1;

}

/*--------------------------------------
Filename
--------------------------------------*/

.mcp-chat-attachment-name{

    flex:1;

    font-size:16px;
    font-weight:600;

    color:#4b5563;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

/*--------------------------------------
Deleted Attachment
--------------------------------------*/

.mcp-chat-attachment-deleted{

    cursor:default;

    background:#eef2f6;

    border-color:#d7dde6;

}

.mcp-chat-attachment-deleted:hover{

    background:#eef2f6;

    border-color:#d7dde6;

    box-shadow:none;

    transform:none;

}

.mcp-chat-attachment-deleted .mcp-chat-attachment-icon{

    background:#f8fafc;

    border:1px solid #d2dae4;

    color:#d79b00;

}

.mcp-chat-attachment-deleted .mcp-chat-attachment-name{

    color:#4b5563;

}

.mcp-messages-empty{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#6b7280;

    padding:40px;

}

.mcp-messages-empty h2{

    margin:18px 0 10px;

    color:#43597A !important;

    font-size:36px;

    font-weight:700;

}

.mcp-messages-empty p{

    max-width:420px;

    line-height:1.4;

    margin:0;

}

.mcp-messages-empty-icon{

    color:#43597A !important;

    opacity:.28;

    margin-bottom:10px;

}

.mcp-reply-form button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.mcp-unread-badge{

    width:8px;
    height:8px;

    min-width:7px;

    border-radius:50%;

    background:var(--mcp-brand);

    opacity:.9;

}

.mcp-messages-thread.unread:not(.active){

    background:#f3f8fd;

}

.mcp-messages-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:18px 0 18px;

    background:#f7f9fc;

    border-bottom:1px solid #e5ebf2;

    flex-shrink:0;

}

.mcp-messages-header-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--mcp-brand);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:700;

}

.mcp-messages-header-name{

    font-size:18px;

    font-weight:600;

    color:#1f2937;

}

.mcp-messages-firm-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #405a7c;
    border-radius: 50%;
    overflow: hidden;
}

.mcp-messages-firm-logo {
    display: block;

    width: 46px;
    height: 46px;

    object-fit: contain;
}