/*
 * Public viewer mode for website embeds.
 * Activated by loading the app with ?public=1 or ?viewer=public.
 * Keep the full application available; this file only makes the embed fit cleanly.
 */

/*
 * Background color: match the standalone Electron app's brand navy.
 * The standalone uses var(--bg-base) = #192064 throughout (body, header,
 * footer). We inherit that here instead of using the previous near-black
 * #050a12 override so the embed visually matches the desktop app.
 *
 * overflow-x: hidden on the document root is a safety net so nothing can
 * ever produce a horizontal page scrollbar on small viewports.
 */
html.wmb-public-viewer,
html.wmb-public-viewer body {
  background: #192064;
  overflow-x: hidden;
}

html.wmb-public-viewer #app {
  background: #192064;
}

html.wmb-public-viewer .header {
  min-height: 58px;
  height: auto;
  padding: 8px 14px;
  gap: 12px;
  /* No background override — inherit flat var(--bg-base) from the
   * standalone .header rule so embed and desktop look identical. */
}

/* Logo and wordmark are hidden in every embed viewport — the hosting
 * website already provides the branding context. */
html.wmb-public-viewer .header-brand {
  display: none !important;
}

html.wmb-public-viewer .header-selectors {
  margin-left: clamp(8px, 2vw, 20px);
  gap: 8px;
}

html.wmb-public-viewer #product-select .hdr-select-btn {
  min-width: min(250px, 32vw);
}

html.wmb-public-viewer #tilt-select .hdr-select-btn {
  min-width: 140px;
}

html.wmb-public-viewer .hdr-select-btn {
  border-radius: 8px;
  /* No background override — inherit var(--bg-overlay) from the standalone
   * .hdr-select-btn rule so the dropdowns match the desktop app's navy. */
}

html.wmb-public-viewer .header-controls {
  gap: 8px;
  /* Establish a positioning context so the mobile tools popover can anchor
   * itself relative to the header-controls cluster. */
  position: relative;
}

/* Extra breathing room between the site selector / status dot and the
 * "Show radar sites on map" icon cluster to its right. */
html.wmb-public-viewer .header-status {
  margin-right: 6px;
}

/*
 * Analysis tools menu (mobile-friendly).
 *
 * In the embed, the analysis tool buttons (site map picker, cross-section,
 * volume explorer, inspector, distance, forecast) are reparented into a
 * single .embed-tools-menu wrapper by app.js. By default the wrapper uses
 * display: contents so the buttons appear inline in the header exactly as
 * they did before (desktop behavior). At tablet/phone sizes we hide the
 * wrapper and expose a "more" toggle that opens the wrapper as a popover.
 */
html.wmb-public-viewer .embed-tools-menu {
  display: contents;
}

html.wmb-public-viewer #embed-tools-toggle {
  display: none;
  align-items: center;
  justify-content: center;
}

/* The kebab "more tools" toggle is unused at <= 1200px because the
 * analysis icons live in the timeline bar at those sizes (see the tablet
 * and phone bottom-toolbar blocks further down). */
@media (max-width: 1200px) {
  html.wmb-public-viewer #embed-tools-toggle {
    display: none !important;
  }
}

html.wmb-public-viewer .main-content {
  background: #192064;
}

html.wmb-public-viewer .maplibregl-ctrl-top-right {
  top: 4px !important;
  right: 4px !important;
}

html.wmb-public-viewer .maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 0 !important;
}

html.wmb-public-viewer .footer {
  min-height: 54px;
  height: auto;
  padding: 6px 12px;
  /* No background override — inherit flat var(--bg-base) from the
   * standalone .footer rule. */
}

html.wmb-public-viewer .timeline-bar {
  gap: clamp(8px, 1.8vw, 18px);
}

