/* Floating "new version" / "What's new" card on the company dashboard.
   Colours come from the dashboard theme tokens, so it follows light and dark mode. */
.wt-update-card {
  --wt-uc-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed;
  inset: auto 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) auto;
  z-index: 10001;
  box-sizing: border-box;
  width: min(36rem, calc(100vw - 2.5rem));
  max-height: calc(100dvh - 2.5rem);
  overflow: auto;
  margin: 0;
  padding: 1rem 1rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent-primary, #0ea5e9) 35%, var(--border-color, #2d3748));
  border-radius: 16px;
  background: var(--bg-card, #1a2234);
  color: var(--text-primary, #f8fafc);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow: 0 18px 48px rgba(2, 8, 20, 0.32), 0 2px 8px rgba(2, 8, 20, 0.18);
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transform-origin: bottom right;
  transition: opacity 220ms ease-out, translate 260ms var(--wt-uc-ease), scale 260ms var(--wt-uc-ease);
}
@starting-style {
  .wt-update-card {
    opacity: 0;
    translate: 0 12px;
    scale: 0.98;
  }
}
.wt-update-card[data-closing] {
  opacity: 0;
  translate: 0 8px;
  scale: 0.98;
  transition-duration: 160ms;
}

.wt-update-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}
.wt-update-card__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-primary, #0ea5e9) 16%, transparent);
  color: var(--accent-primary, #0ea5e9);
}
.wt-update-card__icon svg { width: 1.15rem; height: 1.15rem; }
.wt-update-card__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-primary, #0ea5e9);
}
.wt-update-card__title {
  margin: 0.1rem 0 0;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.wt-update-card__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.35rem -0.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.wt-update-card__close svg { width: 1rem; height: 1rem; }
.wt-update-card__close:hover { background: var(--bg-card-hover, #1f2937); color: var(--text-primary, #f8fafc); }

.wt-update-card__body { margin: 0.65rem 0 0; padding-left: 3rem; }
.wt-update-card__note-title { margin: 0; font-weight: 600; font-size: 0.875rem; }
.wt-update-card__list {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.85rem;
}
.wt-update-card__list li { margin: 0.2rem 0; text-wrap: pretty; }
.wt-update-card__list li::marker { color: var(--accent-primary, #0ea5e9); }

.wt-update-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0 0 3rem;
  border-top: 1px solid var(--border-color, #2d3748);
}
.wt-update-card__hint { margin: 0; font-size: 0.8rem; color: var(--text-muted, #64748b); }
.wt-update-card__actions { display: flex; gap: 0.5rem; margin-left: auto; }
.wt-update-card__btn {
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid var(--border-color, #2d3748);
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary, #f8fafc);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, scale 120ms var(--wt-uc-ease);
}
.wt-update-card__btn:hover { background: var(--bg-card-hover, #1f2937); }
.wt-update-card__btn:active { scale: 0.97; }
.wt-update-card__btn--primary {
  border-color: transparent;
  background: var(--accent-primary, #0ea5e9);
  color: #fff;
  font-weight: 600;
}
.wt-update-card__btn--primary:hover { background: color-mix(in srgb, var(--accent-primary, #0ea5e9) 88%, #000); }
.wt-update-card__btn:disabled { opacity: 0.7; cursor: progress; }
.wt-update-card :focus-visible {
  outline: 2px solid var(--accent-primary, #0ea5e9);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .wt-update-card {
    inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px)) 0.75rem;
    width: auto;
    transform-origin: bottom center;
  }
  .wt-update-card__body,
  .wt-update-card__foot { padding-left: 0; }
  .wt-update-card__actions { flex: 1 1 100%; }
  .wt-update-card__btn { flex: 1 1 0; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-update-card,
  .wt-update-card[data-closing] { translate: none; scale: none; transition-property: opacity; }
  @starting-style {
    .wt-update-card { translate: none; scale: none; }
  }
}