.whats-new-overlay {
 position: fixed;
 inset: 0;
 z-index: 60;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 background: rgba(16, 23, 41, 0.48);
 animation: whats-new-fade 180ms
  ease-out;
}

.whats-new-panel {
 width: min(720px, 100%);
 max-height: min(86vh, 860px);
 max-height: min(86dvh, 860px);
 display: flex;
 flex-direction: column;
 background: var(--card);
 color: var(--card-foreground);
 border: 1px solid var(--border);
 border-bottom: 0;
 border-radius: 18px 18px 0 0;
 box-shadow: 0 -16px 48px
  rgba(16, 23, 41, 0.2);
 overflow: hidden;
 transform: translateY(100%);
 animation: whats-new-rise 280ms
  cubic-bezier(0.2, 0.8, 0.2, 1)
  forwards;
}

.whats-new-header {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 18px 18px 0;
}

.whats-new-title {
 margin: 0;
 color: var(--foreground);
 font-size: var(--text-xl);
 font-weight: 600;
}

.whats-new-close {
 margin-left: auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 padding: 0;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--muted-foreground);
 cursor: pointer;
}

.whats-new-close:hover {
 background: var(--accent);
 color: var(--foreground);
}

.whats-new-search-row {
 padding: 14px 18px 0;
}

.whats-new-search {
 width: 100%;
}

.whats-new-scroll {
 flex: 1;
 min-height: 240px;
 max-height: calc(86vh - 132px);
 max-height: calc(86dvh - 132px);
 overflow: auto;
 padding: 16px 18px 28px;
 display: flex;
 flex-direction: column;
 gap: 18px;
}

.whats-new-skeleton {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 8px 0 8px 18px;
}

.whats-new-day {
 position: relative;
 margin: 0 0 0 8px;
 padding: 0 0 4px 18px;
 border-left: 2px solid var(--border);
 animation: whats-new-in 220ms ease-out;
}

.whats-new-day::before {
 content: '';
 position: absolute;
 left: -5px;
 top: 6px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--primary);
}

.whats-new-date {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 8px;
 color: var(--foreground);
 font-size: var(--text-base);
 font-weight: 600;
}

.whats-new-badge {
 display: inline-flex;
 align-items: center;
 padding: 1px 6px;
 border-radius: 999px;
 background: var(--destructive);
 color: var(--destructive-foreground);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.06em;
 line-height: 1.5;
}

.whats-new-features {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.whats-new-feature-name {
 margin: 0;
 color: var(--foreground);
 font-size: var(--text-base);
 font-weight: 600;
}

.whats-new-feature-description,
.whats-new-missing,
.whats-new-empty,
.whats-new-error,
.whats-new-end {
 margin: 4px 0 0;
 color: var(--muted-foreground);
 font-size: var(--text-sm);
 line-height: 1.45;
}

.whats-new-error {
 color: var(--destructive);
 margin-top: 0;
}

.whats-new-footer {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

/* .btn sets display:inline-flex, which would
 * keep a hidden Show more button on screen
 * next to End of updates. */
.whats-new-footer [hidden] {
 display: none;
}

.whats-new-end {
 margin: 8px 0 0;
 text-align: center;
 font-size: var(--text-xs);
 letter-spacing: 0.04em;
 text-transform: uppercase;
}

.whats-new-sentinel {
 height: 1px;
}

@keyframes whats-new-fade {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

@keyframes whats-new-rise {
 to {
  transform: translateY(0);
 }
}

@keyframes whats-new-in {
 from {
  opacity: 0;
  transform: translateY(10px);
 }
 to {
  opacity: 1;
  transform: none;
 }
}

@media (prefers-reduced-motion: reduce) {
 .whats-new-overlay,
 .whats-new-panel,
 .whats-new-day {
  animation: none;
  transform: none;
 }
}

@media (max-width: 720px) {
 .whats-new-panel {
  width: 100%;
  max-height: 92dvh;
 }

 .whats-new-scroll {
  max-height: calc(92dvh - 132px);
 }
}