@media (min-width: 701px) and (max-width: 1200px) and (min-height: 501px) {
  /* Tablet: keep the desktop-style header, but scale the controls so iPad
   * portrait and landscape browsers do not clip or drop items. */
  html.wmb-public-viewer .header {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 54px;
    padding: 7px 10px;
    gap: 8px;
  }

  html.wmb-public-viewer .header-brand {
    display: none !important;
  }

  html.wmb-public-viewer .header-selectors {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
  }

  html.wmb-public-viewer #product-select .hdr-select-btn {
    width: clamp(158px, 23vw, 220px);
    min-width: 0;
  }

  html.wmb-public-viewer #tilt-select .hdr-select-btn {
    width: clamp(112px, 15vw, 140px);
    min-width: 0;
  }

  html.wmb-public-viewer #palette-selector .palette-selector-btn {
    width: clamp(126px, 17vw, 160px);
    min-width: 0;
  }

  html.wmb-public-viewer .hdr-select-label,
  html.wmb-public-viewer .palette-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.wmb-public-viewer .vcp-display,
  html.wmb-public-viewer .header-status {
    display: none;
  }

  html.wmb-public-viewer .header-controls {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
    justify-content: flex-end;
  }

  html.wmb-public-viewer .header-controls .site-selector {
    flex: 1 1 168px;
    min-width: 0;
    max-width: 220px;
  }

  html.wmb-public-viewer .header-controls .site-selector-btn {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 6px 8px;
  }

  html.wmb-public-viewer .header-controls .site-selector-info,
  html.wmb-public-viewer .header-controls .site-selector-main {
    min-width: 0;
  }

  html.wmb-public-viewer .header-controls .site-name {
    min-width: 0;
  }

  html.wmb-public-viewer .timeline-info {
    min-width: 96px;
  }
}

/*
 * Tablet bottom-toolbar (iPad portrait & landscape).
 *
 * Analysis icons move into the timeline bar (via _setupEmbedMobileDrawer's
 * toolsMq listener in app.js). The playback chrome — prev/next buttons,
 * timeline scrubber, speed control — is hidden so the bar is filled by
 * the analysis icons. The play/pause button and current scan-time stay so
 * playback is still triggerable. Icons get the same active-state highlight
 * the phone uses, just scaled up for the larger viewport.
 */
