.admin-shell {
  --platform-offer-bar-height: 0px;
}

.platform-offer-bar {
  --offer-bar-bg: #0f172a;
  --offer-bar-fg: #f8fafc;
  --offer-bar-height: 48px;
  background: var(--offer-bar-bg);
  color: var(--offer-bar-fg);
  min-height: var(--offer-bar-height);
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/*
 * Offer Bar is fixed under MudAppBar (same chrome behavior as the header).
 * While present: drawer + main content offset by --platform-offer-bar-height.
 * On dismiss the slot/style leave the DOM → :has(...) no longer matches →
 * drawer returns to full height under the app bar.
 */
.admin-shell .platform-system-banner {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  position: relative;
  z-index: calc(var(--mud-zindex-drawer, 1100) + 20);
  padding-top: var(--mud-appbar-height, 64px);
}

.admin-shell .platform-offer-bar-slot {
  position: fixed;
  top: var(--mud-appbar-height, 64px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Above drawer (1100), below appbar (1200). */
  z-index: calc(var(--mud-zindex-drawer, 1100) + 20);
}

.admin-shell .platform-offer-bar-slot > .platform-offer-bar--under-header {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: var(--platform-offer-bar-height, var(--offer-bar-height, 48px));
}

/* Reserve vertical space under fixed chrome (appbar + offer). */
.admin-shell:has(.platform-offer-bar-slot) > .admin-main-content.mud-main-content {
  padding-top: calc(
    var(--mud-appbar-height, 64px) + var(--platform-offer-bar-height, 48px) + var(--space-4)
  ) !important;
}

.admin-shell:has(.platform-system-banner):not(:has(.platform-offer-bar-slot)) > .admin-main-content.mud-main-content {
  padding-top: var(--space-4) !important;
}

.admin-shell:has(.platform-offer-bar-slot) .admin-nav-drawer.mud-drawer,
.admin-shell:has(.platform-offer-bar-slot) .admin-nav-drawer.mud-drawer-mini,
.admin-shell:has(.platform-offer-bar) .admin-nav-drawer.mud-drawer {
  top: calc(var(--mud-appbar-height, 64px) + var(--platform-offer-bar-height, 48px)) !important;
  height: calc(
    100% - var(--mud-appbar-height, 64px) - var(--platform-offer-bar-height, 48px)
  ) !important;
  z-index: var(--mud-zindex-drawer, 1100) !important;
}

/* Immersive editors own the stage — hide marketing strip (drawer rules above stop matching). */
.admin-shell:has(.map-editor-root.is-fullscreen) .platform-offer-bar-slot,
.admin-shell:has(.map-studio-root.is-fullscreen) .platform-offer-bar-slot,
.admin-shell:has(.cms-content-workspace.is-immersive) .platform-offer-bar-slot {
  display: none;
}

.admin-shell:has(.map-editor-root.is-fullscreen) .admin-nav-drawer.mud-drawer,
.admin-shell:has(.map-studio-root.is-fullscreen) .admin-nav-drawer.mud-drawer,
.admin-shell:has(.cms-content-workspace.is-immersive) .admin-nav-drawer.mud-drawer {
  top: var(--mud-appbar-height, 64px) !important;
  height: calc(100% - var(--mud-appbar-height, 64px)) !important;
}

.platform-offer-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: 0.35rem 1rem;
  box-sizing: border-box;
}

.platform-offer-bar__message {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.35;
  min-width: 0;
}

.platform-offer-bar__message p {
  margin: 0;
}

.platform-offer-bar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--offer-bar-fg) 16%, transparent);
  color: var(--offer-bar-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--offer-bar-fg) 35%, transparent);
  white-space: nowrap;
}

.platform-offer-bar__dismiss {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--offer-bar-fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 0.15rem 0.35rem;
}

.platform-offer-bar__dismiss:hover {
  opacity: 1;
}

.platform-offer-bar--preview {
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}

.platform-offer-bar--enter {
  animation: offer-bar-enter 220ms ease-out;
}

@keyframes offer-bar-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .platform-offer-bar__inner {
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    padding: 0.5rem 0.75rem;
  }

  .platform-offer-bar__message {
    flex: 1 1 calc(100% - 2rem);
    font-size: 0.8125rem;
  }

  .platform-offer-bar__cta {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-offer-bar--enter {
    animation: none;
  }
}