.lox-message{

    margin-bottom:10px;

    padding:8px 12px;

    border-radius:10px;

    max-width:80%;

}



.lox-owner{

    background:#eee;

}





#lox-chat-input{

    display:flex;

    padding:10px;

}



#lox-chat-input input{

    flex:1;

    padding:10px;

}


#lox-chat-input button{

    width:60px;

}

#lox-chat-typing{

    height:18px;

    font-size:12px;

    color:#888;

    padding:4px 10px;

}





#chat-file-preview{
    margin-bottom:10px;
}


.lox-file-preview{

    background:#f5f5f5;

    padding:10px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:10px;

}


.lox-file-preview button{

    border:none;

   

    color:#000;

    border-radius:50%;

    width:28px;

    height:28px;

}


.lox-file-preview{

    background:#f8f9fa;

    padding:10px;

    border-radius:12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}


.lox-file-info{

    display:flex;

    align-items:center;

    gap:10px;

}


.lox-file-actions{

    display:flex;

    gap:5px;

}


.lox-file-actions button{

    width:38px;

    height:32px;

}

.recording-status{

display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:#d00;
margin:5px 0;

}



.record-dot{

width:10px;
height:10px;

background:red;

border-radius:50%;

animation:pulseRecord 1s infinite;

}



@keyframes pulseRecord{

0%{
opacity:1;
}

50%{
opacity:.2;
}

100%{
opacity:1;
}

}


#lox-chat-button{

position:fixed;

bottom:var(--lx-chat-marginb);

width:var(--lx-chat-size);

height:var(--lx-chat-size);

background:var(--lx-chat-iconbg);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

cursor:pointer;

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

z-index:99999;

animation:fadeUp .4s;

}

#lox-chat-button.chat-right{
    right:var(--lx-chat-margin);
}

#lox-chat-button.chat-left{
    left:var(--lx-chat-margin);
}

@keyframes fadeUp{

from{
transform:translateY(40px);
opacity:0;
}

to{
transform:none;
opacity:1;
}

}













.lox-chat-header{

height:75px;

background:#2563eb;

color:white;

display:flex;

align-items:center;

padding:12px;

gap:12px;

}

.lox-chat-close{
    margin-right: auto;
  padding: 10px 10px;
  background: rgba(0,0,0,.1);
  border-radius: 20px;
  border: 0px;
}
.lox-chat-close svg {
  stroke:#fff
}
.strw2 {
  stroke-width: 2;
}
.lox-avatar img{

width:50px;

height:50px;

border-radius:50%;

}

















.lox-message{

max-width:75%;

margin-bottom:12px;

padding:10px 14px;

border-radius:15px;

font-size:14px;

line-height:1.8;

position:relative;

}








.lox-owner{

background:#fff;

border:1px solid #e5e7eb;

color:#333;

border-bottom-left-radius:4px;
justify-content: flex-end;
}





.lox-message img{

max-width:220px;

border-radius:12px;

}





.lox-reply-box{

background:rgba(0,0,0,.08);

border-right:3px solid #2563eb;

padding:6px;

margin-bottom:8px;

border-radius:8px;

font-size:12px;

}





#chat-reply-preview{

padding:5px 10px;

}








#lox-chat-footer input{

flex:1;

border:1px solid #ddd;

border-radius:25px;

padding:10px 15px;

outline:none;

}








#lox-chat-typing{

font-size:12px;

color:#777;

padding:0 15px;

}



.lox-message{

position:relative;

}



.lox-reply-btn{

position:absolute;

bottom:5px;

right:-32px;

width:28px;

height:28px;

border-radius:50%;

background:#909090;

border:1px solid #ddd;

display:flex;

align-items:center;

justify-content:center;

font-size:16px;

cursor:pointer;

opacity:0;

transition:.2s;

box-shadow:
0 2px 6px rgba(0,0,0,.15);

}



.lox-message:hover 
.lox-reply-btn{

opacity:1;

}



.lox-visitor .lox-reply-btn{

left:-32px;

right:auto;

}



.lox-reply-btn:hover{

background:#656565;

color:white;

}

.lox-reply-box{

display:flex;

gap:8px;

background:rgba(0,0,0,.06);

border-right:3px solid #2563eb;

padding:8px;

margin-bottom:8px;

border-radius:8px;

font-size:12px;

}



.reply-icon{

font-size:18px;

}

.chat-message-animation{

animation-duration:.3s;

animation-fill-mode:both;

}



.lox-owner.chat-message-animation{

animation-name:slideInRight;

}



.lox-visitor.chat-message-animation{

animation-name:slideInLeft;

}



@keyframes slideInRight{

from{

opacity:0;

transform:translateX(40px);

}


to{

opacity:1;

transform:translateX(0);

}

}