@media (min-width: 701px) and (max-width: 1200px) and (min-height: 501px) {
  html.wmb-public-viewer #btn-prev-frame,
  html.wmb-public-viewer #btn-next-frame,
  html.wmb-public-viewer #btn-speed,
  html.wmb-public-viewer #speed-slider-popup,
  html.wmb-public-viewer .timeline-track-container,
  html.wmb-public-viewer .timeline-speed {
    display: none !important;
  }

  html.wmb-public-viewer .footer {
    padding: 4px 10px;
  }

  html.wmb-public-viewer .timeline-bar {
    justify-content: flex-end;
    gap: 8px;
  }

  html.wmb-public-viewer .timeline-controls {
    order: 1;
    gap: 0;
    flex: 0 0 auto;
  }

  html.wmb-public-viewer .timeline-info {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    align-items: flex-start;
  }

  html.wmb-public-viewer .timeline-scantime {
    font-size: 14px;
    line-height: 1.1;
  }

  html.wmb-public-viewer .timeline-stale-age {
    font-size: 11px;
    line-height: 1.1;
  }

  /* Tools menu becomes a horizontal row inside the timeline bar. */
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu {
    order: 0;
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    position: static;
    padding: 0;
    max-width: none;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 50px;
    color: #ffffff;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button:hover,
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button.is-active,
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button[aria-pressed="true"] {
    color: #ffffff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.35),
      0 0 16px rgba(255, 255, 255, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.86);
    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast);
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button.is-active::after,
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button[aria-pressed="true"]::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button svg {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
  }

  html.wmb-public-viewer .timeline-controls .timeline-btn {
    color: #ffffff;
  }
}

@media (max-width: 700px) {
  html.wmb-public-viewer .header {
    align-items: stretch;
    flex-wrap: wrap;
    padding: 7px 10px;
    gap: 8px;
  }

  html.wmb-public-viewer .header-brand {
    min-width: 0;
  }

  html.wmb-public-viewer .header-selectors {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    gap: 6px;
  }

  html.wmb-public-viewer .header-controls {
    margin-left: auto;
    gap: 6px;
  }

  html.wmb-public-viewer #product-select .hdr-select-btn {
    min-width: 160px;
  }

  html.wmb-public-viewer #tilt-select .hdr-select-btn {
    min-width: 110px;
  }

  html.wmb-public-viewer #palette-selector .palette-selector-btn {
    min-width: 140px;
  }

  html.wmb-public-viewer .timeline-info {
    min-width: 92px;
  }
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  /* Phone: collapse the entire control surface into a slide-in drawer. The
   * header becomes a compact single row so the map gets the most screen
   * real estate possible. */

  html.wmb-public-viewer .header {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 50px;
    padding: 6px 10px;
    gap: 6px;
  }

  html.wmb-public-viewer .header-controls {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
    justify-content: flex-start;
  }

  /* Logo + wordmark removed on phones for maximum header brevity. */
  html.wmb-public-viewer .header-brand {
    display: none !important;
  }

  /* Product / tilt / palette controls live in the drawer on phones; the
   * station selector remains visible in the header. */
  html.wmb-public-viewer .header-selectors,
  html.wmb-public-viewer #embed-tools-toggle {
    display: none !important;
  }

  html.wmb-public-viewer .header-status {
    display: none !important;
  }

  html.wmb-public-viewer #embed-mobile-menu-btn {
    order: 0;
    flex: 0 0 36px;
  }

  html.wmb-public-viewer .header-controls .site-selector {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  html.wmb-public-viewer .header-controls .site-selector-btn {
    width: 100%;
    min-width: 0;
    height: 36px;
    gap: 6px;
    padding: 6px 8px;
  }

  html.wmb-public-viewer .header-controls .site-selector-info {
    min-width: 0;
  }

  html.wmb-public-viewer .header-controls .site-selector-main {
    gap: 6px;
    min-width: 0;
  }

  html.wmb-public-viewer .header-controls .site-selector-main .site-status-dot {
    order: 0;
  }

  html.wmb-public-viewer .header-controls .site-code {
    order: 1;
    flex: 0 0 auto;
    font-size: 11px;
    color: #ffffff;
  }

  html.wmb-public-viewer .header-controls .site-name {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
  }

  html.wmb-public-viewer .header-controls .site-selector-meta {
    display: none;
  }

  html.wmb-public-viewer .header-controls .site-selector-arrow {
    width: 10px;
    height: 10px;
  }

  html.wmb-public-viewer .header-controls .site-dropdown:not([hidden]) {
    position: fixed;
    top: 52px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: min(72vh, calc(100dvh - 126px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9200;
  }

  html.wmb-public-viewer .header-controls .site-dropdown-header {
    flex: 0 0 auto;
  }

  html.wmb-public-viewer .header-controls .site-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.wmb-public-viewer .header-controls .site-sort-dropdown:not([hidden]),
  html.wmb-public-viewer .header-controls .site-filter-dropdown:not([hidden]) {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 6px;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu {
    order: 0;
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
    position: static;
    padding: 0;
    max-width: none;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 42px;
    color: #ffffff;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button:hover,
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button.is-active,
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button[aria-pressed="true"] {
    color: #ffffff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.35),
      0 0 14px rgba(255, 255, 255, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.86);
    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast);
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button.is-active::after,
  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button[aria-pressed="true"]::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button svg {
    position: relative;
    z-index: 1;
    width: 23px;
    height: 23px;
  }

  html.wmb-public-viewer .timeline-controls .timeline-btn {
    color: #ffffff;
  }

  html.wmb-public-viewer #settings-btn {
    order: 2;
    flex: 0 0 36px;
    margin-left: auto;
  }

  /* The VCP supplemental indicator is also hidden — small phones have no
   * room for it. */
  html.wmb-public-viewer .vcp-display {
    display: none;
  }

  html.wmb-public-viewer .footer {
    padding: 4px 8px;
  }

  html.wmb-public-viewer .timeline-bar {
    justify-content: flex-end;
    gap: 6px;
  }

  html.wmb-public-viewer #btn-prev-frame,
  html.wmb-public-viewer #btn-next-frame,
  html.wmb-public-viewer #btn-speed,
  html.wmb-public-viewer #speed-slider-popup,
  html.wmb-public-viewer .timeline-track-container,
  html.wmb-public-viewer .timeline-speed {
    display: none !important;
  }

  html.wmb-public-viewer .timeline-controls {
    order: 1;
    gap: 0;
    flex: 0 0 auto;
  }

  html.wmb-public-viewer .timeline-info {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    align-items: flex-start;
  }

  html.wmb-public-viewer .timeline-scantime {
    font-size: 13px;
    line-height: 1.1;
  }

  html.wmb-public-viewer .timeline-stale-age {
    font-size: 10px;
    line-height: 1.1;
  }

  html.wmb-public-viewer .maplibregl-ctrl-scale,
  html.wmb-public-viewer .maplibregl-ctrl-attrib,
  html.wmb-public-viewer .maplibregl-ctrl-attrib-button {
    display: none !important;
  }
}

@media (max-width: 380px), (max-width: 950px) and (max-height: 430px) and (orientation: landscape) {
  html.wmb-public-viewer .header {
    padding: 6px 8px;
    gap: 4px;
  }

  html.wmb-public-viewer #embed-mobile-menu-btn,
  html.wmb-public-viewer #settings-btn {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  html.wmb-public-viewer .header-controls .site-selector-btn {
    padding-inline: 6px;
  }

  html.wmb-public-viewer .header-controls .site-name {
    font-size: 11px;
  }

  html.wmb-public-viewer .header-controls .site-code {
    font-size: 10px;
  }

  html.wmb-public-viewer .embed-mobile-drawer {
    height: 46px;
  }

  html.wmb-public-viewer .embed-mobile-drawer__panel {
    gap: 4px;
    padding: 6px;
  }

  html.wmb-public-viewer .embed-mobile-drawer__content {
    gap: 4px;
  }

  html.wmb-public-viewer .embed-mobile-drawer__close {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-btn,
  html.wmb-public-viewer .embed-mobile-drawer__content .palette-selector-btn {
    height: 34px;
    min-height: 34px;
    padding-inline: 6px;
  }

  html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-label,
  html.wmb-public-viewer .embed-mobile-drawer__content .palette-name {
    font-size: 11px;
  }

  html.wmb-public-viewer .timeline-bar {
    gap: 4px;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu {
    gap: 1px;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button {
    height: 40px;
  }

  html.wmb-public-viewer .timeline-bar > #embed-tools-menu > button svg {
    width: 22px;
    height: 22px;
  }
}

/*
 * Arrow button + control rail (mobile only).
 *
 * The arrow is always in the DOM but hidden above 700px. On phones and
 * narrow embeds it opens
 * a header-height rail that slides across the station / settings area and
 * holds product, tilt, and palette controls in a single row.
 */
html.wmb-public-viewer #embed-mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
}

html.wmb-public-viewer .embed-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  z-index: 9300;
  pointer-events: none;
  visibility: hidden;
  overflow: visible;
}

html.wmb-public-viewer .embed-mobile-drawer.embed-mobile-drawer--open {
  pointer-events: auto;
  visibility: visible;
}

html.wmb-public-viewer .embed-mobile-drawer__backdrop {
  display: none;
}

html.wmb-public-viewer .embed-mobile-drawer__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #192064;
  border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  overflow: visible;
}

html.wmb-public-viewer .embed-mobile-drawer--open .embed-mobile-drawer__panel {
  transform: translateX(0);
}

html.wmb-public-viewer .embed-mobile-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #cbd5e1);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

html.wmb-public-viewer .embed-mobile-drawer__close:hover,
html.wmb-public-viewer .embed-mobile-drawer__close:focus-visible {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-primary, #f1f5f9);
}

html.wmb-public-viewer .embed-mobile-drawer__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

/* Product / tilt / palette sit side-by-side in the header rail. */
html.wmb-public-viewer .embed-mobile-drawer__content #product-select,
html.wmb-public-viewer .embed-mobile-drawer__content #tilt-select,
html.wmb-public-viewer .embed-mobile-drawer__content #palette-selector {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

html.wmb-public-viewer .embed-mobile-drawer__content #product-select {
  flex-grow: 1.05;
}

