/* ============================================
   Online Status Bar Pro - Frontend Styles
   Enhanced with Animations & Modern UI/UX
   ============================================ */

:root {
  --osb-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --osb-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --osb-transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Keyframe Animations
   ============================================ */

@keyframes osbSlideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes osbSlideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes osbSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes osbSlideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes osbFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes osbPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes osbPulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes osbPulseDotOffline {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes osbBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes osbShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes osbGlow {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 20px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 30px rgba(34, 197, 94, 0.5);
  }
}

@keyframes osbGlowOffline {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 20px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 30px rgba(239, 68, 68, 0.5);
  }
}

@keyframes osbFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes osbRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes osbScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Main Status Bar Styles
   ============================================ */

#osb-float.osb-float {
  position: fixed;
  z-index: var(--osb-zindex, 99999);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 2px solid var(--osb-border, #22c55e);
  background: var(--osb-bg, #ffffff);
  color: var(--osb-text, #14532d);
  font-size: var(--osb-font-size, 14px);
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  max-width: calc(100vw - 24px);
  
  /* Modern effects */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Smooth transitions */
  transition: all var(--osb-transition-smooth);
  
  /* Entrance animation */
  animation: osbScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Entrance animations based on position */
#osb-float.osb-pos-bottom-right {
  animation: osbSlideInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#osb-float.osb-pos-bottom-left {
  animation: osbSlideInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#osb-float.osb-pos-top-right {
  animation: osbSlideInDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#osb-float.osb-pos-top-left {
  animation: osbSlideInDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#osb-float.osb-pos-left {
  animation: osbSlideInLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#osb-float.osb-pos-right {
  animation: osbSlideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Online status glow effect */
#osb-float[data-status="online"] {
  animation: osbScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), osbGlow 2s ease-in-out infinite;
}

/* Offline status glow effect */
#osb-float[data-status="offline"] {
  animation: osbScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), osbGlowOffline 2s ease-in-out infinite;
}

/* Hover effects */
#osb-float.osb-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

#osb-float.osb-float:active {
  transform: translateY(-1px);
}

/* ============================================
   Status Dot Styles
   ============================================ */

#osb-float .osb-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--osb-dot, #22c55e);
  flex: 0 0 auto;
  transition: all var(--osb-transition-smooth);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}

/* Pulsing animation for online status */
#osb-float[data-status="online"] .osb-dot {
  animation: osbPulseDot 2s infinite;
}

/* Pulsing animation for offline status */
#osb-float[data-status="offline"] .osb-dot {
  animation: osbPulseDotOffline 2s infinite;
}

/* ============================================
   Content Styles
   ============================================ */

#osb-float .osb-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  animation: osbFadeIn 0.6s ease-out;
}

#osb-float .osb-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#osb-float .osb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--osb-transition-smooth);
}

#osb-float .osb-icon {
  display: inline-block;
  animation: osbBounce 1.5s ease-in-out infinite;
  transition: all var(--osb-transition-smooth);
}

#osb-float .osb-timer {
  opacity: 0.75;
  font-size: 0.9em;
  animation: osbFadeIn 0.4s ease-out;
  transition: all var(--osb-transition-smooth);
}

/* ============================================
   Bar Style Variants
   ============================================ */

#osb-float.osb-style-pill {
  border-radius: 999px;
}

#osb-float.osb-style-badge {
  border-radius: 10px;
}

#osb-float.osb-style-banner {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  justify-content: center;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  animation: none !important;
}

/* ============================================
   Position Styles
   ============================================ */

#osb-float.osb-pos-bottom-right { 
  right: 16px; 
  bottom: 16px; 
}

#osb-float.osb-pos-bottom-left { 
  left: 16px; 
  bottom: 16px; 
}

#osb-float.osb-pos-top-right { 
  right: 16px; 
  top: 16px; 
}

#osb-float.osb-pos-top-left { 
  left: 16px; 
  top: 16px; 
}

#osb-float.osb-pos-left { 
  left: -24px; 
  top: 50%; 
  transform: translateY(-50%) rotate(-90deg); 
  transform-origin: center; 
}

#osb-float.osb-pos-right { 
  right: -24px; 
  top: 50%; 
  transform: translateY(-50%) rotate(90deg); 
  transform-origin: center; 
}

#osb-float.osb-pos-left:hover,
#osb-float.osb-pos-right:hover { 
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); 
}

/* ============================================
   Responsive Design
   ============================================ */

@media (min-width: 1025px) {
  #osb-float.osb-hide-desktop { 
    display: none !important; 
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #osb-float.osb-hide-tablet { 
    display: none !important; 
  }
}

@media (max-width: 767px) {
  #osb-float.osb-hide-mobile { 
    display: none !important; 
  }
  
  #osb-float.osb-float { 
    max-width: calc(100vw - 16px); 
    padding: 8px 12px; 
  }
  
  #osb-float.osb-pos-bottom-right { 
    right: 8px; 
    bottom: 8px; 
  }
  
  #osb-float.osb-pos-bottom-left { 
    left: 8px; 
    bottom: 8px; 
  }
  
  #osb-float.osb-pos-top-right { 
    right: 8px; 
    top: 8px; 
  }
  
  #osb-float.osb-pos-top-left { 
    left: 8px; 
    top: 8px; 
  }
  
  #osb-float.osb-pos-left { 
    left: -30px; 
    bottom: 88px; 
    top: auto; 
    transform: rotate(-90deg); 
  }
  
  #osb-float.osb-pos-right { 
    right: -30px; 
    bottom: 88px; 
    top: auto; 
    transform: rotate(90deg); 
  }
}

/* ============================================
   Status Change Animations
   ============================================ */

#osb-float.osb-status-changing {
  animation: osbPulse 0.4s ease-out;
}

/* ============================================
   Loading State
   ============================================ */

#osb-float.osb-loading .osb-dot {
  animation: osbRotate 1s linear infinite !important;
}

/* ============================================
   Accessibility & Performance
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  #osb-float.osb-float,
  #osb-float .osb-dot,
  #osb-float .osb-content,
  #osb-float .osb-icon,
  #osb-float .osb-timer {
    animation: none !important;
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  #osb-float.osb-float {
    border-width: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}