@keyframes slideInLeft{

from{

opacity:0;

transform:translateX(-40px);

}


to{

opacity:1;

transform:translateX(0);

}

}



.lox-time{

font-size:11px;

opacity:.6;

text-align:left;

margin-top:5px;

}













#lox-chat-box.drag-active{

border:3px dashed #2563eb;

}



#lox-chat-box.drag-active:after{

content:

"📎 فایل را رها کنید";


position:absolute;

inset:0;


background:

rgba(37,99,235,.15);


display:flex;

align-items:center;

justify-content:center;


font-size:20px;

font-weight:bold;


z-index:100;

}









.lox-chat-header{

height:70px;

background:var(--lx-chat-root);;

color:white;

display:flex;

align-items:center;

padding:12px;

gap:12px;

}



.lox-avatar img{

width:48px;
height:48px;

border-radius:50%;

border:2px solid white;

}



.lox-title{

font-size:16px;

font-weight:bold;
color: #fff;
}








#lox-chat-messages{

flex:1;

overflow-y:auto;

padding:15px;

background:url('/images/bgchat.png');

}




#lox-chat-footer{

padding:10px;

border-top:1px solid #ddd;

background:#fff;



align-items:center;

}




#lox-chat-footer input{

flex:1;

border-radius:20px;

border:1px solid #ddd;

padding:10px 15px;

outline:none;

}


/***
#lox-chat-footer button{

border:0;



color:white;

width:38px;

height:38px;

border-radius:50%;

cursor:pointer;

}
***/



#chat-file-btn,
#chat-record-btn{


color:#444!important;

}




.lox-message{

max-width:80%;

padding:10px 14px;

margin-bottom:12px;

position:relative;

font-size:14px;

line-height:1.8;

animation:slideMessage .25s ease;

}



.lox-visitor{

margin-left:auto;

background: var(--lx-chat-visitorbgcolor);

color:var(--lx-chat-visitorcolor);

border-radius:18px 18px 4px 18px;

}



.lox-owner{

margin-right:auto;

background: var(--lx-chat-adminbgcolor);

color:var(--lx-chat-admincolor);

border-radius:18px 18px 18px 4px;

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

}



.lox-time{

font-size:10px;

opacity:.6;

margin-top:5px;

text-align:left;

}



.lox-status{

font-size:12px;

margin-right:5px;
color: #fff;

}



.lox-reply-btn{


position:absolute;

top:50%;

transform:translateY(-50%);

opacity:0;

cursor:pointer;

font-size:18px;

transition:.2s;

}



.lox-message:hover .lox-reply-btn{

opacity:1;

}



.lox-owner .lox-reply-btn{

right:-30px;

}



.lox-visitor .lox-reply-btn{

left:-30px;

}




@keyframes slideMessage{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:none;

}

}





#chat-reply-preview{

padding:0 10px;

}


#chat-reply-preview .alert{

background:#eef2ff;

border-right:4px solid #2563eb;

border-radius:10px;

font-size:13px;

margin:5px 0;

}



#cancel-chat-reply{

border-radius:50%;

padding:3px 8px;

}
#lox-drop-overlay{

display:none;

position:absolute;

inset:0;

background:rgba(37,99,235,.9);

color:white;

font-size:22px;

align-items:center;

justify-content:center;

text-align:center;

z-index:10;

}



#lox-chat-box.drag-active #lox-drop-overlay{

display:flex;

}
#chat-emoji-box{

position:absolute;

bottom:70px;

right:10px;

width:300px;

height:220px;

background:white;

border-radius:15px;

box-shadow:
0 5px 30px rgba(0,0,0,.15);

padding:10px;

display:none;

overflow-y:auto;

direction:ltr;

}



.chat-emoji{

font-size:25px;

cursor:pointer;

padding:5px;

display:inline-block;

transition:.15s;

}


.chat-emoji:hover{

transform:scale(1.3);

}


#lox-chat-typing{

padding:0 15px;

}



.typing-bubble{


background:white;

width:55px;

padding:10px;

border-radius:20px;

display:flex;

gap:5px;

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

}



.typing-bubble span{


width:7px;

height:7px;

background:#999;

border-radius:50%;

animation:typing 1.2s infinite;

}



.typing-bubble span:nth-child(2){

animation-delay:.2s;

}


.typing-bubble span:nth-child(3){

animation-delay:.4s;

}




@keyframes typing{


0%,80%,100%{

transform:translateY(0);

}


40%{

transform:translateY(-6px);

}


}





#chat-emoji-popup{

position:absolute;

bottom:75px;

right:10px;

width:320px;

height:260px;

background:#fff;

border-radius:18px;

box-shadow:
0 10px 35px rgba(0,0,0,.2);

padding:15px;

display:none;

overflow-y:auto;

direction:ltr;

z-index:9999;

