/**
 * gcc-media-inline.css — Media picker gắn thẳng trong khung chat.
 *
 * Nạp SAU gcc-media-picker.css và SAU iphone-chat.css.
 *
 * Chỉ tạo dáng cho biến thể .gcc-mp-box--inline. Không đụng tới chế độ modal:
 * ngoài giao diện chat (trang admin, bố cục tab cũ) picker vẫn mở như trước.
 *
 * Lưu ý về media query: các quy tắc gốc dùng `min-width: 700px` để chuyển
 * sang bố cục desktop hai cột. Ở đây khung chat chỉ rộng ~340px NHƯNG viewport
 * là desktop, nên những quy tắc đó vẫn kích hoạt và làm vỡ bố cục. Vì vậy mọi
 * thứ dưới đây phải khai báo lại tường minh, không dựa vào media query.
 */

.gcc-mp-inline-host {
    width: 100%;
    display: block;
}

.gcc-mp-box--inline {
    /* Bỏ kích thước của modal: trong dòng thì cao theo nội dung, có trần.
       TRÀN HẾT BỀ NGANG, không viền không bóng: khung chat vốn đã hẹp, lồng
       thêm một cái hộp có viền vào trong nữa thì ăn mất bề ngang hiển thị và
       trông như cửa sổ bị nhét vào cửa sổ. Bảng này là một phần của khung
       chat, không phải hộp thoại nổi trên nó. */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Không dùng nút ✕ của picker: thanh gạt bên dưới đã làm việc đóng. */
.gcc-mp-box--inline .gcc-mp-close { display: none !important; }

/* ── Thanh gạt: chạm để đóng ────────────────────────────────────────────
 * Vạch xám chỉ 4px nhưng vùng chạm cao 22px — ngón tay không phải nhắm.
 * Vạch vẽ bằng ::before nên bề dày nhìn thấy và vùng bấm tách rời nhau.
 * ─────────────────────────────────────────────────────────────────────── */
.gcc-mp-grabber {
    display: block;
    width: 100%;
    height: 22px;
    padding: 0;
    margin: 0 0 2px;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.gcc-mp-grabber::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #c7c7cc;
    transition: background .15s, width .15s;
}

.gcc-mp-grabber:hover::before  { background: #a1a1a6; width: 46px; }
.gcc-mp-grabber:active::before { background: #8e8e93; }
.gcc-mp-grabber:focus-visible  { outline: none; }
.gcc-mp-grabber:focus-visible::before {
    background: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, .25);
}

/* ── Đầu bảng: gọn lại, nút ✕ đóng vai trò huỷ ─────────────────────────── */
.gcc-mp-box--inline .gcc-mp-header {
    padding: 6px 2px 6px !important;
    border-bottom: 0 !important;
}

.gcc-mp-box--inline .gcc-mp-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ── Thanh lọc ─────────────────────────────────────────────────────────── */
/* Khung chat hẹp: xếp danh mục và ô tìm kiếm trên CÙNG một hàng thì ô tìm
   kiếm ép dải danh mục cụt mất một nửa chữ. Cho tìm kiếm chiếm trọn hàng
   trên, danh mục cuộn ngang ở hàng dưới. */
.gcc-mp-box--inline .gcc-mp-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 2px 6px !important;
    gap: 6px !important;
}
.gcc-mp-box--inline .gcc-mp-search {
    order: -1 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    /* Cần min-width: bề rộng mặc định của <input> (~140px) thắng flex-basis,
       không có dòng này thì ô tìm kiếm chỉ chiếm nửa hàng. */
    min-width: 100% !important;
}
.gcc-mp-box--inline .gcc-mp-cat-tabs {
    width: 100% !important;
    flex: 0 0 100% !important;
}
/* Ô tìm kiếm: KHÔNG gạch chân.
 *
 * iphone-chat.css cho mọi input trong khung chat kiểu gạch chân
 * (`border-width: 0 0 1px`). Ở đây nó nằm ngay trên dải "CHOOSE A THEME" vốn
 * đã có đường kẻ riêng, thành hai vạch ngang sát nhau — rối mắt.
 *
 * PHẢI LẶP LẠI CẢ CHUỖI `:not()` của nó. Bộ chọn bên đó là
 * `.gcc-chat-shell .gcc-chat-input-area input` cộng BẢY `:not([type=...])`,
 * mỗi cái tính như một lớp → độ đặc hiệu 0,9,1. Viết
 * `.gcc-mp-box--inline .gcc-mp-search` (0,2,0) thì dù có !important vẫn thua;
 * đã đo: viền dưới vẫn còn 1px. Lặp chuỗi rồi chèn thêm một lớp cho ra 0,10,1
 * mới thắng được. Xấu, nhưng đây là cái giá của việc bên kia inflate
 * specificity bằng :not().
 */
.gcc-chat-input-area .gcc-mp-box--inline input.gcc-mp-search {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(118, 118, 128, .10) !important;
}

.gcc-chat-input-area .gcc-mp-box--inline input.gcc-mp-search:focus {
    background: rgba(118, 118, 128, .16) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Bản dự phòng cho ngữ cảnh không phải khung chat */
.gcc-mp-box--inline .gcc-mp-search {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
}
.gcc-mp-box--inline .gcc-mp-cat-tab {
    font-size: 11px !important;
    padding: 3px 8px !important;
}

/* ── Thân: một cột. Panel chi tiết bị ẩn vì không đủ bề ngang; xem trước
 *    vẫn có ở khung preview thiệp bên cạnh nên không mất gì. ───────────── */
.gcc-mp-box--inline .gcc-mp-body {
    grid-template-columns: 1fr !important;
    min-height: 150px;
}
.gcc-mp-box--inline .gcc-mp-detail {
    display: none !important;
}

/* ── Lưới ảnh thay cho danh sách ────────────────────────────────────────
 *
 * gcc-adapter.js biến lưới picker thành danh sách kiểu Windows Explorer
 * (icon | Name | Type | Size) bằng một <style> chèn động, toàn `!important`.
 * Bốn cột đó cần ~420px; trong khung chat 320px thì cột Size bị cắt cụt.
 * Tệ hơn: chọn ảnh bằng TÊN FILE thì không chọn được — phải nhìn mới biết.
 *
 * Nên ở chế độ trong dòng, dựng lại thành lưới ô vuông có ảnh. Các quy tắc
 * của adapter đứng ở độ đặc hiệu 0,1,0–0,2,0; thêm tiền tố .gcc-mp-box--inline
 * đưa những quy tắc dưới đây lên 0,2,0–0,3,0 nên thắng được.
 * Chế độ modal KHÔNG bị đụng tới, vẫn là danh sách như cũ.
 * ──────────────────────────────────────────────────────────────────────── */
.gcc-mp-box--inline .gcc-mp-grid {
    display: grid !important;
    /* 4 cột cho khớp lưới chọn hiệu ứng — cùng một nhịp thị giác */
    grid-template-columns: repeat(4, 1fr) !important;
    /* CHIỀU CAO HÀNG PHẢI TƯỜNG MINH.
       Cách tự nhiên là cho thẻ `aspect-ratio: 1/1` rồi để hàng tự giãn — nhưng
       nó KHÔNG chạy: bề rộng cột là `1fr`, tức chưa xác định vào lúc lưới đo
       hàng, nên aspect-ratio không sinh ra chiều cao nào để đóng góp. Đã đo:
       hàng cao 32px trong khi thẻ cao 97px, các hàng chồng lên nhau.
       gcc-media-inline.js đo bề rộng cột thật rồi ghi vào --gcc-mp-cell. */
    grid-auto-rows: var(--gcc-mp-cell, 74px) !important;
    gap: 5px !important;
    padding: 2px !important;
    max-height: 34vh;
    background: transparent !important;
    border: 0 !important;
}

/* Hàng tiêu đề Name/Type/Size của danh sách — vô nghĩa trong lưới */
.gcc-mp-box--inline .gcc-mp-list-header { display: none !important; }

.gcc-mp-box--inline .gcc-mp-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f2f2f7 !important;
}
/* Adapter tô sọc chẵn/lẻ cho danh sách — trong lưới thì thành loang lổ */
.gcc-mp-box--inline .gcc-mp-card:nth-child(even) { background: #f2f2f7 !important; }
.gcc-mp-box--inline .gcc-mp-card:hover { background: #e8e8ed !important; }
.gcc-mp-box--inline .gcc-mp-card.selected {
    box-shadow: 0 0 0 2px #007aff inset !important;
    background: #f2f2f7 !important;
}

/* Ruột thẻ: adapter đặt grid 4 cột ở đây, trả về khối vuông phủ kín ô.
   TỈ LỆ VUÔNG PHẢI ĐẶT Ở ĐÂY, KHÔNG PHẢI TRÊN .gcc-mp-card. Thẻ có
   `overflow: hidden` nên kích thước tối thiểu tự động của nó là 0 và
   `aspect-ratio` không đóng góp gì vào chiều cao hàng lưới: đã đo được hàng
   cao 38px trong khi thẻ cao 97px, các hàng chồng lên nhau và nhãn ô dưới đè
   lên ảnh ô trên. Đặt tỉ lệ ở lớp trong (không overflow hidden) thì chiều cao
   có thật và hàng lưới giãn đúng — nhưng xem chú thích grid-auto-rows ở trên,
   cuối cùng chiều cao hàng vẫn phải ấn định. Ở đây chỉ cần phủ kín ô. */
.gcc-mp-box--inline .gcc-mp-image,
.gcc-mp-box--inline .gcc-mp-video,
.gcc-mp-box--inline .gcc-mp-model,
.gcc-mp-box--inline .gcc-mp-audio,
.gcc-mp-box--inline .gcc-mp-generic {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.gcc-mp-box--inline .gcc-mp-card img.gcc-mp-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Không có ảnh (audio, model, ảnh thiếu url) → icon to giữa ô */
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-icon-wrap,
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-audio-icon {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
}
.gcc-mp-box--inline .gcc-mp-card .gcc-svg-icon svg { width: 26px; height: 26px; }

/* Tên file thành dải chữ mờ dưới đáy ô */
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-file-name,
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-audio-name {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 8px 4px 2px !important;
    font-size: 8.5px !important;
    line-height: 1.25 !important;
    color: #fff !important;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}

/* Nhãn loại + dung lượng do adapter chèn — thừa trong ô vuông nhỏ */
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-type-label,
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-size-label { display: none !important; }

/* Nút phát của audio: nổi lên giữa ô thay vì nằm ở cột đầu */
.gcc-mp-box--inline .gcc-mp-card .gcc-mp-play-btn {
    position: absolute !important;
    left: 50% !important;
    top: 42% !important;
    transform: translate(-50%, -50%) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: 2 !important;
}

/* ── Chân bảng: phân trang + xác nhận, thu gọn ─────────────────────────── */
.gcc-mp-box--inline .gcc-mp-footer {
    padding: 8px 2px 2px !important;
    gap: 6px !important;
    border-top: 0 !important;
}
.gcc-mp-box--inline .gcc-mp-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
}
.gcc-mp-box--inline .gcc-mp-page-info {
    font-size: 11px !important;
}

/* ── Màn hình thư mục / ngôn ngữ (picker audio) ─────────────────────────
 * gcc-adapter.js bọc `.gcc-mp-lang-screen` trong một khung viền 1px, cộng
 * `padding: 20px 16px` của CSS gốc. Trong khung chat vốn đã hẹp, đó là hộp
 * lồng trong hộp: ăn mất ~34px bề ngang và tạo cảm giác chật. Gỡ hết khung,
 * cho danh sách chạy sát mép như lưới ảnh.
 * ─────────────────────────────────────────────────────────────────────── */
.gcc-mp-box--inline .gcc-mp-lang-screen {
    max-height: 40vh;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100%;
}

/* Dải tiêu đề ("CHOOSE A THEME", "← Birthday") — sát mép.
   Nền KHÔNG được trong suốt: dải này dính ở đỉnh vùng cuộn, trong suốt thì các
   dòng danh sách trôi lộ ra ngay dưới chữ. Lấy đúng nền của hộp để nó liền
   một khối với phần đầu. */
.gcc-mp-box--inline .gcc-mp-lang-title {
    padding: 6px 2px !important;
    background: var(--gcc-surface-1, #171717) !important;
    border-bottom: 1px solid var(--gcc-line, #3d3d3d) !important;
    margin-bottom: 2px !important;
}

.gcc-mp-box--inline .gcc-mp-lang-grid {
    padding: 0 !important;
    width: 100%;
}

/* Hàng thư mục: bỏ thụt lề 20px của adapter, thu chiều cao cho gọn */
.gcc-mp-box--inline .gcc-mp-lang-folder {
    padding: 9px 4px !important;
    min-height: 0 !important;
    gap: 10px !important;
    border-radius: 8px !important;
}

.gcc-mp-box--inline .gcc-mp-lang-folder .gcc-folder-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 17px !important;
    flex-shrink: 0;
}

.gcc-mp-box--inline .gcc-mp-lang-folder .gcc-mp-lang-name {
    font-size: 13px !important;
}

.gcc-mp-box--inline .gcc-mp-lang-folder .gcc-mp-lang-count {
    font-size: 11px !important;
}

/* Máy hẹp thật: 3 ô vẫn đọc được, chỉ thu khoảng cách */
@media (max-width: 380px) {
    .gcc-mp-box--inline .gcc-mp-grid {
        gap: 4px !important;
        padding: 6px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PICKER MẪU THIỆP GẮN TRONG DÒNG (thường + cưới)
 *
 * gcc-media-inline.js di chuyển NGUYÊN thẻ #gcc-template-modal vào khung chat
 * và gắn lớp .gcc-modal--inline. Ở đây chỉ việc tháo bỏ mọi thứ thuộc về hộp
 * thoại: định vị cố định, lớp phủ, hiệu ứng phóng to, nút ✕.
 *
 * Giữ nguyên id và cấu trúc bên trong — handler của picker dùng bộ chọn có
 * tiền tố `#gcc-template-modal ...`, đổi cấu trúc là gãy.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-modal--inline {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    z-index: auto !important;
    /* Modal gốc bắt đầu ở opacity 0 rồi mới thêm .gcc-modal-visible sau 10ms.
       Trong dòng thì không cần màn chờ đó — hiện ngay. */
    opacity: 1 !important;
}

/* Lớp phủ tối: vô nghĩa khi bảng nằm trong luồng */
.gcc-modal--inline .gcc-modal-overlay { display: none !important; }

.gcc-modal--inline .gcc-modal-container {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 52vh !important;
    /* Hiệu ứng scale(0.9) của modal gốc sẽ làm bảng co lại lệch tâm */
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Thanh gạt thay nút ✕, giống hệt picker media */
.gcc-modal--inline .gcc-modal-close { display: none !important; }

.gcc-modal--inline .gcc-modal-header {
    padding: 4px 2px 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
}

.gcc-modal--inline .gcc-modal-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.gcc-modal--inline .gcc-modal-back {
    padding: 3px 8px !important;
    font-size: 11px !important;
}

.gcc-modal--inline .gcc-modal-body { padding: 0 !important; }
.gcc-modal--inline .gcc-modal-content { padding: 6px 2px !important; }

/* Cùng nhịp 4 cột với lưới media và lưới hiệu ứng. Quy tắc gốc dùng
   `minmax(180px, 1fr)` → trong bề ngang ~320px chỉ ra được 1 cột. */
.gcc-modal--inline .gcc-folders-grid,
.gcc-modal--inline .gcc-files-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    /* Ô VUÔNG. Cùng lý do như lưới media: `aspect-ratio` không đóng góp chiều
       cao khi cột là `1fr`, nên gcc-media-inline.js đo bề rộng cột thật rồi
       ghi vào --gcc-mp-cell. Với picker này còn phải đo LẠI mỗi lần vào/ra
       thư mục vì lưới bị dựng lại. */
    grid-auto-rows: var(--gcc-mp-cell, 74px) !important;
    gap: 5px !important;
}

/* Mọi kích thước bên trong đang tính cho modal rộng 900px: icon 48px, nhãn
   15px. Trong ô 75px thì icon chiếm gần hết chỗ và nhãn tràn ra ngoài. Thu
   lại theo tỉ lệ ô. */
.gcc-modal--inline .gcc-folder-item,
.gcc-modal--inline .gcc-file-item {
    padding: 5px 3px !important;
    gap: 1px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    /* Ô do lưới định chiều cao (vuông), nội dung chỉ việc nằm gọn bên trong.
       Không đặt min-height nữa — nó chính là thứ kéo ô thành hình dọc.
       border-box là bắt buộc: template-modal-picker.css để mặc định
       content-box, nên đệm 5px và viền 1px CỘNG THÊM vào chiều cao hàng —
       đã đo ô 87px trong khi hàng chỉ 73px, thành hình chữ nhật dọc. */
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.gcc-modal--inline .gcc-folder-icon {
    font-size: 20px !important;
    line-height: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

/* Nhãn cho phép xuống DÒNG THỨ HAI thay vì cắt bằng dấu ba chấm: ở 10px và
   một dòng, "Celebrations" bị cắt thành "Celebratio…" — tên danh mục đọc
   được quan trọng hơn là hàng chữ thẳng tắp. Chặn ở 2 dòng để vừa ô vuông. */
.gcc-modal--inline .gcc-folder-name {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
    word-break: break-word !important;
}

.gcc-modal--inline .gcc-folder-count {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
}

/* Lưới mẫu bên trong thư mục — cùng tỉ lệ với lưới thư mục, để hai màn hình
   của cùng một picker không lệch nhịp nhau. */
.gcc-modal--inline .gcc-file-icon {
    font-size: 20px !important;
    line-height: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

.gcc-modal--inline .gcc-file-name {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
    word-break: break-word !important;
}

.gcc-modal--inline .gcc-folder-item * ,
.gcc-modal--inline .gcc-file-item * {
    min-width: 0;
    max-width: 100%;
}

/* Mốc báo hết lưới cho cuộn-tự-tải. Cao 1px, trải hết hàng ngang để nó luôn
   nằm dưới cùng bất kể lưới mấy cột. Không có chiều cao thì trình duyệt coi
   như không có gì để quan sát. */
.gcc-mp-sentinel {
    grid-column: 1 / -1;
    height: 1px;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * CÂN ĐỐI Ô MẪU: icon và chữ đo THEO Ô, không phải px cứng
 * ══════════════════════════════════════════════════════════════════════════
 * Các luật px ở trên (icon 20px, tên 9.5px) được chọn cho một bề rộng bảng
 * nhất định. Bảng rộng ra thì ô to theo mà chữ đứng yên: đo được ô 105×105
 * trong khi nội dung chỉ cao 33px — 68% diện tích là khoảng trống, icon trông
 * như hạt đậu giữa tấm thẻ. Ở màn hình rộng hơn còn lệch nữa.
 *
 * Khai lưới là CONTAINER rồi đo bằng cqw (1% bề rộng lưới). Lưới 4 cột nên mỗi
 * ô chiếm ~24% bề rộng lưới — đo được đúng 24.1%. Từ đó:
 *   icon ≈ 40% cạnh ô  → 0.40 × 24 = 9.6cqw
 *   tên  ≈ 12% cạnh ô  → 0.12 × 24 = 2.9cqw
 * clamp() chặn hai đầu để bảng rất hẹp không nát chữ, bảng rất rộng không phình.
 * Nội dung nay chiếm ~60% chiều cao ô thay vì 32%.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-modal--inline .gcc-files-grid,
.gcc-modal--inline .gcc-folders-grid {
    container-type: inline-size;
}

.gcc-modal--inline .gcc-file-icon,
.gcc-modal--inline .gcc-folder-icon {
    font-size: clamp(22px, 9.6cqw, 46px) !important;
    line-height: 1.05 !important;
    height: auto !important;
    margin-bottom: clamp(4px, 1.6cqw, 10px) !important;
}

.gcc-modal--inline .gcc-file-name,
.gcc-modal--inline .gcc-folder-name {
    font-size: clamp(10px, 2.9cqw, 15px) !important;
    line-height: 1.25 !important;
}

.gcc-modal--inline .gcc-folder-count {
    font-size: clamp(8.5px, 2.2cqw, 12px) !important;
}

/* Ô vuông và nội dung dồn vào giữa — trước đây nội dung dính lên đỉnh, phần
   trống dồn hết xuống dưới nên càng lệch. */
.gcc-modal--inline .gcc-file-item,
.gcc-modal--inline .gcc-folder-item {
    justify-content: center !important;
    padding: clamp(6px, 2.4cqw, 14px) clamp(4px, 1.6cqw, 10px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Ô LƯỚI NỀN TRONG SUỐT — chỉ icon, tên và viền nổi lên
 * ══════════════════════════════════════════════════════════════════════════
 * Nền đặc của từng ô tạo ra một mảng sáng lớn giữa bảng tối, và chính mảng ấy
 * mới là thứ đập vào mắt trước — icon với tên bị chìm xuống hàng thứ hai.
 * Bỏ nền đi thì ba thứ cần đọc (biểu tượng · tên · khung) tự nổi lên, mà bố
 * cục không đổi một pixel nào.
 *
 * Ô ĐANG CHỌN vẫn giữ nền: đó là tín hiệu trạng thái, không phải trang trí —
 * bỏ luôn thì không còn cách nào biết mẫu nào đang dùng. Nền hover cũng giữ,
 * nhưng chỉ là một lớp mờ rất nhạt để biết chuột đang ở đâu.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-modal--inline .gcc-file-item,
.gcc-modal--inline .gcc-folder-item {
    background: transparent !important;
    box-shadow: none !important;
}

.gcc-modal--inline .gcc-file-item:hover,
.gcc-modal--inline .gcc-folder-item:hover {
    background: rgba(110, 168, 254, .08) !important;
}

/* Ô đang chọn: giữ nguyên nền nhấn mà bộ chọn đã định nghĩa. */
.gcc-modal--inline .gcc-file-item.gcc-file-selected {
    background: var(--pf-accent-soft) !important;
}

.gcc-modal--inline .gcc-wedding-file-item.gcc-file-selected {
    background: var(--wed-tint-selected) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * BẢNG MÀU CỦA BỘ CHỌN PHẢI THEO NỀN THẬT CỦA NÓ
 * ══════════════════════════════════════════════════════════════════════════
 * css/theme.css cấp bảng màu SÁNG cho .gcc-chat-shell — có lý do: hồi ấy khung
 * soạn là "tờ giấy trắng". Nhưng nền thật của nó bây giờ là #0d0d0d.
 *
 * Chừng nào mỗi ô còn nền trắng riêng thì không ai thấy mâu thuẫn: chữ #1a1a1a
 * nằm trên nền trắng của chính nó. Bỏ nền ô đi thì chữ đen rơi thẳng xuống nền
 * #0d0d0d — đo được đúng thế, gần như không đọc nổi.
 *
 * Khai lại token NGAY TẠI bộ chọn: biến CSS có tính kế thừa nên cả cây con đổi
 * theo — chữ, viền, nút. Không đụng tới phần còn lại của khung soạn, vì chỗ đó
 * còn thành phần khác đang dựa vào bảng sáng.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-modal--inline {
    color-scheme: dark;

    /* Giá trị TƯỜNG MINH, không trỏ sang --gcc-*.
       Đã thử trỏ sang và trượt: khung soạn cũng cấp bảng SÁNG cho --gcc-*,
       nên --gcc-ink ra #333333 và chữ vẫn tối như cũ — đo được đúng thế.
       Bảng màu ở đây là quyết định riêng của bộ chọn; viết thẳng ra thì đọc
       mã là biết ngay màu gì, không phải lần theo hai tầng biến. */
    --pf-bg:          #0f0f0f;
    --pf-surface:     #0f0f0f;
    --pf-surface-2:   #171717;
    --pf-surface-3:   #232323;
    --pf-ink-strong:  #f0f0f0;
    --pf-ink:         #dcdcdc;
    --pf-ink-muted:   #9a9a9a;
    --pf-ink-ghost:   #6f6f6f;
    --pf-line:        #3d3d3d;
    --pf-line-faint:  #2a2a2a;
    --pf-line-strong: #565656;
    --pf-accent:      #6ea8fe;
    --pf-accent-soft: rgba(110, 168, 254, .16);
    --pf-accent-ring: rgba(110, 168, 254, .30);
    --pf-on-accent:   #0f0f0f;
}

/* ══════════════════════════════════════════════════════════════════════════
 * BỘ CHỌN MẪU CƯỚI — chữ nâu sẫm không đọc được trên nền tối
 * ══════════════════════════════════════════════════════════════════════════
 * wedding-template-picker.css ghim một bảng màu nâu–vàng vẽ cho nền ngà:
 * tên mẫu #3d2b1f, mô tả #9b7653, tiêu đề #8b4513. Trên nền #0d0d0d chúng gần
 * như tàng hình — đo được tên mẫu rgb(61,43,31), tương phản ~1.2:1.
 *
 * Vàng #d4af37 thì GIỮ NGUYÊN: nó là dấu nhận diện của nhánh cưới và vốn đã
 * nổi trên nền tối. Chỉ đổi những màu sẫm, và đổi sang tông NGÀ ẤM chứ không
 * phải trắng lạnh — giữ đúng chất thiệp cưới.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-modal--inline .gcc-wedding-file-item .gcc-file-name {
    color: #f2e8d5 !important;
}

.gcc-modal--inline .gcc-wedding-file-item .gcc-file-desc {
    color: #c9a97c !important;
}

.gcc-modal--inline.gcc-wedding-modal .gcc-modal-title,
.gcc-modal--inline .gcc-wedding-modal .gcc-modal-title,
.gcc-modal--inline.gcc-wedding-modal .gcc-section-divider::after {
    color: #e5c76b !important;
}

/* Huy hiệu CURRENT: nền vàng đặc nên chữ phải TỐI mới đọc được — chỗ này giữ
   nguyên màu sẫm là đúng, không đổi theo. */