@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap');
:root{
    --pc:#4d41bd;
    --sc:#868686;
    --bg:#101010;
    --dk:#252525;
    --ddp:#181818;
    --bc:rgba(255,255,255,0.10);
    --tr:0.3s ease;
    --rd:12px;
    font-family:'IBM Plex Sans Arabic',sans-serif;
}


.scene{
    position:fixed;
    z-index: 999999999999;
    bottom: 0;
    right: 0;
}

.fab{
    position:absolute;
    bottom:24px;
    right:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--pc);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 20px rgba(77,65,189,0.5);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s;
    z-index:10;
}
.fab:hover{transform:scale(1.1);}
.fab svg{width:22px;height:22px;fill:#fff;transition:transform .3s ease;}
.fab.open svg{transform:rotate(45deg);}

.badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:18px;
    height:18px;
    background:#e24b4a;
    border-radius:50%;
    font-size:10px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    border:2px solid #0a0a0a;
}

.widget{
    position:absolute;
    bottom:90px;
    right:24px;
    width:340px;
    min-height: 600px;
    max-height:600px;
    background:var(--ddp);
    border-radius:18px;
    border:1px solid var(--bc);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 0 0.5px rgba(255,255,255,0.05);
    transform-origin:bottom right;
    transform:scale(0.85) translateY(20px);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.34,1.45,.64,1),opacity .25s ease;
}
.widget.open{
    transform:scale(1) translateY(0);
    opacity:1;
    pointer-events:all;
}

.hdr{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    background:var(--dk);
    border-bottom:1px solid var(--bc);
    flex-shrink:0;
}
.hdr-l{
    display:flex;
    align-items:center;
    gap:10px;
}
.av{
    width:36px;
    height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--pc),#7b6ff0);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:600;
    color:#fff;
    flex-shrink:0;
    position:relative;
}
.av::after{
    content:'';
    position:absolute;
    bottom:1px;
    right:1px;
    width:9px;
    height:9px;
    background:#22c55e;
    border-radius:50%;
    border:2px solid var(--dk);
}
.av-sm{width:26px;height:26px;border-radius:8px;flex-shrink:0;font-size:10px;}
.bot-name{font-size:13px;font-weight:600;color:#fff;}
.bot-sub{font-size:10px;color:var(--sc);}
.hdr-btns{display:flex;gap:2px;}
.hbtn{
    width:28px;
    height:28px;
    border:none;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--sc);
    transition:var(--tr);
}
.hbtn:hover{background:rgba(255,255,255,0.07);color:#fff;}
.hbtn svg{width:14px;height:14px;fill:currentColor;}

.body{
    flex:1;
    overflow-y:auto;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    background:var(--bg);
    min-height:0;
    max-height:calc(600px - 180px);
}
.body::-webkit-scrollbar{width:4px;}
.body::-webkit-scrollbar-track{background:transparent;}
.body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px;}

.mw{
    display:flex;
    align-items:flex-end;
    gap:7px;
    animation:mIn .22s ease both;
}
.mw.u{flex-direction:row-reverse;}
@keyframes mIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.mc{display:flex;flex-direction:column;}
.mw.u .mc{align-items:flex-end;}

.bbl{
    max-width:210px;
    padding:8px 11px;
    border-radius:14px;
    font-size:12.5px;
    line-height:1.5;
    color:rgba(255,255,255,0.9);
    background:var(--dk);
    border:1px solid var(--bc);
}
.bbl.u{
    background:var(--pc);
    border-color:rgba(77,65,189,0.3);
}
.bbl.voice-bbl{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    cursor:pointer;
    user-select:none;
}
.bbl.file-bbl{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
}
.bbl.stk{background:transparent;border:none;padding:0;font-size:36px;}
.mt{font-size:9.5px;color:var(--sc);margin-top:2px;padding:0 2px;}
.mw.u .mt{text-align:right;}

