/* ============================================================================
 * AI STUDIO — HỆ THỐNG THIẾT KẾ DÙNG CHUNG (kế thừa TỪ Canvas)
 * Nạp trên MỌI trang nhóm "Sáng tạo nội dung" (canvas, gallery, image, video,
 * voice, character, ...). Toàn bộ studio DÙNG CHUNG 1 ngôn ngữ hình ảnh tím-mềm:
 *   • Con trỏ "rê" kiểu canvas (tím, mềm) trên vùng kéo/pan.
 *   • Context menu (chuột phải) .ais-ctx.
 *   • Nút / dropdown mềm .ais-soft*.
 * Token gốc lấy từ Canvas: accent #6366f1 (indigo) + #a855f7 (tím) + panel #171a24.
 * ⚠ Trang MỚI của studio BẮT BUỘC nạp file này + dùng .ais-* (xem rule aiapi-studio-ui.md).
 * ==========================================================================*/

:root {
  --ais-accent:  #6366f1;   /* indigo — viền hover, tick */
  --ais-accent2: #a855f7;   /* tím — icon, nhấn phụ */
  --ais-accent3: #c084fc;   /* tím sáng — điểm nhấn */
  --ais-panel:   #171a24;   /* nền dropdown/menu đặc */
  --ais-soft-fill:  rgba(99, 102, 241, .12);   /* nền hover mềm */
  --ais-soft-fill2: rgba(99, 102, 241, .2);    /* nền active/hover đậm */

  /* Con trỏ studio — mũi tên 3D tím mềm (PNG do user chọn, tách từ bộ pointer-paper-plane 651×326,
     con TRÁI). Cỡ 22×20 = 70% của bản 31×29 trước đó (user chốt 2026-08-03, lần giảm thứ 2).
     Hotspot 1 1 = đầu mũi TRÊN-TRÁI (đối diện khấc lõm, như con trỏ chuẩn ↖).
     grab = grabbing (1 con trỏ cho cả rê/pan) — ĐỔI CỠ = thay 2 biến này, không đụng chỗ khác. */
  --ais-grab:     url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAADmUlEQVR42p2Ty2sbZxTFZ8YxpptCwYvSZtHS7tL+A1kVCqW7PiE0u0L2pbReC6/6BEEWwvUDK0JBiRywrdaKYkd+6JHUY408eng0bz2th1tTC9t1bc/3nfKNSZq6tlF64CwGZn733HvncjvbeOngT3zdbqGia9jTVWTVEr5XivikpODtfB6DkoS+pSX0WRaEbBacYYAPBsFzF2mvi6GdHeyYOqhaAgwdRNdATAN79RoUy6BRVaHfqQo+VBW8ls9DYOCpKfC5HPhmEwJwRpHmJhqVMgiDMmvqiXUNlBUxdNCKDadRw75lYtvUkSrb+FHX8KlawhV1Ay/LMvpFEUK3e1IEAMeVFGzZFqj2byiMZ8y6sQwQywCtlkFrFRDbxGGtCrNeRUwr4VuthM9KRVxZXUX/5CR4Li/TyYrttn8m2NRPbBknts2nZp2Qsg1SLeO42UDXtlBPJo7GQqHW61xmDe/bJn63TZAn0B7BKFtPTcsWiKmDpFPHTiBgj3DpFC5bJubZnJ8Hegrsmr2bTDh0YrzU4iIR9EkZDNVrOLAMSk9De0jrPrNA8jrwIHZIxkaLGgML6TR5yzbRrNig50GfBT8BWibAlp6TgdVfQZcWQWamu7sjvvUvuWIR/M2b4IsFBJub7rbpRVBmVnyjCGTWQNMp0MU4ce5H/9qeme7GAwH7mte78gLn94NnzufxUbWCY5baumCuShFYWwVNJ0GXl0Dnfjnozkz/4Q+FNj8OBPRXPR4Pz8x5POBmZyFkJbxStvG42YBz3qJY0mSC0ujc4X5kdk8MhztfBYPWmxPjer/fvyuEw/OCx+PhmF3JMnhJwoCmYnizgSOW+qytbxSA2P1DcjtYvzMxob4RDkOQJPDDwyLPAv5H7AQ7HQhyFu+0m6g1aiCnoayLNRHk58h+56eR3Adeb/tSOAxOkuB+f65mZsCLj/CirmGu3XJPFxX7H7PtJ1ZAQ7c3Ez98kxi8fv2WwPWieBz8wgKEQgGf/7YF0qi7J+tCWWJ5HXT+gUPGx5UvhobmhRs3QnxPYDajSAR8VsJgtUyb7RZItQKw5GwMj9MgU+Gtls8nXo5GcfZMz5MogpdlXLItjDTqcNxfzwAKedDlReLcvdMc8/kyA15vSuCeR2wJmYwjPEqRq/I6VZUNOMUC6JoIJxbbVW75jauimOO5/6NQCPzsLAbiD4/eS6448eVF0og/PFy4d6/z7uioNdDpoCfw3xYwkjH/zt0yAAAAAElFTkSuQmCC") 1 1, auto;
  --ais-grabbing: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAADmUlEQVR42p2Ty2sbZxTFZ8YxpptCwYvSZtHS7tL+A1kVCqW7PiE0u0L2pbReC6/6BEEWwvUDK0JBiRywrdaKYkd+6JHUY408eng0bz2th1tTC9t1bc/3nfKNSZq6tlF64CwGZn733HvncjvbeOngT3zdbqGia9jTVWTVEr5XivikpODtfB6DkoS+pSX0WRaEbBacYYAPBsFzF2mvi6GdHeyYOqhaAgwdRNdATAN79RoUy6BRVaHfqQo+VBW8ls9DYOCpKfC5HPhmEwJwRpHmJhqVMgiDMmvqiXUNlBUxdNCKDadRw75lYtvUkSrb+FHX8KlawhV1Ay/LMvpFEUK3e1IEAMeVFGzZFqj2byiMZ8y6sQwQywCtlkFrFRDbxGGtCrNeRUwr4VuthM9KRVxZXUX/5CR4Li/TyYrttn8m2NRPbBknts2nZp2Qsg1SLeO42UDXtlBPJo7GQqHW61xmDe/bJn63TZAn0B7BKFtPTcsWiKmDpFPHTiBgj3DpFC5bJubZnJ8Hegrsmr2bTDh0YrzU4iIR9EkZDNVrOLAMSk9De0jrPrNA8jrwIHZIxkaLGgML6TR5yzbRrNig50GfBT8BWibAlp6TgdVfQZcWQWamu7sjvvUvuWIR/M2b4IsFBJub7rbpRVBmVnyjCGTWQNMp0MU4ce5H/9qeme7GAwH7mte78gLn94NnzufxUbWCY5baumCuShFYWwVNJ0GXl0Dnfjnozkz/4Q+FNj8OBPRXPR4Pz8x5POBmZyFkJbxStvG42YBz3qJY0mSC0ujc4X5kdk8MhztfBYPWmxPjer/fvyuEw/OCx+PhmF3JMnhJwoCmYnizgSOW+qytbxSA2P1DcjtYvzMxob4RDkOQJPDDwyLPAv5H7AQ7HQhyFu+0m6g1aiCnoayLNRHk58h+56eR3Adeb/tSOAxOkuB+f65mZsCLj/CirmGu3XJPFxX7H7PtJ1ZAQ7c3Ez98kxi8fv2WwPWieBz8wgKEQgGf/7YF0qi7J+tCWWJ5HXT+gUPGx5UvhobmhRs3QnxPYDajSAR8VsJgtUyb7RZItQKw5GwMj9MgU+Gtls8nXo5GcfZMz5MogpdlXLItjDTqcNxfzwAKedDlReLcvdMc8/kyA15vSuCeR2wJmYwjPEqRq/I6VZUNOMUC6JoIJxbbVW75jauimOO5/6NQCPzsLAbiD4/eS6448eVF0og/PFy4d6/z7uioNdDpoCfw3xYwkjH/zt0yAAAAAElFTkSuQmCC") 1 1, grabbing;

  /* Bàn tay pan (mở) — hiện khi RÊ KHUNG canvas: giữ chuột GIỮA, giữ Space, hoặc công cụ Di chuyển.
     PNG 24×24 vẽ từ path "pan_tool" + viền trắng; hotspot 12 14 = giữa lòng bàn tay.
     ⭐ MÀU CHÉP THẲNG TỪ --ais-grab, không tự chọn (user chốt 2026-08-04): khớp phân vi cả 3 kênh →
     L 0.79→0.94 · S 1.00 · hue 243, y hệt mũi tên. Chỉ dịch hue là CHƯA đủ: mũi tên vốn tím-lam NHẠT
     còn bàn tay bản đầu xanh ĐẬM (L 0.56) → cùng hue nhưng nhìn vẫn ra 2 bộ icon khác nhau.
     ⚠ Đổi màu lần nữa: KHÔNG gõ tay base64 — chạy `node tools/cursor/chep-bang-mau.js`
     (đọc CSS → khớp bảng màu → ghi lại → tự đo lại alpha/kích thước, sai thì TỪ CHỐI ghi).
     Chép tay từng làm PNG rỗng alpha, con trỏ biến mất im lặng. */
  --ais-hand: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC9UlEQVR42q2Vy08TQRzHN3rzaLyYEPViovgP6H/hWePBuzcTL+rNo2eCSIwhICok2oDlVeSN8hJqSwvlWcoulIjNbHe7bXd2vvrbZeyDQlvDJJPszuPzmf3Nb2YVpY7CGLttWdarfD4/aJrmc8bYReWsCoBznPO9nW1gawPYUwHbtleEEL8552umab74LzCt2jTNp4ZhPAE8+OY6sL0JWJb3Ts8AhK7rl+qCG4bxwHEAWrW260JcOFUCUzs9b6x5/YyxR7qu3wFwvlaBP77lwajm86UC6iO4FMgihMgwxu5XFei6PkefL8Oyr1UWrMeA3R0vVLFVr90wjNFa4r9AkyS0koDgUkDtJKA+zjmrKkin0yWCXweFmJcL1MQxgVG3ILlXiLnMHoITlATUvhL1+mzbNs9EQHCqFCIpoLF1C2iyFNCqKwmofWmxDkHxJsuVy5ivrRbgqyveysMhYGH+BAFj7J5t2xEhxKFlWW8ODw8bGGPzJKgVvvgDmJxwpMAozveHjgMhc54+VwiR45ynpUDC5aZWhI8LjI3y4wLO+T6lnNxMmed0oZULKsEp7h7cQX9fzh1fIggGgy9zucKJlVVmy0nw5bAHn52BCx/oz6G3x3DHlggURbkcCoVeF0vK414OjywDwSVgalJgfMxBYCiPPr+Jzk61ooBKQzQafSsl1eChn8DcLFz4cCCPL70WursO0NGhumM55xXT9EosFnsnJdXg01MCoyM2+vxZfP6Uwof3Glpbo6cKqFyLx+O+XNaTFAuiEQ8+PwdMjDsYHeFHcIauj0m0tW2ipSXshjiTyainnbHriURiIHskkXDaVIJ/mxYufDiQc+HdXR68tTWCpqZFN/OSyWSg2kG+oWnaSDYrXImEz3zHv5X39uhu3NvbE25ompuD7ljHEY7f779b9apobGy8parqIP2lEvHSNC7PMmqjMfRDo2RRFOVCrb/mm0NDQ880TfuaSqXCf6+UWKWaSqVCqqoGfD7fY0VRrsrJfwB3o5Z+RfLrigAAAABJRU5ErkJggg==") 12 14, grab;
}

