/* ------------------------------------------------------------------------------
   "LIVE NOW" desktop card — a compact, glass notification for whatever is live on
   Here right now. Shown to every visitor, signed in or not. Desktop: a modest
   card in the bottom-right corner. Mobile: a slim strip along the bottom edge.
   It sits above the desktop icons (and their drag/selection layers, z-index 35-40)
   and the window layer (z-index 1), but under the ALY button, notifications and
   dialogs, and withdraws with the rest of the chrome. All colour comes from the
   Alyssiun semantic tokens, so LUX and NEO are followed. The electric-cyan accent
   is spent only on something that is live this moment. */
.desktop-live-events {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: 320px;
  max-width: calc(100vw - 32px);
  z-index: 60;
  pointer-events: none;
}

.desktop-live-card {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  gap: 12px;
  position: relative;
  overflow: hidden;
  padding: 10px 40px 10px 10px;
  border: 1px solid var(--desktop-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--desktop-surface) 88%, transparent);
  box-shadow: var(--desktop-shadow, 0 10px 30px rgba(26, 29, 28, 0.2));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  cursor: pointer;
  text-align: left;
}

/* The artwork is contained, never cropped: a fixed slot, the whole image inside. */
.desktop-live-banner {
  flex: 0 0 76px;
  align-self: center;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--desktop-surface-strong, rgba(0, 0, 0, 0.08)) 80%, transparent);
}

.desktop-live-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.desktop-live-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.desktop-live-body strong {
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--desktop-text, inherit);
  overflow-wrap: break-word;
}

.desktop-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #00a9bf;
}

:root[data-alyssiun-atmosphere="neo"] .desktop-live-tag { color: #00e5ff; }

.desktop-live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .desktop-live-pulse { animation: desktop-live-pulse 1.8s ease-out infinite; }
}

@keyframes desktop-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 169, 191, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(0, 169, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 169, 191, 0); }
}

/* Whole words only: the description is dropped on small screens rather than
   clipped mid-word, and the meta line wraps instead of truncating. */
.desktop-live-desc,
.desktop-live-meta {
  font-size: 12px;
  line-height: 1.35;
  color: var(--desktop-muted);
  overflow-wrap: break-word;
}

.desktop-live-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.desktop-live-join {
  margin-top: 4px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #00a9bf;
}

:root[data-alyssiun-atmosphere="neo"] .desktop-live-join { background: #00e5ff; color: #04222a; }

/* The only way to close the card, always in the corner and always tappable. */
.desktop-live-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--desktop-border);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--desktop-text, inherit);
  background: var(--desktop-surface-strong, var(--desktop-surface));
  cursor: pointer;
}

.desktop-live-dismiss:hover { border-color: var(--desktop-focus, var(--desktop-border)); }
.desktop-live-dismiss:focus-visible { outline: 2px solid var(--desktop-focus); outline-offset: 2px; }

body[data-spatial-panel-active] .desktop-live-events,
.desktop-shell[data-ui-hidden] .desktop-live-events {
  visibility: hidden;
  pointer-events: none;
}

/* Mobile: a slim strip along the bottom edge. */
@media (max-width: 640px) {
  .desktop-live-events {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
  }
  .desktop-live-card { gap: 10px; padding: 8px 44px 8px 8px; border-radius: 14px; }
  .desktop-live-banner { flex-basis: 52px; width: 52px; height: 52px; }
  .desktop-live-desc { display: none; }
  .desktop-live-join { display: none; }
  .desktop-live-body { gap: 2px; }
}

/* Short landscape phones: keep the strip low and out of the way. */
@media (max-height: 480px) and (orientation: landscape) {
  .desktop-live-events { width: min(320px, 45vw); right: auto; left: max(8px, env(safe-area-inset-left, 0px)); }
}