/* KHUNG CHAT AI DÙNG CHUNG - trang /video và trang /timkiem (28/09, lô
   "web-khach-timkiem": Bruno chốt nút Chat ở /timkiem mở THẲNG chat AI).

   Tách NGUYÊN VĂN khỏi `video_public.css` (không sửa một giá trị nào): hai
   trang khách cùng MỘT khung chat, MỘT `video_chat.js`, nên CSS của nó cũng
   chỉ được có MỘT bản - chép sang `timkiem.css` là hai bản lệch nhau ở lượt
   sửa đầu tiên (bẫy #11).

   ⚠ Tệp này ĐỌC token theo TÊN của bộ da Thép & Ô-liu (`--tam`, `--vien`,
   `--oliu`, `--chu`...). Trang /video khai chúng ở `:root` của
   `video_public.css`; trang /timkiem ÁNH XẠ chúng về `--tk-*` ngay trên các
   phần tử chat (`timkiem.css`, khối "KHUNG CHAT AI"). Thêm một token mới ở
   đây thì phải ánh xạ ở CẢ HAI trang - bài canh token chết đo theo TỪNG
   trang sẽ đỏ nếu quên.

   ⚠ Nạp TRƯỚC CSS của trang: luật riêng của trang (ẩn nút nổi khi có thanh
   ba nút, ẩn thanh ba nút khi chat mở) phải thắng luật gốc ở đây khi cùng
   độ nặng. */

/* Hai nút đầu khung chat theo màu cửa sổ macOS (Bruno 27/09 "nên làm màu
   giống mac os") - cố định cả hai chế độ như macOS: nền vàng/xanh, glyph
   màu đậm cùng họ (≥3:1 trên nền của nó). Màu CỦA KHUNG CHAT, không trang nào
   khác dùng - nên khai ở đây (dời từ `video_public.css` 28/09), hai trang
   cùng một bản. */
:root {
  --mac-vang: #febc2e;   --mac-vang-chu: #985712;
  --mac-xanh: #28c840;   --mac-xanh-chu: #0b650d;
}

.vc-nut-mo {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--oliu); color: var(--chu-tren-oliu); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px var(--bong);
}
.vc-nut-mo:hover { filter: brightness(1.08); }

.vc-khung {
  position: fixed; right: 16px; bottom: 16px; z-index: 41;
  width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 32px));
  background: var(--tam); border: 1px solid var(--vien); border-radius: var(--bk);
  box-shadow: 0 10px 32px var(--bong);
  display: flex; flex-direction: column; overflow: hidden;
}
.vc-khung[hidden] { display: none; }
.vc-dau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--vien); background: var(--tam-cao);
}
.vc-dau-ten { font-weight: 700; font-size: var(--f3); color: var(--chu); }
/* Hai nút đầu khung (27/09, Bruno): THU NHỎ kiểu macOS (—) thay ✕ cũ 13×20px,
   và TOÀN MÀN HÌNH (chỉ hiện ≤1023px). Màu macOS vàng/xanh; hình tròn 36px
   (Bruno: "bằng 80%" của 44px) nhưng VÙNG CHẠM vẫn 44px - nút trong suốt 44px,
   hình tròn vẽ bằng ::before (inset 4px). Mép phải hình tròn cách mép khung
   ĐÚNG 16px = lề trái chữ tiêu đề (đệm 16 - lề âm 4 + inset 4); hai hình tròn
   cách nhau 8px. */
.vc-dau-nut { display: flex; align-items: center; gap: 0; margin: -8px -4px -8px 0; }
.vc-nut-khung {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--vc-nut-chu); cursor: pointer;
}
.vc-nut-khung::before {
  content: ""; position: absolute; inset: 4px; border-radius: 999px;
  background: var(--vc-nut-nen);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc-nut-chu) 30%, transparent);
}
.vc-nut-khung:hover::before { filter: brightness(.94); }
.vc-nut-khung:focus-visible { outline: 2px solid var(--oliu-sang); outline-offset: 0; }
.vc-nut-khung svg { position: relative; width: 18px; height: 18px; }
.vc-dong { --vc-nut-nen: var(--mac-vang); --vc-nut-chu: var(--mac-vang-chu); }
.vc-rong { --vc-nut-nen: var(--mac-xanh); --vc-nut-chu: var(--mac-xanh-chu); }
.vc-rong { display: none; }
.vc-rong-thu { display: none; }
.vc-khung--rong .vc-rong-mo { display: none; }
.vc-khung--rong .vc-rong-thu { display: inline; }
/* Số tin CHƯA ĐỌC trên icon chat (thanh đáy + nút nổi): bot trả lời lúc khung
   đang thu nhỏ. Đỏ cố định cả hai chế độ (đỏ đậm bảng sáng + chữ trắng: đọc
   được trên nền tối lẫn sáng), viền màu nền trang để tách khỏi nút. Nút mang
   chấm phải `position: relative` - khai ở CSS của từng trang. */
