@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{color-scheme:dark;--bg:#0b141a;--panel:#17252d;--panel2:#202c33;--input:#293941;--mine:#075e4f;--other:#202c33;--green:#25d366;--green2:#16b957;--text:#e9edef;--muted:#aebac1;--line:rgba(255,255,255,.07);--header-h:112px;--composer-h:76px}
html,body{width:100%;height:100%;min-height:100%;margin:0;font-family:'Cairo',Arial,sans-serif;color:var(--text)}
body{background:#0b141a url("https://acrft.github.io/images/wallpaper_1440x444.jpg") center/cover fixed no-repeat;overflow:hidden}
button,input,textarea{font:inherit}
button{touch-action:manipulation;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,14,19,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card{width:100%;max-width:390px;padding:32px 25px;background:rgba(23,37,45,.96);border:1px solid var(--line);border-radius:28px;text-align:center;box-shadow:0 25px 80px #0008;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.logo{width:96px;height:96px;margin:0 auto 16px;border-radius:50%;object-fit:cover;background:url("https://acrft.github.io/images/achat.png") center/cover no-repeat;box-shadow:0 8px 28px #0005}
.card h1,.card h2{margin:8px 0;font-size:clamp(23px,6vw,28px);font-weight:800}
.card p{margin:0 0 24px;color:var(--muted);font-size:14px}
.btn{width:100%;min-height:51px;padding:13px 18px;border:1px solid #ffffff12;border-radius:16px;background:linear-gradient(135deg,#2cdb79,#12ad56);color:#fff;font-size:16px;font-weight:800;box-shadow:0 7px 22px #25d36630;transition:transform .18s,filter .18s}
.btn:active{transform:scale(.97);filter:brightness(.9)}
.btn:disabled,.btn.loading{opacity:.6;cursor:wait}
#chat{display:none;position:fixed;inset:0;overflow:hidden;background:#0b141a22}
.header{position:absolute;top:0;right:0;left:0;height:var(--header-h);min-height:0;display:flex;align-items:center;gap:9px;padding:9px 12px;background:rgba(23,37,45,.97);border-bottom:1px solid var(--line);box-shadow:0 5px 25px #0002;z-index:10;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* The JavaScript renders #userInfo directly inside .header */
.header>#userInfo.user{display:flex;align-items:center;gap:9px;flex:1;min-width:0;max-width:100%;overflow:hidden;direction:rtl}
.user>img{display:block;width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;background:var(--input);border:2px solid #25d36680;box-shadow:0 0 0 3px #25d36612}
.user>div{flex:1;min-width:0;overflow:hidden}
.user-name{min-height:23px;line-height:1.5;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.mob-list{display:flex;align-items:center;gap:6px;width:100%;max-width:100%;height:30px;margin-top:5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;direction:rtl;scrollbar-width:none}
.mob-list::-webkit-scrollbar{display:none}
.mob{display:flex;align-items:center;gap:4px;min-height:27px;flex:0 0 auto;padding:4px 10px;border:1px solid #ffffff09;border-radius:18px;background:linear-gradient(135deg,#2b3b45,#24333c);color:#e0e7eb;font-size:11px;white-space:nowrap;transition:background .16s,transform .16s}
.mob:active{background:#354a54;transform:scale(.97)}
.logout-btn{width:43px;height:43px;flex:0 0 43px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff12;border-radius:50%;background:linear-gradient(135deg,#2cdb79,#12ad56);color:#fff;font-size:19px;box-shadow:0 5px 15px #25d36625;transition:transform .16s,filter .16s}
.logout-btn:active{transform:scale(.92);filter:brightness(.9)}
.logout-btn:disabled{opacity:.5}
.messages{position:absolute;top:var(--header-h);right:0;bottom:calc(var(--composer-h) + env(safe-area-inset-bottom,0px));left:0;display:flex;flex-direction:column;direction:ltr;gap:7px;padding:13px 10px 17px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#50616a transparent}
.messages::-webkit-scrollbar{width:4px}
.messages::-webkit-scrollbar-thumb{background:#50616a;border-radius:10px}
.msg{display:flex;align-items:flex-end;gap:4px;width:fit-content;max-width:90%;min-width:0;animation:msgIn .17s ease-out}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.msg.me{align-self:flex-start;flex-direction:row}
.msg.other{align-self:flex-end;flex-direction:row-reverse}
.avatar{display:block;width:29px;height:29px;flex:0 0 29px;margin:0 1px;border-radius:50%;object-fit:cover;background:#2a3942;border:1px solid #ffffff12;box-shadow:0 2px 6px #0003}
.bubble{display:block;flex:0 1 auto;width:fit-content;min-width:0;max-width:100%;padding:8px 11px 9px;border:1px solid #ffffff08;overflow-wrap:anywhere;word-break:normal;white-space:normal;font-size:16px;line-height:1.65;box-shadow:0 3px 8px #0002;direction:rtl;text-align:right;unicode-bidi:plaintext}
.msg.me>.bubble{background:linear-gradient(145deg,#08715d,#005c4b);border-radius:14px 14px 14px 0}
.msg.other>.bubble{background:linear-gradient(145deg,#24343d,#202c33);border-radius:14px 14px 0 14px}
.name{display:block;max-width:100%;margin:0 0 4px;color:#32dc79;font-size:12px;font-weight:800;line-height:1.5;overflow-wrap:anywhere;white-space:normal}
.msg.me>.bubble>.name{direction:rtl;text-align:left}
.msg.other>.bubble>.name{direction:rtl;text-align:right}
.message-text{overflow-wrap:anywhere;white-space:pre-wrap}
.bubble a{color:#8edaff;text-decoration:none;overflow-wrap:anywhere;word-break:break-word}
.bubble a:hover{text-decoration:underline}
.image-wrap{display:block;width:fit-content;max-width:100%;min-width:0;margin-top:4px;direction:ltr}
.message-image{display:block;width:auto;height:auto;max-width:min(210px,52vw);max-height:210px;object-fit:contain;border-radius:10px;background:#15232a}
.image-name{display:block;max-width:210px;margin-top:5px;padding-left:2px;color:#c0ccd2;font-size:11px;direction:ltr;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .bubble:has(.image-wrap){width:fit-content;max-width:100%;padding:9px}
.msg.me>.bubble:has(.image-wrap)>.name{text-align:left}
.msg.other>.bubble:has(.image-wrap)>.name{text-align:right}
.input{position:absolute;right:0;bottom:0;left:0;min-height:var(--composer-h);display:flex;align-items:center;gap:7px;padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));background:rgba(23,37,45,.98);border-top:1px solid var(--line);box-shadow:0 -5px 25px #0002;z-index:10;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.input textarea#msgInput{display:block;flex:1 1 0;width:0;min-width:0;height:45px;min-height:45px;max-height:100px;resize:none;overflow-y:auto;padding:10px 14px;border:1px solid #ffffff0b;border-radius:26px;background:#293941;color:#fff;font-family:inherit;font-size:15px;line-height:1.5;outline:none;transition:border-color .18s,background .18s,box-shadow .18s}
.input textarea#msgInput:focus{border-color:#25d36680;background:#30424b;box-shadow:0 0 0 3px #25d36610}
.input textarea#msgInput::placeholder{color:#a4b0b7}
.send{width:45px;height:45px;flex:0 0 45px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff12;border-radius:50%;background:linear-gradient(145deg,#2cdb79,#12ae56);color:#fff;font-size:20px;box-shadow:0 5px 15px #25d36625;transition:transform .16s,filter .16s,box-shadow .16s}
.send:active{transform:scale(.91);filter:brightness(.9);box-shadow:0 2px 6px #0002}
.send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
@media(min-width:700px){:root{--header-h:100px;--composer-h:76px}.header,.input{padding-left:22px;padding-right:22px}.messages{padding:18px 22px}.msg{max-width:75%}.message-image{max-width:250px;max-height:250px}}
@media(max-width:480px){:root{--header-h:112px;--composer-h:76px}.header{padding:8px 10px;gap:7px}.header>#userInfo.user{gap:6px}.user>img{width:40px;height:40px;flex-basis:40px}.user-name{font-size:13px}.mob-list{gap:5px;height:29px}.mob{padding:4px 8px;font-size:10px}.messages{padding:10px 5px 14px;gap:5px}.msg{max-width:96%;gap:3px}.avatar{width:27px;height:27px;flex-basis:27px}.bubble{padding:7px 9px 8px;font-size:16px;line-height:1.6}.name{font-size:12px;margin-bottom:3px}.message-image{max-width:min(180px,50vw);max-height:180px}.image-name{max-width:180px}.input{gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}.send{width:43px;height:43px;flex-basis:43px}.input textarea#msgInput{height:45px;min-height:45px;padding:9px 11px;font-size:14px}.logout-btn{width:39px;height:39px;flex-basis:39px}}
@media(max-width:360px){:root{--header-h:108px;--composer-h:72px}.header{padding:7px;gap:5px}.user>img{width:35px;height:35px;flex-basis:35px}.user-name{font-size:12px}.mob{padding:3px 7px;font-size:10px}.logout-btn{width:35px;height:35px;flex-basis:35px}.input{gap:5px;padding-left:6px;padding-right:6px}.send{width:39px;height:39px;flex-basis:39px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* تحسين هيدر AlamChat على الموبايل */
:root{--header-h:104px}
.header{height:var(--header-h);min-height:0;padding:10px 14px;gap:12px;overflow:hidden}
#userInfo.user{gap:10px;align-items:center}
#userInfo>img{width:48px;height:48px;flex:0 0 48px}
.user-name{font-size:16px;line-height:1.5}
.mob-list{height:34px;margin-top:6px;gap:7px}
.mob{min-height:31px;padding:5px 12px;font-size:12px;border-radius:20px}
.logout-btn{width:46px;height:46px;flex:0 0 46px}
.messages{top:var(--header-h)}
@media(max-width:480px){
:root{--header-h:104px}
.header{height:104px;padding:9px 12px;gap:9px}
#userInfo.user{gap:8px}
#userInfo>img{width:45px;height:45px;flex-basis:45px}
.user-name{font-size:15px}
.mob-list{height:32px;gap:6px;margin-top:5px}
.mob{min-height:29px;padding:4px 10px;font-size:11px}
.logout-btn{width:43px;height:43px;flex-basis:43px}
}
/* Compact AlamChat header — override previous rules */
:root{--header-h:76px!important}
#chat .header{
height:76px!important;
min-height:76px!important;
padding:5px 9px!important;
gap:7px!important;
flex-wrap:nowrap!important;
overflow:hidden!important
}
#chat #userInfo.user{
display:flex!important;
flex-direction:row!important;
align-items:center!important;
gap:7px!important;
min-width:0!important;
flex:1!important;
overflow:hidden!important
}
#chat #userInfo>img{
width:34px!important;
height:34px!important;
flex:0 0 34px!important
}
#chat .user-name{
font-size:12px!important;
line-height:1.3!important;
min-height:0!important
}
#chat .mob-list{
height:25px!important;
margin-top:3px!important;
gap:4px!important
}
#chat .mob{
min-height:23px!important;
padding:2px 7px!important;
font-size:10px!important
}
#chat .logout-btn{
width:35px!important;
height:35px!important;
flex:0 0 35px!important
}
#chat .messages{
top:76px!important;
bottom:calc(var(--composer-h) + env(safe-area-inset-bottom,0px))!important
}
@media(max-width:380px){
#chat .header{padding:4px 6px!important;gap:5px!important}
#chat #userInfo>img{width:30px!important;height:30px!important;flex-basis:30px!important}
#chat .user-name{font-size:11px!important}
#chat .mob{padding:2px 5px!important;font-size:9px!important}
}
/* Restore AlamChat composer button order and sizing */
#chat form.input{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:7px!important;
padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;
min-height:78px!important;
}
#chat #siteBtn{order:1!important}
#chat #imageBtn{order:2!important}
#chat #msgInput{order:3!important}
#chat #sendBtn{order:4!important}
#chat form.input .send{
width:45px!important;
height:45px!important;
min-width:45px!important;
min-height:45px!important;
flex:0 0 45px!important;
padding:0!important;
border-radius:50%!important;
}
#chat #msgInput{
display:block!important;
flex:1 1 0!important;
width:0!important;
min-width:0!important;
height:46px!important;
min-height:46px!important;
max-height:100px!important;
margin:0!important;
padding:0 14px!important;
border:1px solid #ffffff0b!important;
border-radius:26px!important;
background:#293941!important;
color:#fff!important;
font:inherit!important;
font-size:15px!important;
resize:none!important;
}
#chat #msgInput::placeholder{color:#a4b0b7!important}
@media(max-width:480px){
#chat form.input{
gap:6px!important;
padding:8px 9px calc(8px + env(safe-area-inset-bottom,0px))!important;
}
#chat form.input .send{
width:43px!important;
height:43px!important;
min-width:43px!important;
min-height:43px!important;
flex-basis:43px!important;
}
#chat #msgInput{
height:45px!important;
min-height:45px!important;
padding:0 12px!important;
font-size:14px!important;
}
}
/* ترتيب شريط الكتابة مثل الصورة بدون تغيير الأيقونات */
#chat form.input{
direction:ltr!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
}
#chat form.input #sendBtn{order:1!important}
#chat form.input #imageBtn{order:2!important}
#chat form.input #siteBtn{order:3!important}
#chat form.input #msgInput{order:4!important}
#chat #msgInput{
direction:rtl!important;
text-align:right!important;
}
#chat #msgInput::placeholder{
direction:rtl!important;
text-align:right!important;
}

/* AlamChat GitHub Login */
#githubLoginBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:51px;margin-top:12px;padding:13px 18px;border:1px solid #ffffff20;border-radius:16px;background:linear-gradient(135deg,#30363d,#161b22);color:#fff;font-family:inherit;font-size:15px;font-weight:800;box-shadow:0 5px 18px #0003;transition:transform .18s,filter .18s,background .18s}
#githubLoginBtn svg{width:22px;height:22px;flex:0 0 22px}
#githubLoginBtn:active{transform:scale(.97);filter:brightness(.85)}
#githubLoginBtn:disabled{opacity:.6;cursor:wait}
#githubLoginBtn:focus-visible{outline:2px solid #25d366;outline-offset:3px}

#loginBtn{display:flex;align-items:center;justify-content:center;gap:10px}
#loginBtn .google-icon{display:block;width:22px;height:22px;flex:0 0 22px}
#loginBtn span{min-width:0}

body.viewer-mode .chat-footer{display:none!important}
body.viewer-mode .messages{bottom:0!important}
#viewerBtn{background:#263b33;box-shadow:none}