/* ------------------------------------------------------------------------------
   "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. */
/* Bottom right, but above the floating Λ button's default seat (56px + 16px
   inset at the same corner), so the button never covers the card's dismiss. */
.desktop-live-events {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 72px);
  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));
    /* Still above the Λ button's seat (56px + its 34px floor at this width). */
    bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 92px);
    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) {
  /* Bottom RIGHT here (os-round-8): Λ rests bottom centre and the desktop icons fill the left column, which
     now holds ALY and the Store (os-round-7), so the bottom left would sit on the second icon. No lift needed. */
  .desktop-live-events { width: min(320px, 40vw); left: auto; right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
}