/* =====================================================================
   HARIZTALK — النسخة 9: الشكل الملكي (أخضر + ذهبي) ثلاثي الأبعاد
   يُحمَّل بعد style.css ويغيّر الألوان والشكل فقط
   ===================================================================== */
:root{
  --red:#0E8A5C; --red2:#075C3D; --red-soft:#DDF1E7; --navy:#0B3D2B;
  --gold:#E9C873; --gold-hi:#FBE7A4; --gold2:#C9962E; --gold3:#8C6418;
  --bg:#EEF3EF; --panel:#FBFAF4; --text:#132019; --muted:#5B7266; --line:#DCE6DF;
  --chatbg:#E5EEE8; --mine:#CDEFDD; --theirs:#FFFFFF; --hover:#EAF3ED; --tick:#1F8BE0;
  --shadow:0 10px 30px rgba(4,40,28,.16);
  --gold-grad:linear-gradient(180deg,#FBE7A4 0%,#E9C873 35%,#C9962E 75%,#A8781E 100%);
  --green-grad:linear-gradient(180deg,#14875A 0%,#0A5A3C 100%);
  --royal-bg:radial-gradient(120% 60% at 50% 12%,#14875A 0%,#0A5A3C 40%,#053A27 72%,#022016 100%);
}
:root[data-theme="dark"]{
  --bg:#03241A; --panel:#062F22; --text:#F2F5EE; --muted:#9FBFB0; --line:#0E4434;
  --chatbg:#04281D; --mine:#0E8A5C; --theirs:#F6F0DF; --hover:#0A3A2B; --red-soft:#0D3D2E; --tick:#9FE3FF;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
html,body{background:var(--bg)}

/* ---------- الأزرار الذهبية البارزة ---------- */
.btn{background:var(--gold-grad);color:#2A1C00;border-radius:16px;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 4px 0 #6E4E10,0 10px 18px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.12);
  transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6E4E10,0 4px 10px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.6)}
.btn.ghost{background:transparent;color:var(--gold2);border:1.5px solid var(--gold2);text-shadow:none;box-shadow:0 3px 0 rgba(0,0,0,.18)}
:root[data-theme="dark"] .btn.ghost{color:var(--gold)}
.link{color:var(--gold2)}
:root[data-theme="dark"] .link{color:var(--gold)}
.mini.red,.invite .mini.ok{background:var(--gold-grad);color:#2A1C00;box-shadow:0 2px 0 #6E4E10}
.field:focus{border-color:var(--gold2)}

/* ---------- شاشة الدخول (دائماً ملكية داكنة) ---------- */
#auth{background:var(--royal-bg);position:relative;overflow:hidden;
  --panel:rgba(255,255,255,.07); --text:#FFFFFF; --muted:#CFE3D8; --line:rgba(233,200,115,.5); --bg:rgba(0,0,0,.25); --red-soft:rgba(233,200,115,.15); color:#fff}
#auth::before,#auth::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(233,200,115,.28);pointer-events:none}
#auth::before{width:520px;height:520px;left:50%;top:-120px;transform:translateX(-50%)}
#auth::after{width:760px;height:760px;left:50%;top:-240px;transform:translateX(-50%);border-color:rgba(233,200,115,.14)}
.auth-card{background:transparent;box-shadow:none;border:0;color:#fff;position:relative;z-index:1;padding:20px 22px}
.auth-card h3,.auth-card .done-t{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.auth-sub{color:#E9C873}
.logo3d{position:relative;width:230px;height:290px;margin:0 auto 6px}
.logo3d .auth-logo,.auth-card img.auth-logo{position:relative;z-index:2;width:220px;height:auto;margin:0 auto;display:block;border-radius:0;
  transform:perspective(700px) rotateX(10deg);
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.25)) drop-shadow(0 18px 18px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(233,200,115,.35));
  animation:floaty 5s ease-in-out infinite}
.logo3d .pedestal{position:absolute;z-index:1;left:50%;bottom:6px;transform:translateX(-50%);width:190px;height:30px;border-radius:50%;
  background:linear-gradient(180deg,#F3D98C 0%,#C9962E 55%,#8C6418 100%);box-shadow:0 12px 20px rgba(0,0,0,.5),inset 0 3px 4px rgba(255,255,255,.6)}
.logo3d .ring{position:absolute;z-index:0;border-radius:50%;left:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(233,200,115,.20),rgba(233,200,115,0))}
.logo3d .r1{width:300px;height:300px;top:-10px}
.logo3d .r2{display:none}
@keyframes floaty{0%,100%{transform:perspective(700px) rotateX(10deg) translateY(0)}50%{transform:perspective(700px) rotateX(10deg) translateY(-6px)}}
:root[data-anim="off"] .logo3d .auth-logo{animation:none}
#auth .field,#appLock .field{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(255,255,255,.05));border:1.5px solid #C9A23F;color:#fff;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.12)}
#auth .field::placeholder{color:rgba(255,255,255,.6)}
#auth select.field option{color:#132019}
#auth .err{color:#FFB4B4}
#auth .hint,#auth .lbl{color:#E9C873}
#auth .auth-tabs{background:rgba(0,0,0,.25);border:1px solid rgba(233,200,115,.35)}
#auth .auth-tabs button{color:#E2EFE8}
#auth .auth-tabs button.on{background:var(--gold-grad);color:#2A1C00;box-shadow:0 2px 0 #6E4E10}
#auth .lang-btn{background:rgba(0,0,0,.3);color:#F3D98C;border:1px solid rgba(233,200,115,.5)}
#auth .lang-grid button{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(233,200,115,.3)}
#auth .lang-grid button.on{border-color:var(--gold);background:rgba(233,200,115,.18);color:#F3D98C}
#auth .consent{color:#E2EFE8}
#auth .vstep{background:rgba(255,255,255,.07);border:1px solid rgba(233,200,115,.35)}
#auth .idbox{background:rgba(0,0,0,.25);color:#fff;border:1px solid rgba(233,200,115,.4)}
#auth .idbox b{color:#F3D98C}
#auth .pend{color:#F3D98C}
.vs-i,.dots span{background:var(--gold)}
.proc i{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.badge3d .rim.r2{background:#8C6418}
#appLock{background:var(--royal-bg)}
#appLock .al-card{background:rgba(255,255,255,.07);border:1px solid rgba(233,200,115,.4);color:#fff;backdrop-filter:blur(10px)}

/* ---------- البار العلوي ---------- */
.top{background:var(--green-grad);color:#fff;border-bottom:0;box-shadow:0 8px 18px rgba(0,0,0,.3),inset 0 -2px 0 var(--gold2);position:relative;z-index:2}
:root[data-theme=dark] .top{color:#fff}
.top .icon-btn,:root[data-theme=dark] .top .icon-btn{color:#F3D98C}
.top .icon-btn:hover{background:rgba(255,255,255,.12)}
.logo-txt,:root[data-theme=dark] .logo-txt{color:#fff}
.ht-tile{width:44px;height:44px;border-radius:13px;background:linear-gradient(180deg,#FFFFFF,#E6E2D6);display:grid;place-items:center;flex:none;
  box-shadow:0 3px 0 #B8892A,0 7px 12px rgba(0,0,0,.4),inset 0 1px 0 #fff}
.logo-txt .ht-tile img{width:38px;height:38px;border-radius:9px;background:none}
.ht-mono{display:flex;align-items:baseline;font-family:"Sora","Cairo",sans-serif;font-weight:800;font-size:30px;letter-spacing:-1px;line-height:1}
.ht-mono span,.ht-mono b{background:linear-gradient(180deg,#FFF6D6 0%,#E9C873 50%,#B8862A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));font-weight:800}
.ht-mono i{width:8px;height:8px;border-radius:50%;margin-inline-start:3px;background:radial-gradient(circle at 35% 30%,#FF8A99,#D3122B);box-shadow:0 0 8px rgba(255,77,99,.8)}
.tab{color:rgba(255,255,255,.72)}
.tab.on{color:#F3D98C;border-color:var(--gold);text-shadow:0 0 10px rgba(233,200,115,.55)}
.badge,.tab .badge{background:var(--gold-grad);color:#2A1C00;box-shadow:0 2px 0 #6E4E10,0 3px 6px rgba(0,0,0,.3)}
.badge.muted{background:#7E948A;color:#fff;box-shadow:none}
#admin .atabs .badge{background:var(--gold-grad);color:#2A1C00}
.search{background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 2px 5px rgba(0,0,0,.12)}
:root[data-theme=dark] .search{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(255,255,255,.04));border-color:rgba(233,200,115,.4);box-shadow:inset 0 3px 6px rgba(0,0,0,.45)}

/* ---------- قائمة المحادثات: بطاقات بارزة ---------- */
#side{background:var(--bg)}
:root[data-theme=dark] #side{background:radial-gradient(120% 50% at 50% 0%,#0B4A33 0%,#063D2B 45%,#03251A 100%)}
.list{padding:6px 0 90px}
.list .item{margin:6px 10px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 12px rgba(4,40,28,.10)}
:root[data-theme=dark] .list .item{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-color:rgba(255,255,255,.09);
  box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.list .item:hover{background:var(--hover)}
.list .item.on{background:var(--red-soft);border-color:var(--gold2)}
.item .meta{border-bottom:0;padding-bottom:0;margin-bottom:0}
.item .time.new{color:var(--gold2)}
:root[data-theme=dark] .item .time.new{color:#F3D98C}
.av{box-shadow:0 4px 9px rgba(0,0,0,.3),inset 0 -4px 8px rgba(0,0,0,.25),inset 0 4px 6px rgba(255,255,255,.3)}
.item.ch-row{border:1.5px solid rgba(201,150,46,.75);background:linear-gradient(180deg,rgba(233,200,115,.25),rgba(233,200,115,.06))}
:root[data-theme=dark] .item.ch-row{background:linear-gradient(180deg,rgba(233,200,115,.20),rgba(233,200,115,.05));border-color:rgba(233,200,115,.7)}
.item.ch-row .name{color:var(--gold3)}
:root[data-theme=dark] .item.ch-row .name{color:#F3D98C}
.ch-tick{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;margin-inline-start:6px;font-size:11px;background:var(--gold-grad);color:#2A1C00;vertical-align:middle}
.fab{background:var(--gold-grad);color:#3A2600;border-radius:20px;box-shadow:0 5px 0 #6E4E10,0 14px 24px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.7)}
.fab:active{transform:translateY(3px)}
.section-t,.lbl{color:var(--gold2)}
:root[data-theme=dark] .section-t,:root[data-theme=dark] .lbl{color:var(--gold)}

/* ---------- المحادثة ---------- */
.chat-head{background:var(--green-grad);color:#fff;border-bottom:0;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 -2px 0 var(--gold2);position:relative;z-index:2}
.chat-head .s{color:#BDEBD6}
.chat-head .icon-btn{color:#F3D98C}
.chat-head .icon-btn:hover{background:rgba(255,255,255,.12)}
#msgs{background-image:radial-gradient(rgba(201,150,46,.16) 1.2px,transparent 1.7px);background-size:22px 22px;background-position:0 0}
.b{box-shadow:0 3px 0 rgba(0,0,0,.08),0 6px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.4);border-radius:16px}
#msgs .m.me .b:not(.sticker){background:linear-gradient(180deg,color-mix(in srgb,var(--mine) 80%,#fff),var(--mine))}
:root[data-theme=dark] #msgs .m.me .b:not(.sticker){background:linear-gradient(180deg,#1DB27A 0%,var(--mine) 60%,color-mix(in srgb,var(--mine) 80%,#000));box-shadow:0 4px 0 #064A31,0 8px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
:root[data-theme=dark] #msgs .m.me .b .ft{color:var(--mmuted,rgba(255,255,255,.78))}
#msgs .m.them .b:not(.sticker){color:var(--ttext,inherit)}
:root[data-theme=dark] #msgs .m.them .b:not(.sticker){background:linear-gradient(180deg,#FFFDF6,var(--theirs));box-shadow:0 4px 0 rgba(0,0,0,.2),0 8px 14px rgba(0,0,0,.35),inset 0 1px 0 #fff}
:root[data-theme=dark] #msgs .m.them .b .ft{color:var(--tmuted,var(--muted))}
.b.sched{border:1.5px dashed var(--gold2)}
.b .schl{color:var(--gold3)}
:root[data-theme=dark] .b .schl{color:#F3D98C}
.day span{background:rgba(0,0,0,.18);color:#F3D98C;box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
:root:not([data-theme=dark]) .day span{background:var(--panel);color:var(--gold3)}
.composer{background:transparent}
.composer .box{border:1px solid var(--line);box-shadow:inset 0 2px 5px rgba(0,0,0,.08)}
:root[data-theme=dark] .composer .box{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.05));border-color:rgba(233,200,115,.45);box-shadow:inset 0 3px 6px rgba(0,0,0,.5)}
:root[data-theme=dark] .composer .icon-btn{color:var(--gold)}
.send{background:radial-gradient(circle at 35% 30%,#FFF1BE 0%,#E9C873 35%,#B8862A 80%);color:#3A2600;box-shadow:0 4px 0 #6E4E10,0 10px 16px rgba(0,0,0,.4)}
.send:active{transform:translateY(3px)}
.vplay,.lpin{background:var(--gold-grad);color:#3A2600}
.only-admins{background:rgba(233,200,115,.12);color:var(--gold3);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
:root[data-theme=dark] .only-admins{color:#F3D98C}

/* ---------- النوافذ والصفحات ---------- */
.modal-h,.page .ph,#info .ih,#admin .ah{background:var(--green-grad);color:#fff;box-shadow:inset 0 -2px 0 var(--gold2)}
.modal-h .icon-btn,.page .ph .icon-btn{color:#F3D98C}
.modal{border:1px solid var(--line)}
:root[data-theme=dark] .modal{border-color:rgba(233,200,115,.3)}
.switch.on,.check.on{background:var(--red);border-color:var(--red)}
.set-row .ic,.lrow .ic{background:var(--red-soft);color:var(--red)}
:root[data-theme=dark] .set-row .ic,:root[data-theme=dark] .lrow .ic{color:var(--gold);background:rgba(233,200,115,.12)}
#welcome{background:radial-gradient(rgba(201,150,46,.16) 1.2px,transparent 1.7px) 0 0/22px 22px,var(--chatbg);border-bottom:6px solid var(--gold2)}
#welcome img.wel-logo{width:min(300px,60%);filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.stat b{color:var(--gold2)}
:root[data-theme=dark] .stat b{color:var(--gold)}
.from-hariz b{color:var(--gold2)}

/* ---------- لوحة المدير: موافقة جماعية + القناة ---------- */
.bulk-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;position:sticky;top:0;z-index:2;padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.bulk-bar .mini[disabled]{opacity:.45}
#admin .card>.check{cursor:pointer;align-self:center}
.ch-card{border:1.5px solid rgba(201,150,46,.7);background:linear-gradient(180deg,rgba(233,200,115,.18),rgba(233,200,115,.04))}

/* ---------- الترحيب لأول مرة ---------- */
#onboard{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;background:var(--royal-bg);color:#fff;animation:fadein .3s}
#onboard .ob-card{width:100%;max-width:380px;text-align:center}
#onboard .ob-logo{width:150px;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
#onboard .ob-ic{width:84px;height:84px;margin:10px auto 6px;border-radius:26px;display:grid;place-items:center;color:#3A2600;background:var(--gold-grad);
  box-shadow:0 5px 0 #6E4E10,0 14px 24px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.7)}
#onboard .ob-ic svg{width:40px;height:40px}
#onboard h2{margin:14px 0 6px;font-size:24px;text-shadow:0 1px 0 #C9962E,0 3px 8px rgba(0,0,0,.5)}
#onboard p{color:#D9EBE1;line-height:1.9;margin:0 0 18px}
#onboard .ob-dots{display:flex;gap:7px;justify-content:center;margin:0 0 18px}
#onboard .ob-dots span{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .2s}
#onboard .ob-dots span.on{width:24px;background:var(--gold)}
#onboard .link{color:#F3D98C}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- طلب تفعيل الإشعارات ---------- */
.push-ask{text-align:center}
.push-ask .push-ic{width:72px;height:72px;margin:4px auto 12px;border-radius:50%;display:grid;place-items:center;color:#3A2600;background:radial-gradient(circle at 35% 30%,#FFF1BE 0%,#E9C873 35%,#B8862A 80%);box-shadow:0 4px 0 #6E4E10,0 10px 18px rgba(0,0,0,.35)}
.push-ask .push-ic svg{width:34px;height:34px}

/* شاشة المكالمة */
#callScr{background:var(--royal-bg)}

/* إصلاح: زر الإرسال كان يخرج من الشاشة في الجوالات الضيقة */
.composer .box{min-width:0}
.composer textarea{min-width:0;width:0}
@media (max-width:380px){.composer .icon-btn{width:36px;height:36px}}

/* شارة النجاح ثلاثية الأبعاد بالألوان الملكية */
.badge3d .face{background:radial-gradient(circle at 35% 30%,#2BD08F 0%,#0E8A5C 55%,#075C3D 100%)!important;box-shadow:inset 0 0 0 6px #E9C873,0 10px 24px rgba(0,0,0,.4)!important}
.badge3d .rim{background:#8C6418}
.badge3d .rim.r2{background:#C9962E}
.shadow3d{background:radial-gradient(rgba(0,0,0,.45),transparent 70%)}

/* الكاميرا الأمامية: صورتك تظهر لك كالمرآة (يمين = يمين)، والطرف الآخر يراك بشكل طبيعي */
#callScr .lv[data-facing="user"]{transform:scaleX(-1)}