/* UAE Business Bar – Frontend Styles */

#uae-business-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--uae-z, 9999);
  width: auto;
  max-width: 96vw;
  pointer-events: none;
}

/* Positions */
#uae-business-bar.uae-pos-bottom { bottom: 24px; }
#uae-business-bar.uae-pos-top    { top: 24px; }

/* Inner pill */
.uae-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--uae-bg, #0d1b2a);
  padding: 8px 16px 8px 8px;
  border-radius: var(--uae-radius, 50px);
  pointer-events: all;
  box-shadow: var(--uae-shadow, 0 8px 32px rgba(0,0,0,.35));
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.uae-bar-inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

/* Profile */
.uae-bar-profile {
  position: relative;
  flex-shrink: 0;
}
.uae-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,.2);
}
.uae-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: #25D366;
  border-radius: 50%;
  border: 2px solid #0d1b2a;
  animation: uae-blink 2s ease infinite;
}

/* Text */
.uae-bar-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.uae-label-top {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  font-weight: 700;
}
.uae-label-bottom {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: .3px;
}

/* Buttons */
.uae-bar-actions {
  display: flex;
  gap: 8px;
  margin-left: 4px;
}
.uae-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .15s ease, filter .15s ease;
}
.uae-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}
.uae-btn svg {
  display: block;
}

/* Pulse */
@keyframes uae-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.uae-pulse { animation: uae-ring 2s ease infinite; }

/* Blink dot */
@keyframes uae-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ── Entrance Animations ── */

/* Slide Up */
.uae-anim-slide_up {
  animation: uaeSlideUp .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes uaeSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(60px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Fade In */
.uae-anim-fade_in {
  animation: uaeFade .7s ease both;
}
@keyframes uaeFade {
  from { opacity: 0; transform: translateX(-50%); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* Bounce In */
.uae-anim-bounce_in {
  animation: uaeBounce .8s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes uaeBounce {
  0%   { opacity:0; transform: translateX(-50%) scale(.5); }
  60%  { transform: translateX(-50%) scale(1.08); }
  80%  { transform: translateX(-50%) scale(.97); }
  100% { opacity:1; transform: translateX(-50%) scale(1); }
}

/* Zoom In */
.uae-anim-zoom_in {
  animation: uaeZoom .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes uaeZoom {
  from { opacity:0; transform: translateX(-50%) scale(.7); }
  to   { opacity:1; transform: translateX(-50%) scale(1); }
}

/* Flip In */
.uae-anim-flip_in {
  animation: uaeFlip .7s ease both;
}
@keyframes uaeFlip {
  from { opacity:0; transform: translateX(-50%) rotateX(-80deg); }
  to   { opacity:1; transform: translateX(-50%) rotateX(0deg); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .uae-label-bottom { font-size: 14px; }
  .uae-photo        { width: 38px; height: 38px; }
  .uae-btn          { width: 36px; height: 36px; }
  .uae-btn svg      { width: 16px; height: 16px; }
}