.khaled-live-alert{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #1a1a1a, #0c0c0c);
  color:#fff;
  padding:14px 16px;
  border-radius:14px;
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 12px 35px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  overflow:hidden;
  isolation:isolate;
  animation:klapFadeIn .5s ease;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  direction:rtl;
  text-align:right;
  line-height:1.25;
}

.khaled-live-alert{
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}



.khaled-live-alert:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.65),
    0 4px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(255,255,255,0.07);
}

.khaled-live-alert::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25), transparent 70%);
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
.khaled-live-alert > *{ position:relative; z-index:1; }

.khaled-live-alert .k-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:220px;
}

.khaled-live-alert .k-meta{
  font-size:12px;
  opacity:.72;
}
.khaled-live-alert .k-event{
  font-size:15.5px;
  font-weight:800;
  letter-spacing:.2px;
}
.khaled-live-alert .k-time{
  font-size:11px;
  opacity:.48;
}

.khaled-live-alert .k-number{
  font-weight:900;
  color:#4ade80;
  text-shadow:0 0 8px rgba(74,222,128,0.35);
  display:inline-block;
  transition: transform .25s ease, color .25s ease;
}

.k-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff3b3b;
  box-shadow:0 0 10px rgba(255,59,59,0.9);
  margin-top:6px;
  flex:0 0 auto;
  animation:klapPulse 1.6s infinite;
}

.khaled-live-alert.is-switching .k-text{
  transform: translateY(4px);
  opacity: .72;
  transition: transform .18s ease, opacity .18s ease;
}

@keyframes klapPulse{
  0%{transform:scale(1);opacity:.9;}
  70%{transform:scale(1.8);opacity:0;}
  100%{opacity:0;}
}
@keyframes klapFadeIn{
  from{opacity:0; transform:translateY(20px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@media(max-width:768px){
  .khaled-live-alert{
    width:92%;
    padding:11px 14px;
    border-radius:12px;
  }
  .khaled-live-alert .k-text{ min-width:auto; }
}

/* force floating layer above theme */
.khaled-live-alert{
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;

  z-index: 2147483647 !important; /* اعلى من اي ثيم */
}

/* لو الثيم عامل transform على body */
html, body{
  transform: none !important;
}


/* Mobile center toast - force */
@media (max-width: 768px){
  .khaled-live-alert{
    left: 50% !important;
    right: auto !important;
    bottom: 15px !important;
    transform: translateX(-50%) !important;
    width: 82% !important;
    max-width: 340px !important;

  }
}

/* لا تكسر transform على الموبايل بسبب hover/touch */
@media (max-width: 768px){
  .khaled-live-alert:hover{
    transform: translateX(-50%) !important;
  }
}

/* خلي hover يشتغل فقط على الأجهزة اللي فيها hover حقيقي */
@media (hover: none){
  .khaled-live-alert:hover{
    transform: none !important;
  }
}