/**
 * gcc-ux-builder.css — Cột trái của trình dựng thiệp trên máy tính.
 *
 * Mọi luật nằm sau `body.gcc-ux` VÀ dải màn hình rộng. Điện thoại không nhận
 * một dòng nào — bàn thiết kế ở đó có vỏ riêng.
 */

/* Công tắc giao diện chỉ tồn tại ở khổ máy tính. Ẩn từ mặc định rồi mới bật
   trong dải rộng — an toàn hơn là trông chờ luật ẩn của bàn thiết kế điện
   thoại, vì luật ấy có thể đổi mà chỗ này không ai nhớ sửa theo. */
.gcc-ux-congtac { display: none; }

@media (min-width: 901px) {

  /* ── Công tắc Builder / Chat ────────────────────────────────────────── */
  .gcc-ux-congtac {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--gcc-surface-2, #232323);
    border: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ux-congtac button {
    border: 0; cursor: pointer;
    padding: 0 11px; height: 24px;
    border-radius: 999px;
    background: transparent;
    color: var(--gcc-ink-muted, #9a9a9a);
    font: inherit; font-size: 11.5px; font-weight: 600;
    line-height: 1;
  }
  .gcc-ux-congtac button:hover { color: var(--gcc-ink, #e8e8e8); }
  .gcc-ux-congtac button.dang {
    background: var(--gcc-btn-primary-bg, #e4e4e4);
    color: var(--gcc-btn-primary-text, #141414);
  }


  /* Hộp hội thoại nhường chỗ. Giữ trong DOM chứ không xoá: trình chọn media,
     bảng mẫu và các bảng khác vẫn render vào bên trong nó rồi mới được mượn
     sang cột này. Xoá đi là mất chỗ dựng của chúng. */
  body.gcc-ux .gcc-two-col > .gcc-col--form {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
  }

  .gcc-ux-cot { display: none; }

  body.gcc-ux .gcc-ux-cot {
    display: flex;
    flex-direction: column;
    /* Chiếm trọn vùng làm việc bên trái — đúng chỗ hộp hội thoại từng đứng.
       Không đặt bề rộng cố định: khung xem trước đã giữ 50%, nên phần còn lại
       vừa vặn là nửa kia; đặt 320px thì thừa ra một dải đen giữa hai cột và
       cột trái trông như bị bỏ rơi. Khi thu khung xem trước, luật cùng công
       thức tự cho cột này trải hết màn. */
    flex: 1 1 auto;
    min-width: 0;
    /* Cao bằng màn hình để nút tạo thiệp ghim đáy. Cột soạn cũ giữ vai trò
       này, nhưng nó đã bị cắt khỏi dòng chảy nên không còn dựng chiều cao. */
    height: 100vh;
    min-height: 420px;
    background: var(--gcc-surface-1, #121212);
    border-right: 1px solid var(--gcc-line, #2b2f39);
  }

  /* ── Đầu cột ────────────────────────────────────────────────────────── */
  /* Cùng chiều cao và cùng nền với thanh PREVIEW bên cột phải: hai dải tiêu đề
     nằm ngang nhau nên đường ranh dưới chúng phải TRÙNG nhau, lệch một chút là
     mắt thấy ngay như hai tầng so le. Thanh kia cao 55px (đệm 14/18 + chữ) và
     nền rgba(127,127,127,.16) — chép đúng hai con số ấy chứ không ước lượng. */
  .gcc-ux-dau {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    box-sizing: border-box;
    min-height: 55px;
    padding: 8px 14px;
    background: rgba(127, 127, 127, .16);
    border-bottom: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ux-dau b {
    flex: 1; min-width: 0;
    font-size: 14px; color: var(--gcc-ink, #e8e8e8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gcc-ux-quay {
    width: 28px; height: 28px; border-radius: 8px; border: 0;
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8);
    font-size: 17px; line-height: 1; cursor: pointer;
  }
  .gcc-ux-quay:hover { background: var(--gcc-surface-3, #2c2c2c); }

  /* ── Hàng tiện ích mượn từ khung hội thoại ──────────────────────────── */
  .gcc-ux-trang {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ux-trang .gcc-ubar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 14px; font-size: 12px;
  }
  /* Bước và nút lùi là tàn tích của lối hỏi tuần tự: ở đây mọi vùng đều với
     tới được bất cứ lúc nào, nên "Step 1 / ?" không đếm được gì và "←" không
     có bước nào để lùi. Nút mở lại khung xem trước cũng thừa — thiệp luôn hiện.
     Giữ trong DOM vì máy hội thoại vẫn cập nhật chúng. */
  .gcc-ux-trang .gcc-chat-progress,
  .gcc-ux-trang .gcc-chat-btn.ghost,
  .gcc-ux-trang .gcc-pv-btn { display: none; }

  /* ── Chọn loại thiệp ────────────────────────────────────────────────── */
  /* Cho xuống dòng: hộp hỏi lại khi đổi loại là con thứ ba của hàng này. */
  .gcc-ux-loai { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
  .gcc-ux-loai-o {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 12px; text-align: left; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323); color: var(--gcc-ink, #e8e8e8);
    font: inherit;
  }
  .gcc-ux-loai-o:hover { border-color: var(--gcc-ink-muted, #9a9a9a); }
  .gcc-ux-loai-o.dang {
    border-color: var(--gcc-ink-strong, #f4f4f4);
    background: color-mix(in srgb, var(--gcc-ink-strong, #f4f4f4) 14%, transparent);
  }
  .gcc-ux-loai-t { font-size: 13.5px; font-weight: 600; }
  .gcc-ux-loai-p { font-size: 11.5px; color: var(--gcc-ink-muted, #9a9a9a); line-height: 1.4; }

  .gcc-ux-hoi {
    flex: 1 0 100%;
    margin-top: 8px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323);
  }
  .gcc-ux-hoi p { margin: 0 0 9px; font-size: 12px; line-height: 1.5; color: var(--gcc-ink, #e8e8e8); }
  .gcc-ux-hoi-nut { display: flex; gap: 8px; }
  .gcc-ux-hoi-nut button {
    flex: 1; height: 32px; border-radius: 8px; border: 0;
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .gcc-ux-hoi-thoi { background: var(--gcc-surface-3, #3d3d3d); color: var(--gcc-ink, #e8e8e8); }
  .gcc-ux-hoi-ok {
    background: var(--gcc-btn-primary-bg, #e4e4e4);
    color: var(--gcc-btn-primary-text, #141414);
  }

  /* ── Thân cột ───────────────────────────────────────────────────────── */
  .gcc-ux-than {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; scrollbar-width: none;
    padding: 8px 14px 18px;
  }
  .gcc-ux-than::-webkit-scrollbar { display: none; }

  .gcc-ux-nhom {
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gcc-ink-muted, #9a9a9a);
    padding: 14px 8px 6px;
  }
  .gcc-ux-nhom:first-child { padding-top: 4px; }

  .gcc-ux-node {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 10px; margin-bottom: 2px;
    border-radius: 9px; border: 1px solid transparent;
    background: transparent; color: var(--gcc-ink, #e8e8e8);
    text-align: left; font: inherit; cursor: pointer;
  }
  .gcc-ux-node:hover { background: var(--gcc-surface-2, #232323); }
  .gcc-ux-node.dang {
    border-color: var(--gcc-ink-strong, #f4f4f4);
    background: color-mix(in srgb, var(--gcc-ink-strong, #f4f4f4) 14%, transparent);
  }
  /* Ô icon cỡ cố định: tên vùng dài ngắn khác nhau nhưng mọi dòng chữ phải bắt
     đầu trên cùng một mốc dọc, nếu không cột node trông so le. */
  .gcc-ux-ic {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--gcc-surface-2, #232323);
    color: var(--gcc-ink-muted, #9a9a9a);
  }
  .gcc-ux-node:hover .gcc-ux-ic { color: var(--gcc-ink, #e8e8e8); }
  .gcc-ux-node.dang .gcc-ux-ic {
    background: color-mix(in srgb, var(--gcc-ink-strong, #f4f4f4) 22%, transparent);
    color: var(--gcc-ink-strong, #f4f4f4);
  }
  .gcc-ux-ic:empty { display: none; }

  .gcc-ux-tt { flex: 1; min-width: 0; display: block; }
  .gcc-ux-t1 { display: block; font-size: 13.5px; }
  .gcc-ux-t2 {
    display: block; font-size: 11.5px; color: var(--gcc-ink-muted, #9a9a9a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gcc-ux-t2:empty { display: none; }
  .gcc-ux-mui { color: var(--gcc-ink-muted, #9a9a9a); font-size: 15px; flex: 0 0 auto; }
  /* Chấm PRO: nhỏ, không hét lên. Nó nói "cái này thuộc gói trả phí", không
     nói "bạn không được đụng vào" — bấm vào vẫn mở, vẫn dùng, vẫn xem trước. */
  .gcc-ux-pro {
    flex: 0 0 auto;
    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-ux-chinh {
    width: 100%; height: 38px; border-radius: 9px; border: 0;
    background: var(--gcc-btn-primary-bg, #e4e4e4); color: var(--gcc-btn-primary-text, #141414);
    font-size: 13.5px; font-weight: 700; cursor: pointer;
  }
  .gcc-ux-ghi {
    font-size: 11.5px; color: var(--gcc-ink-muted, #9a9a9a);
    line-height: 1.5; margin: 8px 2px 14px;
  }

  /* ── Một bước của luồng dựng trong cột ──────────────────────────────── */
  /* Câu hỏi lấy nguyên văn từ sổ luồng — người dùng đọc đúng câu mà chế độ hội
     thoại hỏi, nên chuyển qua lại giữa hai giao diện không phải học lại. */
  .gcc-ux-hoi-chu {
    margin: 2px 2px 12px;
    font-size: 12.5px; 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 cột
     tối phải kéo lại nền và màu chữ, nếu không là chữ tối trên nền tối. */
  .gcc-ux-buoc .gcc-chat-input-row { display: flex; gap: 8px; align-items: flex-start; }
  .gcc-ux-buoc input,
  .gcc-ux-buoc textarea {
    flex: 1 1 auto; min-width: 0;
    padding: 9px 11px; border-radius: 9px;
    border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323);
    color: var(--gcc-ink, #e8e8e8);
    font: inherit; font-size: 13px; line-height: 1.5;
  }
  .gcc-ux-buoc textarea { min-height: 76px; resize: vertical; }
  .gcc-ux-buoc input::placeholder,
  .gcc-ux-buoc textarea::placeholder { color: var(--gcc-ink-muted, #9a9a9a); }
  .gcc-ux-buoc .gcc-chat-btn {
    flex: 0 0 auto; height: 34px; padding: 0 14px;
    border: 0; border-radius: 9px; cursor: pointer;
    background: var(--gcc-btn-primary-bg, #e4e4e4);
    color: var(--gcc-btn-primary-text, #141414);
    font: inherit; font-size: 12.5px; font-weight: 700;
  }
  .gcc-ux-buoc .gcc-chat-btn.secondary,
  .gcc-ux-buoc .gcc-chat-btn.ghost {
    background: var(--gcc-surface-2, #232323);
    color: var(--gcc-ink, #e8e8e8);
  }
  .gcc-ux-buoc .gcc-chat-choices { display: grid; gap: 8px; }
  .gcc-ux-buoc .gcc-chat-choice {
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 12px; text-align: left; cursor: pointer;
    border-radius: 10px; border: 1px solid var(--gcc-line, #2b2f39);
    background: var(--gcc-surface-2, #232323);
    color: var(--gcc-ink, #e8e8e8); font: inherit;
  }
  .gcc-ux-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-ux-buoc .gcc-chat-choice-label { font-size: 13.5px; font-weight: 600; }
  .gcc-ux-buoc .gcc-chat-choice-desc { font-size: 11.5px; color: var(--gcc-ink-muted, #9a9a9a); }
  .gcc-ux-buoc .gcc-chat-actions-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .gcc-ux-buoc .gcc-chat-charcount { font-size: 11px; color: var(--gcc-ink-muted, #9a9a9a); }

  /* ── Chân cột ───────────────────────────────────────────────────────── */
  .gcc-ux-chan {
    flex: 0 0 auto;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--gcc-line, #2b2f39);
  }
  .gcc-ux-tao {
    width: 100%; height: 42px; border-radius: 999px; border: 0;
    background: var(--gcc-btn-primary-bg, #e4e4e4); color: var(--gcc-btn-primary-text, #141414);
    font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .gcc-ux-tao[disabled] { opacity: .6; cursor: default; }
  .gcc-ux-loi {
    margin: 10px 0 0; font-size: 12px; line-height: 1.45;
    color: #ffbdbd; background: #3a1717; border: 1px solid #6b2a2a;
    border-radius: 8px; padding: 9px 11px;
  }

  /* ── Bảng được mượn sang cột ────────────────────────────────────────── */
  .gcc-ux-than .gcc-mp-box,
  .gcc-ux-than .gcc-modal--inline,
  .gcc-ux-than .gcc-stk-panel {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Bảng nào cũng có dải tiêu đề riêng — cột đã có tiêu đề và nút quay lại
     rồi, để cả hai là hai tầng đầu chồng nhau. */
  .gcc-ux-than .gcc-stk-head,
  .gcc-ux-than .gcc-mp-header,
  .gcc-ux-than .gcc-modal-header,
  .gcc-ux-than .gcc-mp-grabber,
  .gcc-ux-than .gcc-modal-overlay { display: none !important; }

  .gcc-ux-than .gcc-modal-container {
    max-height: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* ── Vùng đang chọn trên thiệp ──────────────────────────────────────── */
  body.gcc-ux .gcc-ux-sang {
    outline: 2px solid var(--gcc-ink-strong, #f4f4f4);
    outline-offset: 2px;
    border-radius: 6px;
  }
  body.gcc-ux .gcc-preview-card [data-v],
  body.gcc-ux .gcc-preview-wedding-card [data-v] { cursor: pointer; }

  /* 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-ux-than .gcc-mp-box,
  .gcc-ux-than .gcc-mp-body,
  .gcc-ux-than .gcc-mp-grid {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .gcc-ux-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-ux-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-ux-than .gcc-mp-page-info { display: none !important; }
}