.global-top-actions {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 10px;
  --qq-accent: #7045e8;
}

.global-top-actions .qq-group-entry {
  display: inline-flex;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #e6ddfb;
  border-radius: 9px;
  color: var(--qq-accent);
  background: #faf8ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.global-top-actions .qq-group-entry:hover,
.global-top-actions .qq-group-entry[aria-expanded="true"] {
  border-color: #cfc0f6;
  background: #f0eaff;
}

.qq-group-entry svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qq-group-short-label { display: none; }

.qq-group-popover {
  position: fixed;
  inset: auto;
  z-index: 2200;
  box-sizing: border-box;
  width: 264px;
  margin: 0;
  padding: 20px;
  overflow: auto;
  border: 1px solid #ece6f8;
  border-radius: 14px;
  color: #211b35;
  background: #fff;
  box-shadow: 0 12px 36px rgb(42 25 80 / 14%);
  text-align: center;
}

.qq-group-popover[hidden], .qq-group-toast[hidden] { display: none; }
.qq-group-popover h2 { margin: 0; font-size: 16px; line-height: 1.5; }
.qq-group-popover p { margin: 7px 0 18px; color: #746c86; font-size: 12px; line-height: 1.6; }
.qq-group-number-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border-radius: 9px; background: #f6f2ff; text-align: left; }
.qq-group-number-row small { display: block; margin-bottom: 3px; color: #837699; font-size: 10px; }
.qq-group-number-row strong { color: #6450db; font-size: 18px; font-weight: 650; letter-spacing: .02em; user-select: all; }
.qq-group-popover button { font-family: inherit; cursor: pointer; }
.qq-group-copy { flex: none; min-height: 34px; padding: 0 4px; border: 0; color: #7045e8; background: transparent; font-size: 12px; }
.qq-group-copy:hover { color: #5129bd; }
.qq-group-copy-primary { width: 100%; height: 38px; padding: 0 12px; border: 1px solid #7045e8; border-radius: 8px; color: #fff; background: #7045e8; font-size: 13px; font-weight: 600; }
.qq-group-copy-primary:hover { background: #6136d6; }
.qq-group-popover .qq-group-help { margin: 12px 0 0; font-size: 11px; }
.qq-group-clipboard { position: fixed; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; }
.qq-group-toast { position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; z-index: 3000; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 11px 16px; border: 1px solid #e6ddfb; border-radius: 10px; color: #584180; background: #fff; box-shadow: 0 8px 28px rgb(42 25 80 / 12%); font-size: 13px; line-height: 1.5; transform: translateX(-50%); pointer-events: none; }

/* Reserve only existing header space. The workspaces and composers keep their dimensions. */
@media (min-width: 769px) {
  .has-global-top-actions { --global-action-space: 170px; }
  .has-global-top-actions :is(.image-topbar, .agent-topbar, .topbar.clean, .tryon-topbar, .assets-header, .inspiration-header, .commercial-dashboard-header) {
    padding-right: var(--global-action-space);
  }
  .has-global-top-actions .video-player-heading { padding-right: 144px; }
  .has-global-top-actions .style-replication-workbench.without-results .style-page-heading,
  .has-global-top-actions .style-results-heading { padding-right: 144px; }
}

@media (max-width: 1180px) and (min-width: 769px) {
  .has-global-top-actions { --global-action-space: 114px; }
  .qq-group-label { display: none; }
  .qq-group-short-label { display: inline; }
  .has-global-top-actions .video-player-heading,
  .has-global-top-actions .style-replication-workbench.without-results .style-page-heading,
  .has-global-top-actions .style-results-heading { padding-right: 92px; }
  /* The film preview keeps its own toolbar in the narrow three-column layout. */
  .has-global-top-actions .video-player-heading { padding-top: 44px; padding-right: 0; }
}

@media (max-width: 768px) {
  .mobile-app-header .global-top-actions { position: static; flex: none; }
  .global-top-actions .qq-group-entry { height: 34px; padding-inline: 8px; font-size: 12px; }
  .qq-group-label { display: none; }
  .qq-group-short-label { display: inline; }
}

@media (max-width: 360px) {
  .global-top-actions .qq-group-entry { width: 34px; padding: 0; }
  .qq-group-short-label { display: none; }
}