/* ===================================================== */
/* RemoteDesk — custom styles (glassmorphism, scrollbars, */
/* animated backgrounds, Windows 11 inspired surfaces).   */
/* ===================================================== */

:root {
  --glass-bg: rgba(20, 27, 45, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
}

html.light body {
  background: #eef1f8;
  color: #0f172a;
}

* { -webkit-tap-highlight-color: transparent; }

/* Animated gradient aurora background */
.aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  filter: blur(120px); opacity: 0.5; animation: drift 18s ease-in-out infinite;
}
.aurora::before { background: radial-gradient(circle, #3b5ffa, transparent 60%); top: -10%; left: -5%; }
.aurora::after  { background: radial-gradient(circle, #7c3aed, transparent 60%); bottom: -15%; right: -10%; animation-delay: -9s; }
html.light .aurora::before { opacity: 0.3; }
html.light .aurora::after  { opacity: 0.3; }

@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,30px) scale(1.15); }
}

/* Glass surface */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}
html.light .glass {
  background: rgba(255,255,255,0.75);
  border-color: rgba(15,23,42,0.08);
  box-shadow: 0 10px 30px -12px rgba(15,23,42,0.18);
}

/* Page transition */
.view-enter { animation: viewIn .35s cubic-bezier(.16,1,.3,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

/* Skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,.06); }
.skeleton::after {
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.55); background-clip: padding-box; }

/* Pulsing online dot */
.dot-online { box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Toast */
.toast { animation: toastIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes toastIn { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform:none; } }

/* Remote screen canvas */
.remote-stage {
  background:
    linear-gradient(135deg, rgba(59,95,250,.08), transparent),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px);
}

/* Focus ring */
.ring-focus:focus-visible { outline: 2px solid #5b86fb; outline-offset: 2px; }

/* Range slider */
input[type=range] { accent-color: #3b5ffa; }