/**
 * gcc-mobile-studio.css — Bàn thiết kế trên điện thoại.
 *
 * Mọi luật đều nằm sau `body.gcc-ms` VÀ dải màn hình hẹp. Máy tính không nhận
 * một dòng nào từ tệp này — thanh bên, hội thoại, hai cột giữ nguyên.
 */

@media (max-width: 900px) {

  /* ══════════════════════════════════════════════════════════════════════
   * BỎ HỘI THOẠI, LẤY THIỆP LÀM MẶT LÀM VIỆC
   * ══════════════════════════════════════════════════════════════════════ */
  body.gcc-ms .gcc-col--form { display: none !important; }

  body.gcc-ms .gcc-page-wrap,
  body.gcc-ms .gcc-creator-wrap,
  body.gcc-ms .gcc-tab-content,
  body.gcc-ms .gcc-two-col { height: 100%; }

  body.gcc-ms {
    /* Khoá cuộn trang: canvas và thanh công cụ là một màn hình cố định, cuộn
       cả trang sẽ kéo thanh công cụ ra khỏi tầm với ngón cái. */
    overflow: hidden;
    height: 100dvh;
  }

  body.gcc-ms .gcc-page-wrap { padding-left: 0 !important; }

  body.gcc-ms .gcc-two-col {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
    /* Đếm đệm vào chiều cao. Không có dòng này thì `height: 100dvh` là chiều
       cao PHẦN NỘI DUNG, cộng thêm 84 + 72 đệm thành 968px trên màn 812 — cột
       xem trước nhận trọn 812px ấy nhưng bắt đầu từ y=84, nên 156px cuối nằm
       dưới đáy màn và thẻ căn giữa theo cột bị thanh công cụ cắt mất chân. */
    box-sizing: border-box;
    /* Chừa chỗ cho vỏ: thanh trên 52 + hàng tiện ích 32 + thanh công cụ 72 +
       vùng an toàn. */
    padding-top: 84px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    height: 100dvh;
  }

  body.gcc-ms .gcc-two-col > .gcc-col--preview {
    order: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    /* Đếm cả khoảng đệm vào 100%: thiếu dòng này thì cột rộng 100% CỘNG thêm
       24px đệm, tức 399px trên màn 375 — cột thò ra ngoài mép phải, và thẻ căn
       giữa theo cột nên lệch phải đúng một nửa phần thò ra. Đo được: thẻ cách
       trái 35px, cách phải 11px. */
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 10px 12px;
    /* Gỡ nốt phần "dính theo màn hình" của bố cục hai cột: trên máy tính cột
       này là sticky top:16px, xuống điện thoại nó rơi về relative nhưng `top`
       vẫn còn hiệu lực nên cả cột bị đẩy xuống 16px — đo được cột thiệp cưới
       bắt đầu ở y=100 trong khi cột thiệp thường ở y=84. */
    position: static;
    top: auto;
  }

  /* Khung xem trước trên điện thoại vốn là một lightbox bật ra. Ở bàn thiết
     kế nó là mặt làm việc thường trực, nên gỡ hẳn lớp bật/tắt ấy. */
  body.gcc-ms .gcc-preview-toggle { display: flex !important; }
  body.gcc-ms .gcc-preview-toggle__btn,
  body.gcc-ms .gcc-preview-toggle__hint,
  body.gcc-ms .gcc-pv-actions,
  body.gcc-ms .gcc-pv-reopen { display: none !important; }
  body.gcc-ms .gcc-preview-toggle__panel {
    display: flex !important;
    max-height: none;
    height: 100%;
  }

  body.gcc-ms .gcc-preview-card,
  body.gcc-ms .gcc-preview-wedding-card {
    max-height: calc(100dvh - 200px);
  }

  /* Vùng đang chọn — viền vàng mảnh, không đổi bố cục bên trong thiệp. */
  body.gcc-ms .gcc-ms-sang {
    outline: 2px solid var(--gcc-ink-strong, #f4f4f4);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* ══════════════════════════════════════════════════════════════════════
   * VỎ
   * ══════════════════════════════════════════════════════════════════════ */
  .gcc-ms-vo { display: none; }
  body.gcc-ms .gcc-ms-vo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;   /* chỉ các thanh con nhận chạm */
    font-family: inherit;
  }
  body.gcc-ms .gcc-ms-vo > * { pointer-events: auto; }

  /* ── Thanh trên ─────────────────────────────────────────────────────── */
  .gcc-ms-dinh {
    position: absolute; top: 0; left: 0; right: 0; height: 52px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px;
    background: var(--gcc-surface-1, #121212);
    border-bottom: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ms-menu {
    width: 38px; height: 38px; border-radius: 10px;
    border: 0; background: transparent; color: var(--gcc-ink, #e8e8e8);
    display: grid; place-items: center;
  }
  .gcc-ms-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .gcc-ms-tieu {
    flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
    color: var(--gcc-ink, #e8e8e8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gcc-ms-tao {
    height: 34px; padding: 0 15px; border-radius: 999px; border: 0;
    background: var(--gcc-btn-primary-bg, #e4e4e4); color: var(--gcc-btn-primary-text, #141414);
    font-size: 13.5px; font-weight: 700;
  }
  .gcc-ms-tao[disabled] { opacity: .6; }

  /* ── Hàng tiện ích mượn từ khung hội thoại ──────────────────────────── */
  .gcc-ms-trang {
    position: absolute; top: 52px; left: 0; right: 0;
    display: flex; align-items: center; gap: 8px;
    padding-right: 10px;
    /* Nền TỐI HƠN thanh tiêu đề một bậc. Cùng màu thì hai dải dính thành một
       khối cao 84px và không rõ đâu là tiêu đề, đâu là hàng tiện ích — đường
       kẻ 1px thôi chưa đủ tách khi hai bên cùng nền. */
    background: var(--gcc-surface, #141414);
    border-bottom: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ms-trang .gcc-ubar {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 12px; font-size: 11.5px;
  }
  /* Bước và nút lùi thuộc về lối hỏi tuần tự đã bỏ: ở bàn thiết kế mọi vùng
     đều chạm tới được bất cứ lúc nào nên không có bước nào để đếm hay để lùi.
     Nút mở lại khung xem trước cũng thừa — thiệp luôn nằm trên màn. */
  .gcc-ms-trang .gcc-chat-progress,
  .gcc-ms-trang .gcc-chat-btn.ghost,
  .gcc-ms-trang .gcc-pv-btn { display: none; }

  /* ── Chọn loại thiệp trong khay ─────────────────────────────────────── */
  .gcc-ms-loai {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
    padding: 14px; margin-bottom: 10px; text-align: left;
    border-radius: 12px; border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8);
    font: inherit;
  }
  .gcc-ms-loai.dang {
    border-color: var(--gcc-ink-strong, #f4f4f4);
    background: color-mix(in srgb, var(--gcc-ink-strong, #f4f4f4) 14%, transparent);
  }
  .gcc-ms-loai b { font-size: 15px; }
  .gcc-ms-loai span { font-size: 12.5px; color: var(--gcc-ink-muted, #9a9a9a); line-height: 1.45; }

  /* ── Danh sách bước và giao diện một bước trong khay ────────────────── */
  .gcc-ms-nhom {
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gcc-ink-muted, #9a9a9a);
    padding: 14px 2px 6px;
  }
  .gcc-ms-nhom:first-child { padding-top: 2px; }
  .gcc-ms-viec {
    display: flex; flex-direction: column; gap: 3px; width: 100%;
    padding: 12px 13px; margin-bottom: 6px; text-align: left;
    border-radius: 11px; border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8);
    font: inherit;
  }
  .gcc-ms-viec b { font-size: 14px; display: flex; align-items: center; gap: 7px; }
  /* Chấm PRO: báo trước, không khoá. Dòng vẫn bấm được như mọi dòng khác. */
  .gcc-ms-pro {
    font-style: normal;
    padding: 2px 6px; border-radius: 5px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
    background: color-mix(in srgb, var(--gcc-ink-strong, #f4f4f4) 16%, transparent);
    color: var(--gcc-ink, #e8e8e8);
  }
  .gcc-ms-viec span {
    font-size: 12px; color: var(--gcc-ink-muted, #9a9a9a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gcc-ms-hoi { margin: 10px 2px 12px; font-size: 13px; line-height: 1.55; color: var(--gcc-ink, #e8e8e8); }

  /* Ô nhập do máy hội thoại vẽ: nó vốn nằm trong khung chat nền sáng, sang khay
     tối phải kéo lại nền và màu chữ. Cùng lý do với cột node bên máy tính. */
  .gcc-ms-buoc .gcc-chat-input-row { display: flex; gap: 8px; align-items: flex-start; }
  .gcc-ms-buoc input,
  .gcc-ms-buoc textarea {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323);
    color: var(--gcc-ink, #e8e8e8);
    font: inherit; font-size: 15px; line-height: 1.5;   /* 15px: dưới mức này iOS tự phóng to trang khi gõ */
  }
  .gcc-ms-buoc textarea { min-height: 84px; resize: vertical; }
  .gcc-ms-buoc .gcc-chat-btn {
    flex: 0 0 auto; height: 38px; padding: 0 16px;
    border: 0; border-radius: 10px;
    background: var(--gcc-btn-primary-bg, #e4e4e4);
    color: var(--gcc-btn-primary-text, #141414);
    font: inherit; font-size: 13.5px; font-weight: 700;
  }
  .gcc-ms-buoc .gcc-chat-btn.secondary,
  .gcc-ms-buoc .gcc-chat-btn.ghost {
    background: var(--gcc-surface-3, #3d3d3d); color: var(--gcc-ink, #e8e8e8);
  }
  .gcc-ms-buoc .gcc-chat-choices { display: grid; gap: 8px; }
  .gcc-ms-buoc .gcc-chat-choice {
    display: flex; flex-direction: column; gap: 3px;
    padding: 13px; text-align: left;
    border-radius: 11px; border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8); font: inherit;
  }
  .gcc-ms-buoc .gcc-chat-choice.selected {
    border-color: var(--gcc-ink-strong, #f4f4f4);
    background: color-mix(in srgb, var(--gcc-ink-strong, #f4f4f4) 14%, transparent);
  }
  .gcc-ms-buoc .gcc-chat-choice-label { font-size: 14px; font-weight: 600; }
  .gcc-ms-buoc .gcc-chat-choice-desc { font-size: 12px; color: var(--gcc-ink-muted, #9a9a9a); }
  .gcc-ms-buoc .gcc-chat-actions-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

  /* ── Thanh ngữ cảnh ─────────────────────────────────────────────────── */
  .gcc-ms-ngu {
    position: absolute; left: 0; right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 7px;
    padding: 0 10px;
    background: var(--gcc-surface-1, #121212);
    border-top: 1px solid var(--gcc-line, #2b2f39);
    overflow-x: auto; scrollbar-width: none;
    height: 0; opacity: 0;
    transition: height .18s ease, opacity .15s ease;
  }
  .gcc-ms-ngu::-webkit-scrollbar { display: none; }
  .gcc-ms-ngu.hien { height: 48px; opacity: 1; }
  .gcc-ms-quay {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: 0;
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8); font-size: 17px;
  }
  .gcc-ms-nhan {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 700;
    color: var(--gcc-ink-strong, #f4f4f4); padding-right: 2px;
  }
  .gcc-ms-chip {
    flex: 0 0 auto; height: 32px; padding: 0 13px; border-radius: 999px;
    background: var(--gcc-surface-2, #232323); border: 1px solid transparent;
    color: var(--gcc-ink, #e8e8e8); font-size: 13px; white-space: nowrap;
  }
  .gcc-ms-chip.phu { background: transparent; border-color: var(--gcc-line, #2b2f39); color: var(--gcc-ink-muted, #9a9a9a); }

  /* ── Thanh công cụ gốc ──────────────────────────────────────────────── */
  .gcc-ms-rail {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; align-items: center;
    background: var(--gcc-surface-1, #121212);
    border-top: 1px solid var(--gcc-line, #2b2f39);
    overflow-x: auto; scrollbar-width: none;
  }
  .gcc-ms-rail::-webkit-scrollbar { display: none; }
  .gcc-ms-cc {
    flex: 0 0 auto; width: 72px; height: 72px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: none; border: 0; color: var(--gcc-ink, #e8e8e8);
  }
  .gcc-ms-cc svg {
    width: 23px; height: 23px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .gcc-ms-cc span { font-size: 11px; color: var(--gcc-ink-muted, #9a9a9a); }
  .gcc-ms-cc.on { color: var(--gcc-ink-strong, #f4f4f4); }
  .gcc-ms-cc.on span { color: var(--gcc-ink-strong, #f4f4f4); }

  /* ── Khay trượt lên ─────────────────────────────────────────────────── */
  .gcc-ms-man {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none !important; transition: opacity .2s ease;
  }
  .gcc-ms-man.mo { opacity: 1; pointer-events: auto !important; }

  .gcc-ms-khay {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--gcc-surface-1, #121212);
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--gcc-line, #2b2f39);
    /* Cao NHIỀU NHẤT 58%: thiệp phải còn thấy được trong lúc chọn, đó là toàn
       bộ lý do dùng khay thay vì hộp thoại toàn màn hình. */
    max-height: 58dvh;
    display: flex; flex-direction: column;
    transform: translateY(101%);
    transition: transform .26s cubic-bezier(.22,.9,.3,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gcc-ms-khay.mo { transform: none; }
  .gcc-ms-tay {
    width: 38px; height: 4px; border-radius: 999px;
    background: var(--gcc-line, #2b2f39); margin: 8px auto 4px; flex: 0 0 auto;
  }
  .gcc-ms-khay-dau {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 10px; flex: 0 0 auto;
    border-bottom: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ms-khay-dau b { flex: 1; font-size: 14.5px; color: var(--gcc-ink, #e8e8e8); }
  .gcc-ms-dong {
    width: 32px; height: 32px; border-radius: 9px; border: 0;
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8); font-size: 15px;
  }
  .gcc-ms-xong {
    height: 32px; padding: 0 14px; border-radius: 999px; border: 0;
    background: var(--gcc-btn-primary-bg, #e4e4e4); color: var(--gcc-btn-primary-text, #141414); font-size: 13px; font-weight: 700;
  }
  .gcc-ms-than {
    overflow-y: auto; scrollbar-width: none;
    padding: 10px 12px 16px; min-height: 120px;
  }
  .gcc-ms-than::-webkit-scrollbar { display: none; }
  .gcc-ms-trong { color: var(--gcc-ink-muted, #9a9a9a); font-size: 13px; margin: 18px 0; text-align: center; }

  /* Bộ chọn được MƯỢN vào khay: bỏ giới hạn chiều cao riêng của nó, để khay
     quyết định — nếu không sẽ có hai lớp cuộn lồng nhau. */
  .gcc-ms-than .gcc-mp-box,
  .gcc-ms-than .gcc-modal--inline,
  .gcc-ms-than .gcc-stk-panel {
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ── Thanh bên: trượt vào khi bấm nút menu ──────────────────────────── */
  body.gcc-ms .gcc-sidebar {
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.22,.9,.3,1);
    z-index: 60;
  }
  body.gcc-ms.gcc-sb-mo .gcc-sidebar { transform: none; }

  /* ── Báo lỗi ────────────────────────────────────────────────────────── */
  .gcc-ms-loi {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    background: #4a1d1d; color: #ffdede;
    border: 1px solid #7a3030; border-radius: 10px;
    padding: 11px 14px; font-size: 13px; line-height: 1.45;
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .gcc-ms-loi.hien { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .gcc-ms-khay, .gcc-ms-ngu, .gcc-sidebar, .gcc-ms-loi { transition: none; }
  }
}

/* Lightbox xem trước không còn vai trò gì khi thiệp đã nằm ngoài. */
@media (max-width: 900px) {
  body.gcc-ms .gcc-preview-lightbox { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * DỌN NHỮNG THỨ CỦA BỐ CỤC CŨ CÒN SÓT
 * ══════════════════════════════════════════════════════════════════════════
 * Dải "PREVIEW" và hàng tiện ích là nhãn của khung xem trước kiểu cũ — ở bàn
 * thiết kế, cả màn hình ĐÃ là khung xem trước nên nhãn ấy chỉ chiếm chỗ và
 * đẩy thiệp lên lệch. Đo được: nó nằm ở y = 737px, ngay trên thanh công cụ. */
@media (max-width: 900px) {
  body.gcc-ms .gcc-pv-bar,
  body.gcc-ms .gcc-pv-label { display: none !important; }

  /* Thiệp thường không được rộng hơn màn hình. Bố cục của nó co theo bề rộng
     (cqw) nên kẹp trần là đủ, không sinh hệ luỵ. */
  body.gcc-ms .gcc-preview-card {
    max-width: calc(100vw - 24px) !important;
  }

  /* THIỆP CƯỚI THÌ KHÔNG KẸP — và đây là chỗ đã sai.
   * Thiệp cưới dựng ở ĐÚNG bề rộng của trang người nhận (848px khổ ngang) rồi
   * mới `transform: scale()` cho vừa màn; hệ số thu tính theo 848. Kẹp trần
   * 351px làm thẻ co lại TRƯỚC khi thu, nên nó bị thu hai lần: 351 × 0.41 =
   * 145px — tấm thiệp bé bằng nửa lòng bàn tay giữa một khoảng xám mênh mông.
   * Đã đo đúng con số ấy trên máy ảo 375px.
   * Để phép thu tự lo bề rộng; cột xem trước đã có overflow:hidden nên không
   * có chuyện thẻ đẩy cả trang trượt ngang. */
  body.gcc-ms .gcc-preview-wedding-card {
    max-width: none !important;
  }

  /* Cột xem trước tự căn giữa phần còn lại giữa hai thanh. */
  body.gcc-ms .gcc-two-col > .gcc-col--preview {
    padding: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * CỘT XEM TRƯỚC PHẢI HIỆN, VÀ KHUNG PHẢI VỪA ĐÚNG MÀN HÌNH
 * ══════════════════════════════════════════════════════════════════════════
 * .gcc-two-col mang sẵn class gcc-pv-collapsed từ bố cục cũ (khung xem trước
 * thu lại thành một dải). Luật `…gcc-pv-collapsed > .gcc-col--preview {
 * display:none }` vẫn còn hiệu lực sau khi kéo thiệp ra, nên cột về đúng chỗ
 * mà vẫn tàng hình — đo được cột cao 0px trong khi thẻ lại vẽ ở nơi khác.
 *
 * Và khung phải KHOÁ theo chiều cao màn hình: đo được .gcc-two-col cao 936px
 * trên màn 864px, tức cả trang cuộn được và thanh công cụ trôi khỏi tầm tay. */
@media (max-width: 900px) {
  /* Cột nào đang thật sự giữ thiệp thì JS gắn .gcc-ms-cot — xem luật ở cuối tệp. */

  body.gcc-ms .gcc-two-col {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  body.gcc-ms .gcc-two-col > .gcc-col--preview {
    min-height: 0;
    overflow: hidden;
  }

  body.gcc-ms .gcc-preview-toggle,
  body.gcc-ms .gcc-preview-toggle__panel {
    min-height: 0;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * BA CHỖ CÒN SÓT, ĐO ĐƯỢC TRÊN MÁY ẢO 375×812
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* 1. Có HAI cột xem trước: cột thật (chứa thiệp) và cột rỗng của bố cục cũ.
        Luật hiện cột ở trên bật cả hai, nên cột rỗng thành một dải xám cao
        89px chen giữa thanh trên và tấm thiệp. Chỉ hiện cột nào THỰC SỰ có
        thiệp bên trong. */
  body.gcc-ms .gcc-two-col > .gcc-col--preview { display: none !important; }
  body.gcc-ms .gcc-two-col > .gcc-col--preview.gcc-ms-cot { display: grid !important; }

  /* 2. Khoá chiều cao ở MỌI lớp bọc. Chỉ khoá .gcc-two-col là chưa đủ: đo được
        nó vẫn cao 936px trong khung 812px vì lớp bọc ngoài không chặn. */
  body.gcc-ms .gcc-page-wrap,
  body.gcc-ms .gcc-creator-wrap,
  body.gcc-ms .gcc-tab-content,
  body.gcc-ms .gcc-two-col {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* 3. Khay đóng phải nằm HẲN ngoài màn hình. 101% chưa đủ vì khay còn cộng
        thêm đệm vùng an toàn — đo được mép trên khay ở y = 814 trong khi màn
        hình cao 812, tức thanh kéo vẫn ló ra 2px. */
  .gcc-ms-khay { transform: translateY(115%); }
  .gcc-ms-khay.mo { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * BẢNG ĐƯỢC MƯỢN: BỎ PHẦN ĐẦU RIÊNG CỦA NÓ
 * ══════════════════════════════════════════════════════════════════════════
 * Mỗi bảng có sẵn dải tiêu đề và nút đóng của riêng mình. Đưa vào khay thì
 * thành hai tầng tiêu đề chồng nhau — "Stickers · Done" của khay, ngay dưới là
 * "Decorate · ✕" của bảng. Ẩn dải trong đi; khay đã lo cả tên lẫn nút đóng. */
@media (max-width: 900px) {
  .gcc-ms-than .gcc-stk-head,
  .gcc-ms-than .gcc-mp-header,
  .gcc-ms-than .gcc-modal-header,
  .gcc-ms-than .gcc-mp-grabber,
  .gcc-ms-than .gcc-modal-overlay { display: none !important; }

  /* Bảng mượn vào thì bỏ luôn bóng đổ và bo góc riêng — khay đã có rồi. */
  .gcc-ms-than .gcc-modal-container {
    box-shadow: none !important;
    border: 0 !important;
    max-height: none !important;
    background: transparent !important;
  }

  /* Bảng chọn media khi được mượn sang: PHẢI THÔI CẮT.
     Bảng vốn là cửa sổ nổi nên tự cắt nội dung và tự cuộn bên trong. Sang cột
     node thì cái cuộn là thân cột, còn bảng chỉ nên cao theo nội dung — để
     nguyên `overflow:hidden` + trần chiều cao thì lưới bị kẹp còn một hàng,
     mốc cuộn nằm trong vùng bị cắt và không bao giờ lọt tầm nhìn: trình chọn
     đứng im ở 24 tấm dù thư viện có 95. */
  .gcc-ms-than .gcc-mp-box,
  .gcc-ms-than .gcc-mp-body,
  .gcc-ms-than .gcc-mp-grid {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .gcc-ms-than .gcc-mp-body { display: block !important; }

/* ── Chân bảng GHIM ĐÁY khi bảng được mượn sang cột/khay ────────────────────
 * Ở cửa sổ nổi, chân bảng là hàng cuối của một hộp cao cố định nên luôn nhìn
 * thấy. Khi bảng nằm trong cột node hay khay điện thoại thì nó cao theo nội
 * dung, mà nội dung là danh sách cuộn vô hạn — nút "Select" trôi xuống tận
 * đáy và với thư viện lớn thì KHÔNG BAO GIỜ với tới. Người dùng chọn xong
 * không có cách nào xác nhận.
 * `position: sticky` giữ nó dính đáy khung cuộn, danh sách dài bao nhiêu cũng
 * vậy. Phải có nền đục, nếu không ảnh chạy xuyên qua chữ. */
.gcc-ms-than .gcc-mp-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 8px;
  padding: 10px 4px !important;
  background: var(--gcc-surface-1, #121212);
  border-top: 1px solid var(--gcc-line, #2b2f39) !important;
}

/* Số lượng item: BỎ.
 * Thư viện đang trong giai đoạn xây dựng, phơi con số "95 items" chỉ làm người
 * dùng thấy kho nghèo nàn. Không có nó thì lưới cứ cuộn, cảm giác là vô tận. */
.gcc-ms-than .gcc-mp-page-info { display: none !important; }
}