body { font-family: "Heebo", sans-serif; direction: rtl; margin:0; overflow-x:hidden; }
textarea{font-family:"Heebo", sans-serif}
.headBot { background:#000; display:flex; align-items:center; justify-content:space-between; height:100px; }
.bodyBot { margin:0; height:calc(100vh - 70px); display:flex; overflow:hidden; flex-direction:row; }
#robot, #client { width:50%; box-sizing:border-box; padding:20px; overflow-y:auto; overflow-x:hidden; border-left:1px solid #ddd; position:relative; }
#robot { background:#f0f0f0; padding:0; }
#robot img { max-width:100%; width:200px; }
#robot h2, #client h2 { margin-top:0; }
#robotMessages { overflow-y:scroll; margin-top:10px; height:calc(100vh - 400px); padding-inline:40px; }
.message { background:#f7f7f7; margin:0 auto 20px; padding:10px; border-radius:10px; box-shadow:0 0 3px #ccc; max-width:1000px; font-size:20px; color:#333; border:1px solid #eee; }
#sendBtn svg { transform:rotate(180deg); height:25px; width:25px; filter:brightness(0.5); }
#client input[type=text] { width:96%; padding:10px; font-size:16px; border-radius:15px; border:1px solid #eee; height:45px; }
#client button { width:70px; font-size:17px; margin-right:10px; cursor:pointer; }
#recordBtn { background:#000; border:none; color:#fff; border-radius:50%; position:relative; transition:background-color .3s; padding:10px 15px; }
#recordBtn.recording { background:#dc3545; animation:pulse 1s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 5px 0 #dc3545;} 50%{box-shadow:0 0 15px 5px #dc3545;} 100%{box-shadow:0 0 5px 0 #dc3545;} }
.input-container { width:calc(100% - 155px); position:relative; background:#fff; border:1px solid #eee; border-radius:10px; }
#sendBtn { padding:10px 15px; font-size:1rem; margin-left:10px; cursor:pointer; border:none; border-radius:6px; position:absolute; color:#fff; left:0; bottom:5px; background:transparent; }
.box { display:flex; position:absolute; bottom:10px; width:100%; }
#messageInput{ border:none; outline:none; min-height:45px; max-height:200px; padding:10px; font-size:16px; resize:none; overflow:auto; box-sizing:border-box; width:86%; margin-right:5px; scrollbar-width:none; -ms-overflow-style:none; }
#messageInput::-webkit-scrollbar { display:none; }
ul.main-menu { margin:0; height:70px; display:flex; align-items:center; }
ul.main-menu li{ padding:10px; list-style:none; }
ul.main-menu li a{ color:#fff; text-decoration:none; font-size:22px; }
.OpenMenu:before { content:""; height:1px; width:25px; display:inline-block; position:absolute; top:21px; right:38px; box-shadow:#fff 0 8px, #fff 0 17px; background:#fff; }
.OpenMenu { width:120px; padding:0; height:60px; cursor:pointer; position:relative; top:-2px; right:0; z-index:9999999; display:block; }
html, body { height:100%; color:#eee; }
canvas { background:transparent !important; display:block; width:100vw; height:100vh; }
.logo { height:268px; position:relative; top:71px; z-index:99; }
#ui { position:fixed; inset-inline:12px; bottom:12px; z-index:10; display:grid; gap:10px; grid-template-columns:repeat(12, minmax(0,1fr)); pointer-events:none; }
.card { background:rgba(20,20,20,.8); border:1px solid #2a2a2a; border-radius:10px; padding:10px; pointer-events:auto; backdrop-filter:blur(6px); }
.title { font-size:12px; color:#9aa; margin:0 0 6px; }
.btn { cursor:pointer; border:1px solid #3a3a3a; background:#171717; color:#eee; border-radius:8px; padding:7px 10px; font-size:13px; }
.btn:hover { background:#222; }
.btn.active { border-color:#7dd3fc; color:#7dd3fc; }
#animList { display:flex; flex-wrap:wrap; gap:6px; }
#toast { position:fixed; top:12px; inset-inline:12px; text-align:center; color:#555; font-size:12px; }
#avatar-container { position:relative; width:100%; height:100%; }
#avatar-container canvas { width:100% !important; height:100vh !important; display:block; background:transparent !important; }
.myConversation { color:#fff; cursor:pointer; font-size:23px; transform:rotate(270deg); display:block; width:183px; height:37px; position:absolute; left:-110px; top:95px; background:#0a1a57; border-top-left-radius:20px; border-top-right-radius:20px; text-align:center; }
.SIDE-right { transition:right .5s ease; background:rgb(255 255 255 / 78%); position:fixed; width:50%; right:-50%; z-index:22; overflow-y:visible; }
.open{right:0px!important;} .close{margin-top:20px; margin-right:20px; cursor:pointer;}
.box-conversation-center{text-align:center; font-size:30px; color:#000;}
.head-convesation-h2{ margin:0; margin-top:61px; line-height:33px; }
.head-convesation-h3{ margin-top:0; font-size:30px; }
@media (max-width:600px) {
.logo { height:110px; top:0; }
#client input[type=text] { width:100%; height:45px; padding:0; font-size:16px; border-radius:25px; border:1px solid #eee; text-indent:10px; }
#client button { width:50px; padding:0; margin:0; height:45px; }
#recordBtn img{ width:20px; height:20px; }
#recordBtn{ padding:0; margin:0; width:40px; }
nav.primary-nav { display:none; }
.bodyBot { height:calc(100vh - 70px); flex-direction:column; }
#robot, #client { width:100%; }
#heading-client { display:none; }
#robot{ height:100%; padding:0!important; }
#client { height:60px; position:fixed; bottom:0; padding:0; }
.box { height:45px; display:flex; position:absolute; bottom:10px; width:100%; justify-content:space-around; }
#robotMessages{ min-height:200px; padding-inline:10px; }
.input-container { position:relative; width:calc(100% - 80px); }
#sendBtn { position:absolute; bottom:10px; left:10px; background:#fff; height:30px!important; border:none; display:flex; width:auto!important; }
.bodyBot{ position:fixed; }
.SIDE-right{ width:100%; right:-100%; }
#messageInput{ min-height:45px; max-height:200px; padding:10px; font-size:16px; width:86%; margin-right:5px; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
#messageInput::-webkit-scrollbar { display:none; }
.box{ position:fixed; height:auto; }
.close{ height:33px; margin-top:0; }
.head-convesation-h3{ font-size:20px; }
.head-convesation-h2 { font-size:24px;margin-top
:15px}
}