/* Session overlays: boot splash, login (slick-greeter), lock, shutdown */
#session-layer {
  position: absolute;
  inset: 0;
  z-index: 1300;
  pointer-events: none;   /* empty layer must never intercept the desktop */
}
#session-layer.active { display: block; }
.session-screen {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: opacity 420ms ease;
  pointer-events: auto;
}
.session-screen.fade-out { opacity: 0; pointer-events: none; }

/* boot splash */
.boot-splash { background: #0b0b0d; flex-direction: column; display: flex; gap: 34px; align-items: center; }
.boot-splash .bs-logo { width: 104px; height: 104px; animation: boot-pulse 2.2s ease-in-out infinite; }
@keyframes boot-pulse { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.04); opacity: 1; } }
.boot-dots { display: flex; gap: 9px; }
.boot-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #35a854;
  animation: boot-dot 1.1s ease-in-out infinite;
}
.boot-dots span:nth-child(2) { animation-delay: .15s; }
.boot-dots span:nth-child(3) { animation-delay: .3s; }
.boot-dots span:nth-child(4) { animation-delay: .45s; }
@keyframes boot-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* login / lock share wallpaper backdrop */
.greeter {
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
}
.greeter::before {
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(16px) brightness(.62);
  background: rgba(10, 14, 12, .25);
}
.greeter .g-top {
  position: absolute; top: 18px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  font-weight: 500;
}
.greeter .g-bottom {
  position: absolute; bottom: 16px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-small);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.greeter .g-session {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .3);
}
.greeter-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  color: #fff;
}
.greeter-card .g-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  border: 2px solid rgba(255, 255, 255, .75);
}
.greeter-card .g-name { font-size: 19px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.greeter-card .g-hostname { font-size: var(--fs-small); opacity: .8; margin-top: -8px; }
.greeter-card.shake { animation: shake 380ms ease; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.g-pass-row { display: flex; gap: 8px; }
.g-pass {
  width: 250px;
  padding: 9px 13px;
  border-radius: var(--r-entry);
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .42);
  color: #fff;
  outline: none;
  font-size: var(--fs-ui);
  backdrop-filter: blur(4px);
}
.g-pass:focus { border-color: #6fc98a; box-shadow: 0 0 0 1px #6fc98a; }
.g-go {
  width: 38px;
  border-radius: var(--r-entry);
  background: rgba(53, 168, 84, .9);
  color: #fff;
  display: grid; place-items: center;
}
.g-go:hover { background: var(--accent-hover); }
.g-hint { font-size: var(--fs-xsmall); opacity: .75; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* lock screen big clock */
.lock-clock { font-size: 58px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.lock-date { font-size: 17px; opacity: .92; margin-top: -6px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }

/* shutdown / goodbye */
.shutdown-screen { background: #000; flex-direction: column; display: flex; gap: 26px; align-items: center; color: #9a9a9a; }
.shutdown-screen .sd-logo { width: 74px; height: 74px; opacity: .85; }
.shutdown-screen .sd-text { font-size: var(--fs-ui); }
.goodbye-btn {
  margin-top: 8px;
  padding: 9px 26px;
  border-radius: var(--r-pill);
  border: 1px solid #3c3c41;
  color: #cfcfcf;
  font-weight: 500;
}
.goodbye-btn:hover { border-color: #6fc98a; color: #fff; background: rgba(53, 168, 84, .15); }

/* brightness overlay */
#brightness-overlay {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 1400;
}

/* volume/brightness feedback uses OSD layer; workspace slide hint */
.ws-slide-out-left { animation: ws-out-l 220ms var(--ease-out) forwards; }
.ws-slide-in-right { animation: ws-in-r 220ms var(--ease-out) forwards; }
.ws-slide-out-right { animation: ws-out-r 220ms var(--ease-out) forwards; }
.ws-slide-in-left { animation: ws-in-l 220ms var(--ease-out) forwards; }
@keyframes ws-out-l { to { opacity: 0; transform: translateX(-46px); } }
@keyframes ws-in-r { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes ws-out-r { to { opacity: 0; transform: translateX(46px); } }
@keyframes ws-in-l { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }