/* Image-family tools — mobile compact (≤767px). Converter, compressor, OCR, eyedropper, BG remover, resizer/crop. */

.ic-page,
.ico-page,
.ocr-page,
.dropper,
.bgr-page,
.irs-page,
.tool-page.ic-page,
.tool-page.ico-page {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.dropper-board,
.ocr-board,
.bgr-tool,
.irs-workspace,
.cp-layout-top,
.cp-content {
  max-width: 100%;
  min-width: 0;
}

/* ── Single-row compact action bars ── */
.img-mob-actions,
.dropper-upload__actions,
.ocr-upload__actions,
.bgr-queue__actions,
.cp-address-actions,
.cp-manage-row:not(.temail-action-grid),
.cp-btn-row,
.cp-actions,
.cp-footer-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: unset !important;
}

.img-mob-actions > .btn,
.img-mob-actions > .cp-btn,
.dropper-upload__actions > .btn,
.ocr-upload__actions > .btn,
.bgr-queue__actions > .bgr-download-all-btn,
.bgr-queue__actions > .bgr-clear-btn,
.cp-address-actions > .btn,
.cp-manage-row:not(.temail-action-grid) > .btn,
.cp-manage-row:not(.temail-action-grid) > .cp-btn,
.cp-btn-row > .btn,
.cp-btn-row > .cp-btn,
.cp-btn-row > .cp-btn-outline,
.cp-actions > .btn,
.cp-actions > .cp-btn,
.cp-footer-actions > .btn,
.cp-footer-actions > .cp-btn-outline {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 0 6px !important;
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  grid-column: unset !important;
}

.irs-editor__actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
}

.irs-editor__actions .btn,
.irs-toolbar__btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 34px !important;
  font-size: 0.68rem !important;
  padding: 0 4px !important;
}

.irs-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Eyedropper ── */
.dropper-upload {
  padding: 14px 10px 12px;
  border-radius: 10px;
  max-width: 100%;
  box-sizing: border-box;
}

.dropper-upload__title {
  font-size: 0.92rem;
}

.dropper-upload__hint {
  white-space: normal !important;
  height: auto !important;
  min-height: 0;
  margin-bottom: 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
}

.dropper-board.has-image .dropper-upload {
  padding: 8px 10px;
}

.dropper-board.has-image .dropper-upload__icon,
.dropper-board.has-image .dropper-upload__title {
  display: none;
}

.dropper-board.has-image .dropper-upload__hint {
  display: none;
}

.dropper-panel {
  padding: 10px;
  border-radius: 10px;
}

.dropper-active__hex {
  font-size: 0.88rem;
  word-break: break-all;
}

.dropper-active__note {
  font-size: 0.72rem;
}

.dropper-codes {
  gap: 5px;
}

.dropper-code {
  padding: 6px 8px;
}

.dropper-code__val {
  font-size: 0.68rem;
}

.dropper-image {
  min-height: 160px;
  border-radius: 10px;
}

/* ── OCR ── */
.ocr-upload {
  padding: 16px 10px 14px;
  border-radius: 10px;
}

.ocr-upload__title {
  font-size: 0.95rem;
}

.ocr-upload__hint {
  white-space: normal !important;
  height: auto !important;
  margin-bottom: 10px;
  font-size: 0.72rem;
  overflow: visible;
}

.ocr-upload__actions .btn {
  min-width: 0 !important;
}

.ocr-result__actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.ocr-result__actions .btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 34px !important;
  font-size: 0.68rem !important;
}

/* ── Background remover ── */
.bgr-tool {
  padding: 12px 10px;
  gap: 12px;
  border-radius: 12px;
}

.bgr-upload {
  min-height: 180px;
  padding: 16px 10px;
}

.bgr-hero {
  margin-bottom: 20px;
}

.bgr-hero h1 {
  font-size: clamp(1.35rem, 5.5vw, 1.65rem);
}

.bgr-queue__head {
  flex-wrap: wrap;
  gap: 6px;
}

.bgr-row {
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

/* ── Resizer / crop ── */
.irs-page {
  padding: 12px 0 28px;
}

.irs-hero {
  gap: 14px;
  margin-bottom: 18px;
}

.irs-hero h1 {
  font-size: clamp(1.35rem, 5.5vw, 1.65rem);
}

.irs-workspace {
  gap: 10px;
}

/* ── Converter / compressor (cp-*) ── */
.cp-upload-box {
  max-width: 100%;
  box-sizing: border-box;
}

.ic-page .cp-upload-box {
  min-height: 0 !important;
}

.cp-row-output {
  min-width: 0 !important;
  margin-right: 0 !important;
}

.cp-row-output .ui-select {
  min-width: 0 !important;
  max-width: 100%;
}

.ui-select,
.ui-select__trigger {
  max-width: 100%;
  min-width: 0;
}

.ui-select__panel,
.ui-select--sm .ui-select__panel {
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box;
}

.ic-links-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.ic-seo-link {
  font-size: 0.68rem !important;
  padding: 8px 6px !important;
  text-align: center;
  min-width: 0;
}

.cp-convert-action .cp-btn-large {
  width: 100%;
  min-height: 40px;
  font-size: 0.82rem;
}

@media (max-width: 360px) {
  .dropper-upload__actions > .btn,
  .ocr-upload__actions > .btn {
    font-size: 0.62rem !important;
    padding: 0 4px !important;
  }
}