html.wmb-public-viewer .embed-mobile-drawer__content #tilt-select {
  flex-grow: 1.1;
}

html.wmb-public-viewer .embed-mobile-drawer__content #palette-selector {
  flex-grow: 0.8;
}

html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-btn,
html.wmb-public-viewer .embed-mobile-drawer__content .palette-selector-btn {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 6px 8px;
}

html.wmb-public-viewer .embed-mobile-drawer__content #product-select .hdr-select-btn,
html.wmb-public-viewer .embed-mobile-drawer__content #tilt-select .hdr-select-btn,
html.wmb-public-viewer .embed-mobile-drawer__content #palette-selector .palette-selector-btn {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
}

html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-label,
html.wmb-public-viewer .embed-mobile-drawer__content .palette-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.wmb-public-viewer .embed-mobile-drawer__content .palette-icon {
  display: none;
}

html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-chevron,
html.wmb-public-viewer .embed-mobile-drawer__content .palette-arrow {
  flex: 0 0 auto;
}

html.wmb-public-viewer .embed-mobile-drawer__content .site-selector-meta {
  display: none;
}

html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-panel:not([hidden]) {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - 16px);
  height: auto;
  max-height: min(58vh, calc(100dvh - 116px));
  margin-top: 0;
  display: block;
  overflow: hidden;
  z-index: 9400;
}

