/* Sprint 11.1 — Toolbar overflow menu (mobile) */

/* "More" trigger button — hidden on desktop, shown on mobile */
.uv-toolbar-more-btn {
  display: none;
}

@media (max-width: 640px) {
  .uv-toolbar {
    /* No horizontal overflow; gap tightened */
    flex-wrap: nowrap !important;
    overflow: hidden;
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  .uv-toolbar__brand { display: none !important; }
  .uv-toolbar__status { display: none !important; }

  /* Buttons marked .uv-toolbar-btn--collapse hide into the More menu */
  .uv-toolbar-btn.uv-toolbar-btn--collapse { display: none !important; }

  /* Labels collapse, leaving icon-only */
  .uv-toolbar .uv-toolbar-btn__label { display: none !important; }

  /* Sprint 15 (Bug 2): the toolbar children summed wider than a 390px viewport,
     clipping the "More" menu — the only path to Preview/Share/QR/Download on
     mobile. Drop the two widest items from the TOP toolbar; both are duplicated
     in the bottom floatbar so nothing is lost. */

  /* 1. Hide the draft publish CTA ("Get it live — $4.99") in the top toolbar.
        Scoped to .uv-toolbar so the floatbar's own #uvGoLiveFloat is untouched. */
  body.uv-mode-draft .uv-toolbar .uv-btn--publish { display: none !important; }

  /* 2. Hide the autosave status pill (incl. its "Sign in to sync" button). It's
        purely informational and not part of the critical button row. */
  .uv-toolbar .uv-autosave-pill { display: none !important; }

  /* Sprint 17 (S17-F): hide "Make an edit, then Save." save-hint copy on
     mobile — it overflows the toolbar at 390px and the Save button itself
     already implies the action. */
  .uv-toolbar .uv-save-hint { display: none !important; }

  /* Essential buttons must never shrink/clip off-screen */
  .uv-toolbar .uv-toolbar-btn,
  .uv-toolbar .uv-btn,
  .uv-toolbar-more-btn { flex-shrink: 0 !important; }

  /* Show the More button — always fits at the right edge */
  .uv-toolbar-more-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #f4f8fc;
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease;
  }
  .uv-toolbar-more-btn:hover,
  .uv-toolbar-more-btn:focus-visible {
    background: rgba(255,255,255,0.10);
    outline: none;
  }
  .uv-toolbar-more-btn[aria-expanded="true"] {
    background: rgba(255,255,255,0.16);
  }
}

/* More menu popover */
.uv-toolbar-more-menu {
  position: fixed;
  top: 56px;
  right: 8px;
  background: rgba(28, 34, 42, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 2147483600;
  min-width: 200px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f4f8fc;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms var(--uv-ease-out, ease-out),
              transform 160ms var(--uv-ease-out, ease-out);
}
.uv-toolbar-more-menu[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.uv-toolbar-more-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.uv-toolbar-more-menu__item:hover,
.uv-toolbar-more-menu__item:focus-visible {
  background: rgba(255,255,255,0.10);
  outline: none;
}
.uv-toolbar-more-menu__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Backdrop to capture outside clicks */
.uv-toolbar-more-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 2147483599;
}

@media (prefers-reduced-motion: reduce) {
  .uv-toolbar-more-menu { transition: none; }
}