/* ── Viền neon CHẠY VÒNG — báo "đang chạy" cho MỌI trang studio ────────────
   Dùng ở: canvas (ô prompt đang sinh ảnh, placeholder ảnh) · Bộ sưu tập (thẻ chờ đang tải lên).
   ⚠ Nằm ở ĐÂY (file dùng chung) chứ không phải studio.css: trang Bộ sưu tập KHÔNG nạp studio.css.
   Phần tử dùng nó phải có `position: relative` + `border-radius` riêng (::after kế thừa bo góc). */
@property --aist-neon-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.aist-neon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 6; pointer-events: none;
  background: conic-gradient(from var(--aist-neon-angle),
      rgba(34, 211, 238, 0) 0deg, #22d3ee 45deg, #a855f7 100deg, #f0abfc 150deg, rgba(34, 211, 238, 0) 220deg, rgba(34, 211, 238, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: aistNeonSpin 1.1s linear infinite;
}
@keyframes aistNeonSpin { to { --aist-neon-angle: 360deg; } }
/* Trình duyệt cũ không hỗ trợ @property (không xoay được) → vẫn nhấp nháy glow cho biết đang chạy */
@supports not (background: conic-gradient(from 1deg, #000, #000)) {
  .aist-neon { animation: aistNeonPulse 1s ease-in-out infinite; }
  .aist-neon::after { display: none; }
}
@keyframes aistNeonPulse { 0%, 100% { box-shadow: 0 0 0 1px #22d3ee, 0 0 22px rgba(34, 211, 238, .5); } 50% { box-shadow: 0 0 0 2px #a855f7, 0 0 30px rgba(168, 85, 247, .6); } }

/* ── Con trỏ canvas (0 sửa JS) ─────────────────────────────────────────────
 * Canvas đặt inline `.aist-stage { cursor: grab/grabbing }` bằng JS. Rule
 * !important dưới đây ĐÈ giá trị inline (inline không !important) → hiện con
 * trỏ tím. Khi JS gỡ (cursor:''), 2 selector không khớp → về default.        */
/* BASE: con trỏ studio phủ TOÀN canvas (kể cả khoảng trống + rê trên node), đè `cursor:default` của studio.css.
   Khi JS đặt inline cursor cho thao tác (move/resize/pointer) → inline thắng; grab/grabbing → 2 rule !important dưới thắng.
   ⭐ grab/grabbing = TRẠNG THÁI RÊ KHUNG (chuột giữa · giữ Space · công cụ Di chuyển) → đổi sang BÀN TAY
   (user chốt 2026-08-03). Nghỉ = mũi tên tím. Mẹo: chuỗi "cursor: grabbing;" KHÔNG chứa "cursor: grab;"
   nên 2 selector không đè nhau. Gallery vẫn xài --ais-grabbing (kéo-thả THẺ, khác nghĩa rê khung). */
.aist-stage { cursor: var(--ais-grab); }
.aist-stage[style*="cursor: grab;"]     { cursor: var(--ais-hand) !important; }
.aist-stage[style*="cursor: grabbing;"] { cursor: var(--ais-hand) !important; }

/* ⭐ TOÀN TRANG studio: JS 2 trang studio thêm class `aist-cursor` vào <body> → con trỏ mập phủ MỌI chỗ
   (sidebar, nền, header...) qua kế thừa. Nút/link/input GIỮ con trỏ chức năng (pointer/text) vì cursor
   riêng của chúng đè kế thừa. Muốn phủ CẢ nút → thêm `body.aist-cursor * { cursor: inherit }` (chưa bật). */
body.aist-cursor { cursor: var(--ais-grab); }

/* ── Context menu (chuột phải) — dùng chung canvas + gallery + trang mới ──── */
.ais-ctx-backdrop { position: fixed; inset: 0; z-index: 4000; }
.ais-ctx {
  position: fixed; z-index: 4001; min-width: 212px; max-width: 300px; padding: 6px;
  max-height: calc(100vh - 24px); overflow-y: auto;   /* danh sách folder dài (submenu Chuyển tới) không tràn mép */
  background: rgba(17, 24, 39, .98); backdrop-filter: blur(12px);
  border: 1px solid var(--cm-border-strong); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.ais-ctx-head { padding: 6px 11px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-text-dim); }
.ais-ctx button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--cm-text-secondary); font-size: var(--cm-font-sm); cursor: pointer; text-align: left; transition: var(--cm-transition-fast);
}
.ais-ctx button .ais-ctx-ic { width: 16px; text-align: center; color: var(--ais-accent2); flex: 0 0 16px; }
.ais-ctx button > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ais-ctx button .ais-ctx-arrow { margin-left: auto; font-size: 10px; color: var(--cm-text-muted); flex: 0 0 auto; }
.ais-ctx button:hover:not(:disabled) { background: var(--ais-soft-fill2); color: #fff; }
.ais-ctx button:disabled { opacity: .4; cursor: not-allowed; }
.ais-ctx button.danger:hover:not(:disabled) { background: var(--cm-danger); color: #fff; }
.ais-ctx button.danger:hover:not(:disabled) .ais-ctx-ic { color: inherit; }
.ais-ctx-sep { height: 1px; margin: 5px 6px; background: var(--cm-border); }
.ais-ctx-note { padding: 2px 11px 8px; font-size: var(--cm-font-xs); color: var(--cm-text-muted); line-height: 1.45; }

/* ── Nút / dropdown mềm dùng chung (base cho trang mới) ───────────────────── */
.ais-soft-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 14px; border-radius: var(--cm-radius-md);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--cm-border); color: var(--cm-text-primary);
  font-size: var(--cm-font-sm); font-weight: 600; cursor: pointer; transition: var(--cm-transition-fast);
}
.ais-soft-btn:hover:not(:disabled) { border-color: var(--ais-accent); background: var(--ais-soft-fill); }
.ais-soft-btn:disabled { opacity: .5; cursor: not-allowed; }
.ais-soft-btn .ais-btn-ic { color: var(--ais-accent2); font-size: 13px; flex: 0 0 auto; }
/* CTA mềm NHẤN tím — nút hành động chính kiểu canvas (vd "Thư mục mới") */
.ais-soft-btn.ais-accent { background: rgba(99, 102, 241, .12); border-color: rgba(99, 102, 241, .42); }
.ais-soft-btn.ais-accent .ais-btn-ic { color: var(--ais-accent3); }
.ais-soft-btn.ais-accent:hover:not(:disabled) { background: rgba(99, 102, 241, .22); border-color: var(--ais-accent); box-shadow: 0 4px 14px rgba(99, 102, 241, .3); transform: translateY(-1px); }
.ais-soft-btn.ais-sm { height: 34px; padding: 0 11px 0 12px; border-radius: 10px; }
/* <select> native khoác áo mềm — Gallery đã dùng class này nhưng TRƯỚC ĐÂY chưa có ai định nghĩa
   (studio.css chỉ có .aist-soft-select và KHÔNG nạp ở trang Gallery) → ô sắp xếp hiện ra dạng thô của OS. */
.ais-soft-select {
  appearance: none; -webkit-appearance: none;
  height: 34px; padding: 0 32px 0 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--cm-border); color: var(--cm-text-primary);
  font-size: var(--cm-font-sm); font-weight: 600; cursor: pointer; transition: var(--cm-transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.ais-soft-select:hover:not(:disabled) { border-color: var(--ais-accent); background-color: var(--ais-soft-fill); }
.ais-soft-select:focus { outline: none; border-color: var(--ais-accent); }
.ais-soft-select option { background: var(--ais-panel); color: var(--cm-text-primary); }
.ais-soft-menu {
  position: absolute; z-index: 61; min-width: 220px; max-height: 340px; overflow-y: auto; padding: 6px;
  background: var(--ais-panel); border: 1px solid var(--cm-border-strong); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.ais-soft-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px;
  background: 0; color: var(--cm-text-secondary); cursor: pointer; font-size: var(--cm-font-sm); text-align: left; transition: var(--cm-transition-fast);
}
.ais-soft-item:hover { background: rgba(99, 102, 241, .14); color: #fff; }
.ais-soft-item.active { background: var(--ais-soft-fill2); color: #fff; }

/* ── Section GẬP ĐƯỢC cho bảng tham số (Tạo ảnh / Tạo video …) ─────────────
   Dùng <details>/<summary> nên KHÔNG cần một dòng JS nào, và mở/gập vẫn chạy khi Vue chưa kịp mount.
   Lối <details>/<summary> này TỪNG dùng chung với bộ chuyển phần ở sidebar; sidebar đã đổi sang
   thanh biểu tượng (hub.css, 2026-08-06) nên nay .ais-sec đứng một mình, sửa ở đây không kéo theo ai. */
.ais-sec { border: 1px solid var(--cm-border); border-radius: var(--cm-radius-md); background: rgba(255, 255, 255, .025); overflow: hidden; }
.ais-sec + .ais-sec { margin-top: 12px; }
.ais-sec-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; cursor: pointer; list-style: none;
  font-size: var(--cm-font-sm); font-weight: 700; color: var(--cm-text-primary); transition: var(--cm-transition-fast);
}
.ais-sec-head::-webkit-details-marker { display: none; }
.ais-sec-head:hover { background: var(--ais-soft-fill); }
.ais-sec-head .ais-sec-ic { color: var(--ais-accent2); font-size: 13px; width: 15px; text-align: center; }
.ais-sec-note { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--cm-text-muted); }
.ais-sec-caret { color: var(--cm-text-muted); font-size: 11px; transition: transform .18s ease; }
.ais-sec[open] > .ais-sec-head .ais-sec-caret { transform: rotate(180deg); }
.ais-sec[open] > .ais-sec-head { border-bottom: 1px solid var(--cm-border); }
.ais-sec-body { padding: 14px 14px 15px; }

/* Chip dạng link (vd chip dung lượng ở Canvas → trang mua gói) */
.aist-chip-link { text-decoration: none; color: inherit; }
.aist-chip-link:hover { border-color: var(--ais-accent) !important; background: var(--ais-soft-fill) !important; }

/* Fade transition dùng chung cho menu/context */
.ais-fade-enter-active, .ais-fade-leave-active { transition: opacity .14s ease, transform .14s ease; }
.ais-fade-enter-from, .ais-fade-leave-to { opacity: 0; transform: translateY(-6px) scale(.98); }

/* Dải cảnh báo "ô này chưa gửi đi được" — dùng CHUNG cho mọi trang studio.
   ⚠ Đặt ở ĐÂY chứ không ở studio.css: studio.css chỉ nạp ở Canvas, nên để trong đó thì trang Tạo ảnh
   gắn class vào mà không có style nào — kiểu hỏng câm đã dính một lần với .ais-soft-select. */
.ais-warn {
    display: flex; gap: 7px; align-items: flex-start; margin: 2px 0 8px; padding: 8px 10px;
    border-radius: 9px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35);
    color: #fcd34d; font-size: var(--cm-font-xs, 12px); line-height: 1.45;
}
.ais-warn i { flex: 0 0 auto; margin-top: 2px; }

/* ⭐ THANH CUỘN TÔNG STUDIO — phủ TOÀN BỘ trang studio, không phải gắn class từng chỗ.
   Neo vào `body.aist-cursor` (class mà mọi trang studio đã tự thêm cho con trỏ tím) → trang studio MỚI
   được thừa hưởng miễn phí, 0 dòng sửa. Cùng lý do và cùng chỗ neo với con trỏ: một thứ "signature"
   phủ cả bộ thì phải đi theo bộ, đừng để mỗi trang tự nhớ.
   Mặc định của Chrome là xám hệ điều hành + 2 nút mũi tên ▲▼ — lạc hẳn tông tím mềm của Canvas. */
body.aist-cursor { scrollbar-width: thin; scrollbar-color: rgba(139, 116, 246, .55) transparent; }
body.aist-cursor ::-webkit-scrollbar { width: 10px; height: 10px; }
body.aist-cursor ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .035); border-radius: 999px; }
/* viền trong suốt + background-clip: thân cuộn nhìn mảnh 6px mà vùng bắt chuột vẫn rộng 10px */
body.aist-cursor ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ais-accent), var(--ais-accent2));
    background-clip: padding-box; border: 2px solid transparent; border-radius: 999px;
}
body.aist-cursor ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #818cf8, var(--ais-accent3));
    background-clip: padding-box; border: 2px solid transparent;
}
body.aist-cursor ::-webkit-scrollbar-thumb:active { background: var(--ais-accent3); background-clip: padding-box; border: 2px solid transparent; }
/* Windows vẽ ▲▼ ở hai đầu, nhìn như nút spinner đè lên thanh → bỏ hẳn */
body.aist-cursor ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body.aist-cursor ::-webkit-scrollbar-corner { background: transparent; }

/* ⭐ TRÌNH PHÁT TIẾNG `.ais-audio` — thay <audio controls> mặc định của trình duyệt.
   Lý do phải tự dựng: thanh điều khiển gốc là widget của Chrome, nền TRẮNG, KHÔNG style được
   (::-webkit-media-controls chỉ đổi vặt và mỗi trình duyệt một kiểu) → nó là mảng sáng chói duy nhất
   trong cả bộ giao diện tối, ngay giữa chỗ khách nhìn nhiều nhất.
   Đặt ở studio-ui.css để mảng nào cần phát tiếng sau này (Bộ sưu tập, Phụ đề, Dịch phim) dùng lại. */
.ais-audio { display: flex; align-items: center; gap: 10px; padding: 8px 4px 9px 0; }
.ais-audio-btn {
    flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
    background: linear-gradient(135deg, var(--ais-accent), var(--ais-accent2));
    box-shadow: 0 4px 14px rgba(99, 102, 241, .34); transition: transform .12s ease, box-shadow .12s ease;
}
.ais-audio-btn:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(168, 85, 247, .45); }
.ais-audio-btn:active { transform: scale(.96); }
.ais-audio.err .ais-audio-btn { background: linear-gradient(135deg, #b45309, #dc2626); box-shadow: none; }
.ais-audio-mid { flex: 1 1 auto; min-width: 0; }
/* Vùng bấm cao 14px nhưng vạch chỉ dày 5px: ngón tay/chuột bắt dễ mà nhìn vẫn mảnh */
.ais-audio-bar {
    position: relative; height: 14px; display: flex; align-items: center; cursor: pointer;
}
.ais-audio-bar::before {
    content: ''; position: absolute; left: 0; right: 0; height: 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}
.ais-audio-fill {
    position: relative; height: 5px; border-radius: 999px; min-width: 0;
    background: linear-gradient(90deg, var(--ais-accent), var(--ais-accent3, #c084fc));
}
.ais-audio-dot {
    position: absolute; top: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
    background: #fff; transform: translateY(-50%) scale(0); transition: transform .13s ease;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .45);
}
.ais-audio:hover .ais-audio-dot, .ais-audio.playing .ais-audio-dot { transform: translateY(-50%) scale(1); }
.ais-audio-time {
    display: flex; justify-content: space-between; margin-top: 3px;
    font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--cm-text-muted);
}
.ais-audio audio { display: none; }
.aist-mention { position: fixed; z-index: 10000; min-width: 150px; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; background: #12141d; border: 1px solid var(--cm-border-strong); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); padding: 5px; }
.aist-mention-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--cm-text-primary); cursor: pointer; }
.aist-mention-item i { color: #67e8f9; font-size: 11px; }
.aist-mention-item.active { background: rgba(34, 211, 238, .16); color: #eaffff; }
.aist-mention-the { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--cm-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aigen-tc-ten { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px; border-radius: var(--cm-radius-full); border: 1px solid var(--cm-border); background: rgba(255, 255, 255, .06); color: var(--cm-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; cursor: pointer; }
.aigen-tc-ten:hover { color: var(--cm-text-primary); border-color: var(--cm-border-strong); }
.aigen-tc { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aigen-tc-o { position: relative; width: 92px; height: 62px; border-radius: 8px; border: 1px solid var(--cm-border); background: rgba(255, 255, 255, .04); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.aigen-tc-o img { width: 100%; height: 100%; object-fit: cover; }
.aigen-tc-o > i { font-size: 20px; color: var(--cm-text-muted); }

.aiapi-hub {
    --cm-text-muted:     #8494ab;
    --cm-text-secondary: #a3b0c2;
}