#lea-conversations-app{

display:flex;
height:calc(100vh - 50px);
border:1px solid #e5e7eb;
border-radius:12px;
overflow:hidden;
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.05);

}

.lea-sidebar{

width:320px;
flex-shrink:0;
overflow-y:auto;
overflow-x:hidden;
border-right:1px solid #ddd;

}

.lea-sidebar-header{

padding:10px;
font-weight:bold;
font-size:14px;
border-bottom:1px solid #ddd;

}

.lea-conversation{

padding:10px;
cursor:pointer;
border-bottom:1px solid #eee;

}

.lea-conversation:hover{

background:#f6f6f6;

}

.lea-chat{

display:flex;
flex-direction:column;
flex:1;
min-width:0;
min-height:0;
overflow:hidden;

}

.lea-chat-header{

padding:10px;
border-bottom:1px solid #ddd;
font-weight:bold;

}

.lea-chat-body{

flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:14px;
background:#f5f7fb;

}

.lea-chat-footer{

padding:10px;
border-top:1px solid #ddd;

}

.lea-chat-footer input{

width:100%;
padding:10px;
font-size:12px;

}

.lea-message{

display:flex;
margin-bottom:15px;

}

.lea-message.incoming{

justify-content:flex-start;

}

.lea-message.assistant{

justify-content:flex-end;

}

.lea-message.agent{

justify-content:flex-end;

}

.bubble{

    display:inline-block;

    padding:8px 12px;

    border-radius:12px;

    max-width:68%;

    width:auto;

    min-height:auto;

    height:auto;

    line-height:1.35;

    font-size:12px;

    word-break:break-word;

}

.incoming .bubble{

background:white;
border:1px solid #ddd;

}

.assistant .bubble{

background:#DCF8C6;

}

.agent .bubble{

background:#cce5ff;

}
.bubble-text{

    white-space:pre-wrap;
    word-break:break-word;

}

.bubble-time{

    margin-top:8px;

    font-size:11px;

    color:#888;

    text-align:right;

}
.conversation-title{

display:flex;
justify-content:space-between;
align-items:center;

}

.conversation-time{

font-size:11px;
color:#999;

}

.conversation-status{

display:inline-block;
margin-top:4px;
padding:2px 8px;
border-radius:20px;
background:#eef3ff;
font-size:11px;

}

.conversation-agent{

margin-top:4px;
font-size:12px;
color:#777;

}

.conversation-preview{

margin-top:6px;
font-size:13px;
color:#667;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.lea-chat-contact{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    width:100%;
}

.lea-chat-left{
    display:flex;
    flex-direction:column;
}

.lea-chat-name{
    font-size:16px;
    font-weight:700;
    line-height:1.2;
}

.lea-chat-phone{
    margin-top:6px;
    font-size:12px;
    color:#555;
}

.lea-chat-right{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:4px;
}

.lea-chat-status{
    display:flex;
    align-items:center;
    gap:10px;
}

#leaBotIcon{
    font-size:24px;
}

.lea-chat-window{

    margin-top:4px;

    font-size:12px;

    font-weight:500;

    color:#667;

}

/* ==========================================
   CHAT FOOTER
========================================== */

.lea-chat-footer{

    border-top:1px solid #e5e7eb;

    padding:12px;

    background:#fff;

}

.lea-chat-input-row{

    display:flex;

    gap:10px;

    align-items:center;

}

#lea-chat-input{

    flex:1;

    height:42px;

    border:1px solid #d1d5db;

    border-radius:8px;

    padding:0 12px;

    font-size:12px;

}

.lea-send-button{

    height:42px;

    padding:0 14px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

    font-weight:600;

}

.lea-send-button:hover{

    background:#1d4ed8;

}

.lea-chat-actions{

    margin-top:14px;

}

.lea-actions-label{

    display:block;

    margin-bottom:6px;

    font-size:12px;

    color:#667;

    font-weight:600;

}

#leaTemplateSelect{

    width:100%;

    height:40px;

    border:1px solid #d1d5db;

    border-radius:8px;

    padding:0 10px;

    background:#fff;

    font-size:14px;

}

/*==============================
MODAL
==============================*/

.lea-modal{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    z-index:99999;

}

.lea-modal-content{

    width:650px;

    max-width:90vw;

    max-height:85vh;

    overflow:auto;

    background:#fff;

    border-radius:12px;

    padding:24px;

}

.lea-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

#leaCloseTemplateModal{

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;

}

.lea-message .bubble{

    display:inline-block !important;

    width:auto !important;
    height:auto !important;
    min-height:unset !important;
    max-height:none !important;

}

.lea-message .bubble-text{

    display:block !important;

    text-align:left !important;

    margin:0 !important;
    padding:0 !important;

    line-height:1.35 !important;

}

.lea-message .bubble-time{

    display:block !important;

    margin-top:4px !important;

    text-align:right !important;

}