.wave{
    display:flex;
    align-items:center;
    gap:2px;
    height:20px;
}
.wave span{
    width:3px;
    border-radius:3px;
    background:rgba(255,255,255,0.5);
    animation:wv 1s ease-in-out infinite;
}
.bbl.u .wave span{background:rgba(255,255,255,0.7);}
.wave span:nth-child(1){height:6px;animation-delay:0s;}
.wave span:nth-child(2){height:12px;animation-delay:.1s;}
.wave span:nth-child(3){height:18px;animation-delay:.2s;}
.wave span:nth-child(4){height:10px;animation-delay:.3s;}
.wave span:nth-child(5){height:14px;animation-delay:.4s;}
.wave span:nth-child(6){height:8px;animation-delay:.5s;}
.wave span:nth-child(7){height:16px;animation-delay:.15s;}
.wave span:nth-child(8){height:6px;animation-delay:.35s;}
@keyframes wv{0%,100%{transform:scaleY(0.5);}50%{transform:scaleY(1);}}
.wave.paused span{animation-play-state:paused;opacity:0.4;}
.vdur{font-size:11px;color:var(--sc);min-width:28px;}
.bbl.u .vdur{color:rgba(255,255,255,0.6);}
.vplay{
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.bbl.u .vplay{background:rgba(255,255,255,0.2);}
.vplay svg{width:10px;height:10px;fill:#fff;}

.file-icon{
    width:30px;
    height:30px;
    border-radius:8px;
    background:rgba(77,65,189,0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.file-icon svg{width:15px;height:15px;fill:#7b6ff0;}
.file-info{flex:1;min-width:0;}
.file-name{font-size:11.5px;color:rgba(255,255,255,0.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-size{font-size:10px;color:var(--sc);}

.typing{display:flex;align-items:center;gap:7px;display:none;}
.tdots{background:var(--dk);border:1px solid var(--bc);border-radius:14px;padding:9px 13px;display:flex;gap:4px;align-items:center;}
.d{width:5px;height:5px;border-radius:50%;background:var(--sc);animation:dp 1.2s infinite;}
.d:nth-child(2){animation-delay:.2s;}.d:nth-child(3){animation-delay:.4s;}
@keyframes dp{0%,80%,100%{opacity:.3;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}

.sugg{padding:8px 12px 4px;background:var(--bg);border-top:1px solid var(--bc);flex-shrink:0;}
.sugg-lbl{font-size:10.5px;color:var(--sc);text-align:center;margin-bottom:6px;}
.sbts{display:flex;flex-direction:column;gap:5px;}
.sbt{padding:7px 12px;background:transparent;border:1px solid var(--bc);border-radius:20px;color:rgba(255,255,255,0.7);font-size:11.5px;cursor:pointer;font-family:inherit;transition:var(--tr);text-align:left;}
.sbt:hover{background:rgba(77,65,189,0.15);border-color:rgba(77,65,189,0.5);color:#fff;}

.footer{padding:10px 12px 12px;background:var(--ddp);border-top:1px solid var(--bc);flex-shrink:0;}
.ibox{background:var(--dk);border:1px solid var(--bc);border-radius:var(--rd);transition:var(--tr);}
.ibox:focus-within{border-color:rgba(77,65,189,0.5);box-shadow:0 0 0 3px rgba(77,65,189,0.1);}
.eml{width:100%;background:transparent;border:none;outline:none;color:rgba(255,255,255,0.8);font-family:inherit;font-size:12px;padding:9px 11px;border-bottom:1px solid var(--bc);}
.eml::placeholder{color:rgba(255,255,255,0.22);}
.msg-row{display:flex;align-items:flex-end;gap:6px;padding:6px 8px 6px 6px;}
.tinp{flex:1;background:transparent;border:none;outline:none;color:rgba(255,255,255,0.85);font-family:inherit;font-size:12.5px;resize:none;min-height:50px;max-height:72px;line-height:1.4;padding:3px 0;}
.tinp::placeholder{color:rgba(255,255,255,0.22);}
.ia{display:flex;align-items:center;gap:4px;}
.abt{width:30px;height:30px;border:none;border-radius:8px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sc);transition:var(--tr);flex-shrink:0;}
.abt:hover{color:rgba(255,255,255,0.75);}
.abt svg{width:17px;height:17px;fill:currentColor;}
.abt.rec-active{color:#e24b4a;animation:recPulse .8s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.sndbtn{width:32px;height:32px;border-radius:10px;background:var(--pc);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0;}
.sndbtn:hover{background:#5d51d3;transform:scale(1.05);}
.sndbtn svg{width:13px;height:13px;fill:#fff;}

.epicker{display:none;padding:10px;background:var(--dk);border-top:1px solid var(--bc);flex-wrap:wrap;gap:6px;max-height:130px;overflow-y:auto;}
.epicker.show{display:flex;}
.ebt{background:transparent;border:none;cursor:pointer;font-size:20px;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:var(--tr);}
.ebt:hover{background:rgba(255,255,255,0.08);}

.spicker{display:none;padding:10px;background:var(--dk);border-top:1px solid var(--bc);flex-wrap:wrap;gap:6px;max-height:130px;overflow-y:auto;}
.spicker.show{display:flex;}
.spbt{background:transparent;border:none;cursor:pointer;font-size:28px;width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:var(--tr);}
.spbt:hover{background:rgba(255,255,255,0.08);}

/* voice notification */
.voice-notify {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2e;
    backdrop-filter: blur(12px);
    padding: 8px 20px;
    border-radius: 40px;
    font-size: 13px;
    color: white;
    z-index: 200;
    pointer-events: none;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition: opacity 0.2s;
    opacity: 0;
}