animation:emojiPopup .2s ease;

}



#chat-emoji-popup.show{

display:block;

}



@keyframes emojiPopup{


from{

opacity:0;

transform:
translateY(15px)
scale(.95);

}


to{

opacity:1;

transform:
translateY(0)
scale(1);

}


}




.chat-emoji-item{

display:inline-flex;

width:36px;

height:36px;

align-items:center;

justify-content:center;

font-size:25px;

cursor:pointer;

border-radius:10px;

transition:.15s;

}



.chat-emoji-item:hover{

background:#f1f1f1;

transform:scale(1.2);

}



#chat-emoji-btn{

border:0;

background:none;

font-size:22px;

cursor:pointer;

}









#lox-unread-count{

position:absolute;

top:-5px;
right:-5px;

background:#e53935;

color:white;

width:22px;
height:22px;

border-radius:50%;

display:none;

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

font-size:12px;

}


.lox-chat-icon{

position:relative;

}

.lox-chat-icon img{
border-radius: 50%;
height: var(--lx-chat-size);
width: var(--lx-chat-size);

}

#lox-chat-notify{

position:fixed;


bottom:90px;

z-index:99999;

width:300px;

opacity:0;

transform:translateY(20px) scale(.95);

pointer-events:none;

transition:
opacity .25s ease,
transform .25s ease;

}

#lox-chat-notify.chat-right{
right:25px;
}
#lox-chat-notify.chat-left{
left:25px;    
}




#lox-chat-notify.show{

opacity:1;

transform:
translateY(0)
scale(1);

pointer-events:auto;

}



.lox-popup-message{

background:#fff;

border-radius:15px;

padding:12px;

display:flex;

gap:12px;

align-items:center;

box-shadow:
0 10px 35px rgba(0,0,0,.18);

cursor:pointer;

}



.popup-avatar img{

width:45px;
height:45px;

border-radius:50%;

}



.lox-popup-message strong{

display:block;

font-size:14px;

margin-bottom:5px;

}


.lox-popup-message div{

font-size:13px;

color:#555;

}




.lox-popup-message{

display:flex;

gap:10px;

align-items:center;

}



.popup-avatar img{

width:45px;

height:45px;

border-radius:50%;

}



@keyframes slideUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}








#lox-chat-box {

position:fixed;


bottom:25px;

width:360px;
height:90%;

background:#fff;

border-radius:18px;

box-shadow:
0 15px 50px rgba(0,0,0,.18);

overflow:hidden;

z-index:999998;


/* حالت بسته */

opacity:0;

visibility:hidden;

transform:
translateY(40px)
scale(.92);


transition:
opacity .35s ease,
transform .35s cubic-bezier(.34,1.56,.64,1),
visibility .35s;

flex-direction: column;
}

#lox-chat-box.chat-right{
    right:20px;
}

#lox-chat-box.chat-left{
    left:20px;
}




#lox-chat-box.show {

opacity:1;

visibility:visible;

transform:
translateY(0)
scale(1);
 display:flex;
}


.chat-audio-player{
    width:220px;
    margin-top:8px;
}

.lox-image-viewer
{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}



.lox-image-viewer img
{
    max-width:95%;
    max-height:95%;
    object-fit:contain;
}



.lox-image-close
{
    position:absolute;
    top:20px;
    right:25px;
    color:white;
    font-size:32px;
    cursor:pointer;
}









#chat-record-btn svg ,.fileinput-new svg {
  opacity: .7;

}
.fileinput-new svg {
fill: #777;
}
#chat-record-btn svg {
  stroke: #777;
}
.strw1 {
  stroke-width: 1.5;
}
.strdef {
  fill: none;
  margin:0 auto;
}

#chat-emoji-btn svg {
      stroke-width: 10;
  stroke: #777;

}

#send-voice,#cancel-voice {
    width: 50%;
    color: #000;
}


.chat-input-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.chat-input-row button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 5px;
    cursor: pointer;
}

.chat-input-row input {
    flex: 1;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
}





#chat-voice-preview {
    width: 100%;
}

#chat-voice-preview .lox-voice-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#chat-voice-preview .lox-voice-preview audio {
    width: 100%;
    display: block;
}

#chat-voice-preview .lox-voice-preview > div:last-child {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

#chat-voice-preview .lox-voice-preview > div:last-child button {
    flex: 1;
    margin: 0;
}



.lox-file-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lox-file-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lox-file-info img {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin-bottom: 8px;
}

.lox-file-info small {
    opacity: 0.7;
}

.lox-file-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.lox-file-actions button {
    flex: 1;
    margin: 0;
}



#send-message svg {
    stroke: #cfcfcf;
        transform: scaleX(-1);

}
.btn-success svg {
    stroke: #cfcfcf;
        transform: scaleX(-1);

}