/* Unified copy button presentation for every workflow table. */
:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-copyable-cell, .copyableCell, .collector-copyable-cell) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  justify-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-copyable-cell, .copyableCell, .collector-copyable-cell)::before {
  display: none !important;
  content: none !important;
}

:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-copyable-cell, .copyableCell, .collector-copyable-cell)
  > :not(:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button)) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #737a75 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  transition:
    opacity 0.12s ease,
    background-color 0.12s ease,
    color 0.12s ease !important;
}

:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button) svg {
  width: 13px !important;
  height: 13px !important;
}

:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(
  .erp-copyable-cell:hover,
  .copyableCell:hover,
  .collector-copyable-cell:hover,
  .image-thumb-wrap:hover,
  .image-thumb-actions:hover,
  .optimized-thumb-wrap:hover,
  .optimized-thumb-actions:hover
)
:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button),
:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button):hover,
:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button):focus-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(63, 107, 87, 0.1) !important;
  color: #355a49 !important;
}

:is(
  body.erp-app,
  body.copywriting-app,
  body.api-app,
  body.templates-app,
  body.source-inbox-frame-page
)
:is(.erp-cell-copy-button, .cellCopyButton, .collector-copy-button):focus-visible {
  outline: 2px solid rgba(63, 107, 87, 0.22) !important;
  outline-offset: 1px !important;
}

/* Keep the source-inbox collector table aligned with every other workflow. */
body.source-inbox-frame-page #collectorResultTable
  td > .collector-copyable-cell
  > .collector-copy-button {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  right: auto !important;
  opacity: 0 !important;
  transform: none !important;
}

body.source-inbox-frame-page #collectorResultTable
  td:hover
  > .collector-copyable-cell
  > .collector-copy-button,
body.source-inbox-frame-page #collectorResultTable
  td
  .collector-copyable-cell:hover
  .collector-copy-button {
  opacity: 1 !important;
  transform: none !important;
}