html.wmb-public-viewer .embed-mobile-drawer__content #tilt-select .hdr-select-panel:not([hidden]) {
  left: 50%;
  transform: translateX(-50%);
}

html.wmb-public-viewer .embed-mobile-drawer__content #palette-selector .palette-dropdown:not([hidden]) {
  position: fixed;
  top: 52px;
  left: 8px;
  right: 8px;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: min(66vh, calc(100dvh - 116px));
  height: min(66vh, calc(100dvh - 116px));
  margin-top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9400;
}

html.wmb-public-viewer .embed-mobile-drawer__content .hdr-select-list {
  max-height: min(58vh, calc(100dvh - 116px));
  overflow-y: auto;
}

html.wmb-public-viewer .embed-mobile-drawer__content .palette-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  html.wmb-public-viewer #embed-mobile-menu-btn {
    display: inline-flex;
  }
}


/*
 * Hide messaging, video-call, and viewer-location-sharing surfaces in the
 * embed. The JS init for messaging/video-call is also skipped in public mode
 * (see app.js isPublicViewerMode gates) — these rules cover any markup that
 * exists in the DOM regardless of init.
 */
html.wmb-public-viewer #profile-action-message,
html.wmb-public-viewer #profile-action-videocall,
html.wmb-public-viewer #chat-bubble-container,
html.wmb-public-viewer #settings-section-notifications,
html.wmb-public-viewer #shortcut-row-toggle-messages,
html.wmb-public-viewer #shortcut-row-toggle-remote-access,
html.wmb-public-viewer #setting-share-viewer-location-group,
html.wmb-public-viewer #setting-show-other-viewer-locations-group,
html.wmb-public-viewer #archive-btn,
html.wmb-public-viewer #shortcut-row-open-archive,
html.wmb-public-viewer #opacity-control,
html.wmb-public-viewer #settings-item-show-site-marker,
html.wmb-public-viewer #toast-container,
html.wmb-public-viewer #btn-speed,
html.wmb-public-viewer #speed-slider-popup,
html.wmb-public-viewer .timeline-speed,
html.wmb-public-viewer .inspector-crosshair__h,
html.wmb-public-viewer .inspector-crosshair__v,
html.wmb-public-viewer .onboarding-cam-only,
html.wmb-public-viewer .onboarding-host-only {
  display: none !important;
}

/*
 * Palette selector relocated into the header (next to tilt) in embed mode.
 * The base CSS positions #palette-selector absolutely at the bottom-right of
 * the map. We reset it to flow inline inside .header-selectors and flip the
 * dropdown to open downward (since the button is now near the top).
 */
html.wmb-public-viewer #palette-selector {
  position: relative;
  inset: auto;
  bottom: auto;
  right: auto;
  align-self: center;
  z-index: auto;
}