.vc-chua-doc {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--nen); border-radius: 999px;
  background: var(--S-het); color: var(--S-the);
  font-size: 12px; font-weight: 700; line-height: 16px;
  pointer-events: none;
}
.vc-chua-doc[hidden] { display: none; }
.vc-tin { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
/* Thiếu chỗ (màn thấp + bàn phím) thì CHỈ vùng tin co lại - tiêu đề, hai nút,
   ô gõ và dòng Facebook giữ nguyên cỡ (lô `chat-web-them-2-dong` 09/10). */
.vc-dau, .vc-chan, .vc-thoat { flex-shrink: 0; }
/* Dải "ĐANG HỎI VỀ: <sản phẩm>" (09/10, mockup 45WmWkk2f9y8nxtHCrHeCZ màn 2) -
   chỉ hiện khi khung mở từ nút "HỎI CHAT BOT AI" của trang chi tiết. Token
   CÓ SẴN của khung (nền trang · viền · chữ · chữ mờ) nên trang tra hàng không
   phải ánh xạ thêm gì, và Sáng/Tối chỉ đổi màu. */
.vc-sp {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 8px 16px; background: var(--nen); border-bottom: 1px solid var(--vien);
}
.vc-sp[hidden] { display: none; }
.vc-sp-anh {
  width: 40px; height: 40px; flex: none; object-fit: cover;
  border: 1px solid var(--vien); border-radius: 6px; background: var(--tam);
}
.vc-sp-anh[hidden] { display: none; }
.vc-sp-chu { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vc-sp-nhan {
  font-size: var(--f1); font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--chu-mo);
}
.vc-sp-ten {
  font-size: var(--f2); font-weight: 600; color: var(--chu);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Link dài (bot hay gửi link tìm kiếm, khách gửi link clip) phải BẺ DÒNG giữa
   link: không bẻ thì chữ tràn khỏi bong bóng, vùng tin trượt ngang được và ở
   màn 393px chữ lòi 18px ra ngoài (đo WebKit 27/09). */
.vc-bong { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: var(--f2); line-height: 1.4; overflow-wrap: break-word; }
.vc-bong--bot { align-self: flex-start; background: var(--tam-cao); color: var(--chu); border: 1px solid var(--vien); }
.vc-bong--khach { align-self: flex-end; background: var(--oliu); color: var(--chu-tren-oliu); }
/* Link trong bong bóng (lô `chat-web-link-bam-duoc` 09/10): gạch chân, ô-liu
   nhấn trên bong bóng bot; trên bong bóng KHÁCH (nền ô-liu) giữ màu chữ của
   bong bóng - ô-liu trên ô-liu là mất chữ. Link dài bẻ ở bất kỳ ký tự nào. */
.vc-link { color: var(--oliu-sang); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
.vc-bong--khach .vc-link { color: inherit; }
.vc-bong--dang-go { display: inline-flex; gap: 4px; padding: 12px 12px; }
.vc-bong--dang-go span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--chu-mo);
  animation: vc-nhay 1.1s infinite ease-in-out;
}
.vc-bong--dang-go span:nth-child(2) { animation-delay: .18s; }
.vc-bong--dang-go span:nth-child(3) { animation-delay: .36s; }
@keyframes vc-nhay { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
/* ⚠ 09/10 (lô `chat-web-lap-2-va-o-go`, mockup Bruno màn "Nút gửi cố định"):
   hàng ô gõ CANH ĐÁY (`flex-end`) - mặc định `stretch` kéo nút gửi cao theo ô
   gõ thành một cột xanh dài khi tin 3-4 dòng (ảnh iPhone + màn rộng 09/10).
   Đệm dọc 8px (cũ 12): ô gõ 3 dòng trên iPhone bàn phím mở vẫn chừa vùng tin
   đủ hai tin (đo 390×844, vùng thấy 361: 97 trước lô → 115pt). */
.vc-chan { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--vien); }
.vc-nhap {
  flex: 1 1 auto; resize: none; background: var(--nen); color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--bk); padding: 12px 12px; font: inherit;
  box-sizing: border-box;
  /* Một dòng = 18 + 2·12 + 2 = 44px (bằng nút gửi; đệm giữ thang 4px); tự nở
     tối đa BA dòng (54 + 24 + 2 = 80px), dài hơn thì cuộn BÊN TRONG ô
     (`video_chat.js::gianO` đặt chiều cao theo chữ, trần này chặn). */
  line-height: 18px; min-height: 44px; max-height: 80px; overflow-y: auto;
  /* 16px, không theo thang --f*: iPhone/iPad TỰ PHÓNG TO cả trang khi chạm
     một ô nhập chữ dưới 16px (Bruno chụp 27/09: 15.2px ⇒ thẻ bị cắt bên trái,
     khung chat lệch sát mép phải). Phải đứng SAU `font: inherit`. */
  font-size: 16px;
}
/* Nút gửi KÍCH THƯỚC CỐ ĐỊNH 48×44, neo đáy phải ô gõ - không cao theo ô. */
.vc-gui {
  flex: none; align-self: flex-end; background: var(--oliu); color: var(--chu-tren-oliu); border: none; border-radius: var(--bk);
  width: 48px; height: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* Icon máy bay giấy thay chữ "Gửi" (Bruno 27/09); nhãn "Gửi" ở aria-label. */
.vc-gui svg { width: 22px; height: 22px; }
/* Dòng Facebook (10/10, Bruno nghiệm thu: bấm ra đúng Facebook - nay muốn
   ĐẬM): chữ 700, màu chữ CHÍNH (tương phản như chữ thân bài), MỘT dòng ở
   iPhone 390pt - 14px vừa (đo trang thử 390: rộng chữ < khung), màn ≤380px
   xuống 13px (sàn Bruno đặt); hẹp hơn nữa thì xuống dòng chứ không cắt chữ. */
.vc-thoat {
  display: block; text-align: center; padding: 8px 12px; font-size: 14px; font-weight: 700;
  line-height: 1.35; color: var(--chu); text-decoration: none; border-top: 1px solid var(--vien);
}
@media (max-width: 380px) {
  .vc-thoat { font-size: 13px; padding: 8px 8px; }
}
.vc-thoat:hover { color: var(--oliu-sang); }
@media (max-width: 380px) {
  .vc-khung { right: 8px; bottom: 8px; left: 8px; width: auto; }
}
/* ≤1023px (điện thoại + iPad dọc) - KHUNG CHAT NỬA DƯỚI, BÁM BÀN PHÍM (Bruno
   27/09: "khung chat ở sát bàn phím luôn" · "khách vẫn nhìn được phần sản phẩm,
   chat chỉ chiếm 1 phần màn hình" · "co giãn theo nội dung tin nhắn").
   - hết bề ngang, cao VỪA nội dung (height auto), lớn dần tới trần `--vc-tran`
     rồi cuộn trong `.vc-tin`;
   - ĐÁY bám mép dưới vùng NHÌN THẤY: `video_chat.js` đặt `--vc-day` = mép dưới
     visualViewport (toạ độ layout viewport, nơi `fixed` neo vào) - trên iOS bàn
     phím không co layout viewport nên `bottom: 0` nằm DƯỚI bàn phím. Chưa có
     JS thì rơi về đáy màn (100dvh);
   - thanh ba nút tạm ẩn khi chat mở (đóng bằng ✕), trang phía trên vẫn cuộn.
   Đứng SAU khối ≤380px để thắng `right/bottom/left: 8px` của nó.
   (Bản trước cùng ngày - khung nổi cách đáy 80px trên thanh ba nút - đã thay.) */
@media (max-width: 1023px) {
  .vc-khung {
    /* Bề NGANG bám PHẦN MÀN ĐANG THẤY (visualViewport), như đáy bám bàn phím:
       trang bị phóng to (iPhone tự phóng khi chạm ô nhập chữ < 16px, và Safari
       GIỮ độ phóng ấy qua lần tải lại) thì `left:0; right:0` rộng bằng cả trang
       - khung lẹm hai mép màn (Bruno chụp iPhone 27/09, phóng 16/15,2). Không
       có biến thì về đúng bề ngang trang như cũ. */
    left: 0; left: var(--vc-trai, 0px); right: auto; bottom: auto;
    width: 100%; width: var(--vc-rong-thay, 100%);
    top: 100vh; top: var(--vc-day, 100dvh);
    /* `--vc-keo`: khoảng ngón tay đang kéo vạch đầu khung xuống.
       `--vc-thu` (09/10): = 1/độ phóng trang. Trang đang bị phóng to (Safari
       giữ độ phóng qua lần tải lại) thì khung dựng ở cỡ màn THẬT rồi thu lại
       đúng tỉ lệ ấy - chữ, nút, tiêu đề giữ nguyên cỡ trên màn như lúc chưa
       phóng; không khoá thu phóng của trang. Gốc neo trái-đáy: đáy vẫn sát
       bàn phím, mép trái vẫn ở mép vùng thấy. */
    transform-origin: 0 100%;
    transform: translateY(calc(-100% + var(--vc-keo, 0px))) scale(var(--vc-thu, 1));
    max-height: 50vh; max-height: var(--vc-tran, 50dvh);
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
  }
  /* TOÀN MÀN HÌNH: phủ đúng phần màn đang thấy (trên bàn phím). */
  .vc-khung--rong {
    height: 100vh; height: var(--vc-cao-thay, 100dvh);
    max-height: none; border-radius: 0;
  }
  /* Vạch kéo: vuốt đầu khung xuống là thu nhỏ (đang toàn màn thì về nửa). */
  /* Đệm trên 24px = vạch (8 + 4) + 12: hàng tiêu đề + hai nút nằm GIỮA vạch
     kéo và đường kẻ dưới (đệm dưới 12px). */
  .vc-dau { position: relative; padding-top: 24px; touch-action: none; cursor: grab; }
  .vc-dau::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    width: 40px; height: 4px; margin-left: -20px;
    border-radius: 999px; background: var(--vien-chip);
  }
  .vc-rong { display: flex; }
}