.filter-ai-edit-media-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.filter-ai-edit-media-header button {
  position: static !important;
}

.filter-ai-button button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  padding: 1px !important;
  text-align: center;
  border: 0;
  transition:
    color 0.1s ease-in-out,
    background 0.1s ease-in-out;

  & img {
    max-width: 14px;
    width: auto;
    height: 100%;
  }
}

.filter-ai-edit-media-header .filter-ai-button button,
.filter-ai-media-frame-title .filter-ai-button button {
  width: 50px;
  height: 50px;
  border-left: 1px solid #dcdcde;

  &:hover,
  &:focus {
    background: #dcdcde;
    border-color: #c3c4c7;
    color: #000;
    outline: 0;
    box-shadow: none;
  }
}

.filter-ai-media-frame-title .filter-ai-button {
  position: absolute;
  right: 52px;
  top: 0;
}

.filter-ai-media-frame-title .filter-ai-button button {
  border-right: 1px solid #dcdcde;
  border-radius: 0;
}

@media only screen and (max-width: 900px) {
  .filter-ai-media-frame-title .filter-ai-button {
    right: 44px;
  }

  .filter-ai-media-frame-title .filter-ai-button button {
    width: 40px;
    height: 40px;
    border-left: 0;
    border-right: 0;
  }
}

@media only screen and (max-width: 480px) {
  .filter-ai-edit-media-header .filter-ai-button button {
    width: 40px;
    height: 40px;
  }
}

.edit-attachment-frame .media-frame-title.filter-ai-media-frame-title {
  right: 204px;
}

@media only screen and (max-width: 480px) {
  .edit-attachment-frame .media-frame-title.filter-ai-media-frame-title {
    right: 164px;
  }
}

/* Filter AI icon in the block inspector's card header, right-aligned on the
   block-name (title) row — mirrors the post-level F icon placement.
   align-self: flex-start keeps the icon aligned with the title even when the
   card is a flat flex-row (WP 6.7) where the text column is taller than one
   line. On WP 7.0 the button is injected into the card's title HStack and
   flex-start is equally correct there. */
.block-editor-block-inspector .block-editor-block-card .filter-ai-block-inspector-button {
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
}

.filter-ai-components-popover {
  box-sizing: border-box;
  will-change: transform;
  z-index: 1000000;
}

/* Gutenberg's DropdownMenu auto-focuses its first item on open, and WordPress
   draws the focus ring on :focus — which fires for mouse opens too, leaving a
   persistent blue ring on the first item (and on the first item of submenus
   like Change Tone). Suppress the ring only when focus is NOT keyboard-driven
   (:not(:focus-visible)), so keyboard users still get a visible focus
   indicator. Scoped to Filter AI's own popovers so other plugins' menus are
   untouched. */
.filter-ai-components-popover .components-menu-item__button:focus:not(:focus-visible),
.filter-ai-components-popover .components-button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

.media-modal > #filter-ai-media-modal-container {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 51px;
  border: 1px solid transparent;
  width: 50px;
  height: 50px;

  & .filter-ai-button,
  & .filter-ai-button > button {
    width: 100%;
    height: 100%;
  }
}

#filter-ai-yst-seo-title-button,
#filter-ai-yst-seo-meta-desc-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#minor-publishing #filter-ai-post-toolbar-container {
  padding: 10px 10px 0;
}
