/* hrai · الإشعارات — Liquid Glass (أسلوب iOS 26)
   الزجاج يتلون باللي وراه، والنقطة تحدد نوع الإشعار.
   الوضع الداكن يتبع زر الموقع (html[data-theme="dark"]) — الموقع يبدأ فاتح دائمًا. */
:root{
  --ht-glass:rgba(255,255,255,.30); --ht-edge:rgba(255,255,255,.95); --ht-edge2:rgba(0,0,0,.07);
  --ht-fg:#111111; --ht-sub:rgba(17,17,17,.62); --ht-shadow:0 18px 44px -14px rgba(0,0,0,.28), 0 3px 10px -4px rgba(0,0,0,.12);
  --ht-ok:#22C55E; --ht-err:#FF453A; --ht-warn:#FFB800; --ht-info:#111111;
}
html.dark, html[data-theme="dark"]{
  --ht-glass:rgba(40,40,40,.38); --ht-edge:rgba(255,255,255,.28); --ht-edge2:rgba(255,255,255,.06);
  --ht-fg:#FFFFFF; --ht-sub:rgba(255,255,255,.62); --ht-shadow:0 16px 44px -12px rgba(0,0,0,.6); --ht-info:#FFFFFF; }

.ht-wrap{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9998;display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(400px,calc(100vw - 24px));pointer-events:none;direction:rtl}
.ht{pointer-events:auto;position:relative;width:100%;display:flex;gap:12px;align-items:center;
  padding:12px 14px 12px 12px;border-radius:28px;color:var(--ht-fg);font-family:Tajawal,Tahoma,sans-serif;
  background:var(--ht-glass);
  -webkit-backdrop-filter:blur(16px) saturate(200%) brightness(1.04);backdrop-filter:blur(16px) saturate(200%) brightness(1.04);
  border:1px solid var(--ht-edge2);
  box-shadow:var(--ht-shadow), inset 0 1px 0 var(--ht-edge), inset 0 -1px 0 var(--ht-edge2), inset 0 0 0 .5px var(--ht-edge2);
  animation:ht-in .55s cubic-bezier(.2,1.2,.4,1) both; overflow:hidden; isolation:isolate}
/* لمعة الزجاج */
.ht::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12) 100%);opacity:.7}
html.dark .ht::before, html[data-theme="dark"] .ht::before{opacity:.18}
.ht{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.ht.ht-drag{cursor:grabbing}
/* ضوء تحت الإصبع لما تمسكه */
.ht::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
html.dark .ht::after, html[data-theme="dark"] .ht::after{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),rgba(255,255,255,0) 70%)}
.ht.ht-drag::after{opacity:1}
.ht.out{animation:ht-out .35s cubic-bezier(.4,0,1,1) forwards}

.ht-ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 .5px rgba(0,0,0,.06)}
html.dark .ht-ico, html[data-theme="dark"] .ht-ico{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ht-dot{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 10px -1px var(--c)}
.ht-ico svg{width:17px;height:22px;overflow:visible;color:var(--ht-fg)}
.ht-body{flex:1;min-width:0}
.ht-t{font-size:15px;font-weight:700;line-height:1.35}
.ht-m{font-size:13.5px;color:var(--ht-sub);line-height:1.55;margin-top:1px}
.ht-act{margin-top:7px}
.ht-act button{all:unset;cursor:pointer;font-size:13px;font-weight:700;padding:5px 14px;border-radius:999px;
  background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 .5px rgba(0,0,0,.08);color:var(--ht-fg)}
html.dark .ht-act button, html[data-theme="dark"] .ht-act button{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ht-x{all:unset;cursor:pointer;flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--ht-sub);border-radius:50%;font-size:15px}
.ht-x:hover{background:rgba(127,127,127,.15);color:var(--ht-fg)}
.ht-bar{display:none}

.ht[data-type=success],.ht[data-type=adnan]{--c:var(--ht-ok)} .ht[data-type=error]{--c:var(--ht-err)}
.ht[data-type=warning]{--c:var(--ht-warn)} .ht[data-type=info],.ht[data-type=loading]{--c:var(--ht-info)}
.ht[data-type=loading] .ht-dot{animation:ht-pulse 1.1s ease-in-out infinite;box-shadow:none}

@keyframes ht-in{from{opacity:0;transform:translateY(-22px) scale(.92);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ht-out{to{opacity:0;transform:translateY(-16px) scale(.94);filter:blur(4px)}}
@keyframes ht-pulse{50%{transform:scale(.5);opacity:.45}}
@media (prefers-reduced-motion:reduce){.ht,.ht.out{animation-duration:0s}}
/* المتصفحات اللي ما تدعم الزجاج: خلفية شبه صلبة */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ht{background:rgba(250,250,250,.96)} html.dark .ht, html[data-theme="dark"] .ht{background:rgba(30,30,30,.96)} }