html.wmb-public-viewer #palette-selector .palette-selector-btn {
  min-width: 180px;
  padding: 6px 10px;
  border-radius: 8px;
  /* No background override — inherit var(--bg-overlay) from the standalone
   * .palette-selector-btn rule so the button matches the other header
   * dropdowns and the desktop app. */
}

html.wmb-public-viewer #palette-selector .palette-dropdown {
  bottom: auto;
  top: calc(100% + 6px);
  right: 0;
  max-height: min(60vh, 420px);
}

@media (max-width: 780px) {
  html.wmb-public-viewer #palette-selector .palette-selector-btn {
    min-width: 160px;
  }
}

/*
 * Onboarding banner — embed-only cosmetic overhaul.
 * The base banner relied on broken `.btn--primary` class names that left the
 * Allow Access button transparent with white text. With the HTML corrected to
 * `.btn-primary`/`.btn-ghost`, the buttons render properly. The rules below
 * give the embed a cleaner card look distinct from the standalone Electron UI.
 */
html.wmb-public-viewer .onboarding-banner {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(11, 18, 32, 0.97));
  border-top: 1px solid rgba(96, 165, 250, 0.32);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.wmb-public-viewer .onboarding-banner__content {
  max-width: 760px;
  padding: 18px 24px;
}

/* The base rule sets each step container to a single flex row, which causes
 * the error/status panels to compete with the icon/text/buttons for width
 * (collapsing the title to a tall, narrow column). Wrap items so status and
 * error drop to their own row below the main controls. */
html.wmb-public-viewer .onboarding-banner__content > div {
  flex-wrap: wrap;
  gap: 12px 18px;
}

html.wmb-public-viewer .onboarding-banner__status,
html.wmb-public-viewer .onboarding-banner__error {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0;
}

html.wmb-public-viewer .onboarding-banner__text {
  min-width: 0; /* allow shrinking inside flex without forcing column wrap */
}

html.wmb-public-viewer .onboarding-banner__icons {
  gap: 0;
}

html.wmb-public-viewer .onboarding-banner__icon {
  color: #60a5fa;
  width: 30px;
  height: 30px;
}

html.wmb-public-viewer .onboarding-banner__text {
  gap: 4px;
}

html.wmb-public-viewer .onboarding-banner__text strong {
  color: #f1f5f9;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

html.wmb-public-viewer .onboarding-banner__text span {
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: 1.5;
}

html.wmb-public-viewer #onboarding-allow-btn {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.6);
  padding: 9px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.38);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

html.wmb-public-viewer #onboarding-allow-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

html.wmb-public-viewer #onboarding-allow-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(37, 99, 235, 0.4);
}

html.wmb-public-viewer #onboarding-allow-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

html.wmb-public-viewer #onboarding-retry-btn {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.4);
  padding: 9px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

html.wmb-public-viewer #onboarding-retry-btn:hover {
  background: rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}

html.wmb-public-viewer .onboarding-banner__status {
  color: #93c5fd;
  font-size: 0.8rem;
  padding: 6px 0 0;
}

html.wmb-public-viewer .onboarding-banner__error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 6px;
  color: #fecaca;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 10px;
  padding: 8px 12px;
}

html.wmb-public-viewer .onboarding-banner__dismiss {
  color: rgba(148, 163, 184, 0.72);
  font-size: 0.78rem;
  margin-top: 10px;
}

html.wmb-public-viewer .onboarding-banner__dismiss:hover {
  color: #cbd5e1;
}

@media (max-width: 599px) {
  html.wmb-public-viewer .onboarding-banner__content {
    padding: 14px 16px;
  }

  html.wmb-public-viewer .onboarding-banner__icon {
    width: 26px;
    height: 26px;
  }

  html.wmb-public-viewer .onboarding-banner__text strong {
    font-size: 0.94rem;
  }

  html.wmb-public-viewer .onboarding-banner__text span {
    font-size: 0.82rem;
  }

  html.wmb-public-viewer #onboarding-allow-btn,
  html.wmb-public-viewer #onboarding-retry-btn {
    padding: 11px 18px;
    width: 100%;
  }
}