/* ============================================================
   public/css/editor-mobile-patch.css
   Thêm vào cuối editor.css HOẶC nhúng riêng sau editor.css
   ============================================================ */

/* ── Editor bottom drawer (sidebar mobile) ────────────────── */
@media (max-width: 768px) {
  .ep-right {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Pull indicator */
    border-top: 4px solid var(--bo);
  }

  /* Drag handle cho sidebar */
  .ep-right-head::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: -6px auto 10px;
  }

  /* 2-col layout cho controls */
  .ep-right-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    align-items: start;
  }

  /* Export section full width */
  .ep-sec:last-child { grid-column: 1/-1; }
  #frameInfoBox      { grid-column: 1/-1; }
  #epPbSec           { grid-column: 1/-1; }

  /* Section borders */
  .ep-sec { margin-bottom: 12px; padding-bottom: 12px; }

  /* Slider labels shorter */
  .ep-srow label { min-width: 46px; font-size: .7rem; }
  .ep-srow .sv   { min-width: 26px; font-size: .68rem; text-align: right; }

  /* Export button */
  .ep-export-btn { font-size: .84rem; padding: 12px; }
}

@media (max-width: 480px) {
  /* Single column on tiny screens */
  .ep-right-body { grid-template-columns: 1fr; }
  .ep-canvas-box canvas { max-height: 65vw; }

  /* Toolbar compact */
  .ep-tbtn { padding: 7px 10px; font-size: .74rem; }
}

/* ── Canvas info bar ──────────────────────────────────────── */
@media (max-width: 640px) {
  .ep-info {
    font-size: .68rem;
    padding: 5px 10px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Photobooth slots mobile ──────────────────────────────── */
@media (max-width: 768px) {
  .pb-slot-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pb-slot-item { padding: 6px; }
  .pb-slot-btn  { font-size: .72rem; padding: 5px 8px; }
  .pb-slot-thumb { width: 36px; height: 36px; }
}

/* ── Frame meta box mobile ────────────────────────────────── */
@media (max-width: 768px) {
  .frame-meta-box {
    padding: 10px;
    gap: 8px;
  }
  .frame-meta-box img { width: 40px; height: 40px; }
  .frame-meta-box .fi-name { font-size: .8rem; }
  .frame-meta-box .fi-stats { font-size: .7rem; gap: 6px; }
}

/* ── Tool section mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  #toolSection { padding: 20px 16px 40px; }
  .tool-hd { gap: 10px; margin-bottom: 20px; padding-bottom: 14px; }
  .tool-hd h2 { font-size: 1.1rem; }
  .tupz { padding: 32px 16px; }
  .tzi  { font-size: 2.4rem; }
}

/* ── Upload dropzone touch feedback ──────────────────────── */
.ep-ubtn:active,
.upload-dropzone:active,
.tupz:active {
  opacity: .8;
  transform: scale(.98);
}