@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
#sanad{--c1:#1a3a4a;--c1d:#0d1f2b;--c2:#c9953c;--c2l:#f0dca8;--bg:#faf6ee;--tx:#2c2c2c;--mu:#8a8a8a;--bd:#e5ddd0;font-family:'Tajawal',sans-serif;direction:rtl}
#sanad *{box-sizing:border-box;margin:0;padding:0}

/* Position */
#sanad.sanad-left #s-tog,#sanad.sanad-left #s-win{left:24px;right:auto}
#sanad.sanad-right #s-tog,#sanad.sanad-right #s-win{right:24px;left:auto}
#sanad.sanad-left #s-win{transform-origin:bottom left}
#sanad.sanad-right #s-win{transform-origin:bottom right}

/* Toggle */
#s-tog{position:fixed;bottom:24px;z-index:999999;width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,var(--c2),#b8842e);border:none;cursor:pointer;box-shadow:0 6px 24px rgba(201,149,60,.4);display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.22,1,.36,1)}
#s-tog:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(201,149,60,.5)}
#s-tog.open{transform:rotate(90deg) scale(.95)}
#s-tog-i{font-size:26px;font-weight:800;color:var(--c1d);font-family:'Tajawal',sans-serif;transition:all .3s}
#s-tog.open #s-tog-i{font-size:22px}
#s-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:#ef4444;border:2.5px solid #fff;display:none;animation:sbp 2s ease infinite}
@keyframes sbp{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Window */
#s-win{position:fixed;bottom:100px;z-index:999998;width:400px;height:600px;max-height:80vh;border-radius:20px;overflow:hidden;background:var(--bg);box-shadow:0 12px 48px rgba(0,0,0,.15);display:flex;flex-direction:column;transform:scale(0) translateY(20px);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.22,1,.36,1)}
#s-win.vis{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
@media(max-width:480px){
    #s-win{width:calc(100vw - 16px)!important;height:calc(100vh - 90px)!important;max-height:none!important;bottom:8px!important;left:8px!important;right:8px!important;border-radius:16px!important}
    #s-tog{bottom:16px!important}
    #sanad.sanad-left #s-tog{left:16px}#sanad.sanad-right #s-tog{right:16px}
}

/* Header */
.s-hd{background:linear-gradient(135deg,var(--c1),var(--c1d));padding:14px 16px;display:flex;align-items:center;gap:12px;position:relative;flex-shrink:0}
.s-hd::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c2),var(--c2l),var(--c2))}
.s-hd-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--c2),#b8842e);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--c1d);border:2px solid rgba(255,255,255,.15);box-shadow:0 4px 12px rgba(0,0,0,.2);flex-shrink:0;font-family:'Tajawal'}
.s-hd-inf{flex:1;min-width:0}
.s-hd-n{color:#fff;font-size:17px;font-weight:700}
.s-hd-s{color:var(--c2l);font-size:11px;opacity:.9}
.s-hd-st{display:flex;align-items:center;gap:5px;margin-top:2px}
.s-hd-st i{width:6px;height:6px;border-radius:50%;background:#4ade80;display:block;animation:sdp 2s ease infinite}
@keyframes sdp{0%,100%{opacity:1}50%{opacity:.4}}
.s-hd-st span{color:rgba(255,255,255,.6);font-size:10px}
.s-hd-x{background:none;border:none;color:rgba(255,255,255,.5);font-size:18px;cursor:pointer;padding:6px;transition:color .2s;line-height:1}
.s-hd-x:hover{color:#fff}

/* Chat */
.s-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.s-chat::-webkit-scrollbar{width:4px}.s-chat::-webkit-scrollbar-thumb{background:var(--bd);border-radius:10px}

/* Welcome */
.s-welc{display:flex;flex-direction:column;align-items:center;padding:16px 8px;text-align:center;animation:sfu .5s ease}
@keyframes sfu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.s-welc-ic{width:64px;height:64px;border-radius:50%;background:linear-gradient(145deg,var(--c2),#b8842e);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--c1d);font-weight:800;margin-bottom:12px;box-shadow:0 6px 20px rgba(201,149,60,.25);font-family:'Tajawal'}
.s-welc h3{font-size:18px;color:var(--c1);margin-bottom:6px;font-weight:700}
.s-welc p{font-size:13px;color:var(--mu);line-height:1.7;margin-bottom:16px;max-width:280px}
.s-welc-acts{display:flex;flex-direction:column;gap:7px;width:100%}
.s-wbtn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--bd);background:#fff;cursor:pointer;font-family:'Tajawal';text-align:right;transition:all .2s;font-size:12.5px;font-weight:500;color:var(--c1)}
.s-wbtn:hover{border-color:var(--c2);box-shadow:0 3px 10px rgba(201,149,60,.1);transform:translateY(-1px)}
.s-wbtn i{width:32px;height:32px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;font-style:normal}

/* Messages */
.s-m{display:flex;gap:8px;max-width:90%;animation:smi .3s cubic-bezier(.22,1,.36,1)}
@keyframes smi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.s-m-b{align-self:flex-start}.s-m-u{align-self:flex-end;flex-direction:row-reverse}
.s-m-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:3px;font-family:'Tajawal'}
.s-m-b .s-m-av{background:linear-gradient(145deg,var(--c2),#b8842e);color:var(--c1d);font-weight:700}
.s-m-u .s-m-av{background:var(--c1);color:#fff;font-size:11px}
.s-m-bub{padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.75;box-shadow:0 2px 10px rgba(0,0,0,.05);word-break:break-word}
.s-m-b .s-m-bub{background:#fff;border:1px solid var(--bd);border-top-right-radius:3px;color:var(--tx)}
.s-m-u .s-m-bub{background:linear-gradient(135deg,var(--c1),var(--c1d));color:#fff;border-top-left-radius:3px}

/* Quick option buttons inside bot messages */
.s-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.s-opt{padding:7px 14px;border-radius:20px;border:1.5px solid var(--bd);background:#fff;cursor:pointer;font-family:'Tajawal';font-size:12px;font-weight:500;color:var(--c1);transition:all .2s}
.s-opt:hover{background:var(--c1);color:#fff;border-color:var(--c1)}

/* Book Card */
.s-bk{display:flex;gap:10px;background:linear-gradient(135deg,#fefcf7,#f8f2e6);border:1px solid var(--bd);border-radius:10px;padding:10px;margin:8px 0;cursor:pointer;transition:all .2s;text-decoration:none!important;color:inherit!important}
.s-bk:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(26,58,74,.1);border-color:var(--c2)}
.s-bk-img{width:60px;height:85px;border-radius:5px;object-fit:cover;flex-shrink:0;box-shadow:1px 1px 6px rgba(0,0,0,.12);background:var(--bd)}
.s-bk-ph{width:60px;height:85px;border-radius:5px;flex-shrink:0;background:linear-gradient(145deg,var(--c1),var(--c1d));display:flex;align-items:center;justify-content:center;color:var(--c2);font-size:20px}
.s-bk-inf{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.s-bk-n{font-size:13px;font-weight:700;color:var(--c1);line-height:1.3}
.s-bk-d{font-size:11px;color:var(--mu);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-bk-r{display:flex;align-items:center;gap:6px;margin-top:3px}
.s-bk-p{font-size:15px;font-weight:800;color:var(--c2)}
.s-bk-l{font-size:10px;padding:3px 8px;border-radius:16px;background:var(--c1);color:#fff!important;text-decoration:none!important;display:inline-block;transition:background .2s}
.s-bk-l:hover{background:var(--c1d)}

/* Typing */
.s-typ{display:flex;gap:4px;padding:6px 0;align-items:center}
.s-typ i{width:7px;height:7px;border-radius:50%;background:var(--c2);display:block;font-style:normal;animation:stb 1.2s ease infinite}
.s-typ i:nth-child(2){animation-delay:.15s}.s-typ i:nth-child(3){animation-delay:.3s}
@keyframes stb{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* Input */
.s-inp-area{padding:10px 14px 14px;background:#fff;border-top:1px solid var(--bd);flex-shrink:0}
.s-inp-row{display:flex;gap:8px;align-items:flex-end}
#s-inp{flex:1;padding:10px 14px;border:2px solid var(--bd);border-radius:20px;font-family:'Tajawal';font-size:13.5px;direction:rtl;outline:none;background:var(--bg);resize:none;max-height:80px;line-height:1.5;transition:border-color .2s}
#s-inp:focus{border-color:var(--c2);box-shadow:0 0 0 3px rgba(201,149,60,.08)}
#s-inp::placeholder{color:var(--mu);opacity:.6}
#s-send{width:42px;height:42px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--c2),#b8842e);color:var(--c1d);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;box-shadow:0 3px 8px rgba(201,149,60,.3)}
#s-send:hover{transform:scale(1.06)}
#s-send:disabled{opacity:.45;cursor:not-allowed;transform:none}
.s-foot{text-align:center;padding:5px;font-size:9px;color:var(--mu);background:#fff}