/* Hub AI API — sidebar + docs. Tone violet -> cyan (#7c3aed -> #06b6d4). */
.aiapi-sidebar {
    background: var(--cm-gradient-card, #111827);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg, 16px);
    overflow: hidden;
    align-self: flex-start;
    position: sticky;
    top: 90px;
}
/* Mobile: sidebar xếp trên nội dung, KHÔNG dính (khớp breakpoint cm-sidebar-layout 1024px).
   ⚠ `width` phải viết 0-2-0 cho BẰNG luật bề rộng 300px ở dưới: @media KHÔNG cộng độ đặc hiệu,
   để `.aiapi-sidebar` trơn (0-1-0) là cột kẹt cứng 300px trên điện thoại. */
@media (max-width: 1024px) {
    .aiapi-sidebar { position: static; top: auto; }
    .cm-sidebar-left.aiapi-sidebar { width: 100%; }
}
/* ===== THANH BIỂU TƯỢNG 5 PHẦN + KHUNG MỤC (user chốt mẫu B, 2026-08-06) ====================
   Thay bộ chuyển <details> gập kín cũ (và luôn cả tone --studio: nay MỖI phần một màu, không
   còn chuyện riêng Studio được tô).

   Vì sao đổi: 5 phần nằm trong một ngăn gập thì khách KHÔNG biết hệ có bao nhiêu thứ, phải bấm
   mới thấy — mà đúng cái bề rộng đó mới là thứ đáng khoe. Đo prod: cột cao **624px** so với
   735px của bản cũ ⇒ bày ra được cả 5 phần mà vẫn NGẮN hơn bản đang giấu đi.

   Cả 5 danh sách in SẴN vào DOM rồi ẩn/hiện bằng `hidden` ⇒ đổi phần KHÔNG tải lại trang.
   Đắt thêm ~3KB HTML mỗi trang, đổi lại khách dạo hết hệ sinh thái trong vài giây mà không rời
   chỗ đang đứng. Thêm phần thứ 6 thì cột KHÔNG dài thêm milimet nào — chỉ thêm 1 ô trên thanh.

   Màu lấy ở aiapi_part_color() (sổ gốc platform.php) → PHP gắn --pc/--pcr vào style= từng ô.
   Khai giá trị mặc định ngay dưới đây: `rgba(var(--pcr), …)` mà --pcr trống là thuộc tính HỎNG
   CÂM (mất luôn cả viền), nên không bao giờ để nó phụ thuộc hoàn toàn vào PHP. */
.aiapi-sidebar { --pc: #6366f1; --pcr: 99,102,241; }
.cm-sidebar-left.aiapi-sidebar { width: 300px; }
.aiapi-sidebar { border-color: rgba(var(--pcr), .3); }

.aiapi-nav { display: flex; align-items: stretch; min-height: 300px; }

.aiapi-rail {
    flex: 0 0 70px; display: flex; flex-direction: column; gap: 5px; padding: 8px 6px;
    border-right: 1px solid var(--cm-border); background: rgba(0,0,0,.2);
}
.aiapi-rail-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 8px 2px; border: 1px solid transparent; border-radius: 10px;
    background: none; cursor: pointer; color: var(--cm-text-dim); font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.aiapi-rail-btn > i { font-size: 16px; }
/* Nhãn chữ 8.5px DƯỚI icon. Icon trần bắt khách đoán, mà đây là khách phổ thông chứ không phải
   dân dev quen thanh hoạt động của VSCode; `title=` chỉ là lớp đỡ, trên cảm ứng nó không tồn tại. */
.aiapi-rail-btn > span { font-size: 8.5px; font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; }
.aiapi-rail-btn:hover { background: rgba(255,255,255,.05); color: var(--cm-text-primary); }
.aiapi-rail-btn.on { background: rgba(var(--pcr), .17); border-color: rgba(var(--pcr), .42); color: var(--pc); }
.aiapi-rail-btn.on::before {
    content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--pc);
}
.aiapi-rail-btn.off { opacity: .42; }
/* Chấm = "anh ĐANG Ở ĐÂY"; ô sáng = "anh đang XEM phần này". Hai việc khác nhau: bấm quanh thanh
   để dạo thì ô sáng chạy theo, còn chấm ở nguyên chỗ trang đang mở — không thì bấm vài cái là
   khách mất dấu mình đang đứng đâu. */
.aiapi-rail-dot {
    position: absolute; top: 6px; right: 8px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--pc); box-shadow: 0 0 6px var(--pc);
}

.aiapi-pane { flex: 1 1 auto; min-width: 0; padding: 8px 7px; }
.aiapi-pane-title {
    display: flex; align-items: center; gap: 7px; padding: 4px 6px 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pc);
}
.aiapi-pane-empty { padding: 14px 8px; font-size: 12px; color: var(--cm-text-muted); line-height: 1.6; }

.aiapi-nitem {
    display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px;
    color: var(--cm-text-secondary); text-decoration: none; font-size: 13.5px;
    transition: background .15s, color .15s;
}
.aiapi-nitem > i { width: 16px; text-align: center; font-size: 12.5px; color: var(--cm-text-dim); flex: 0 0 auto; }
.aiapi-nitem > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapi-nitem:hover { background: rgba(255,255,255,.05); color: var(--cm-text-primary); }
.aiapi-nitem.active { background: rgba(var(--pcr), .16); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--pcr), .3); }
.aiapi-nitem.active > i { color: var(--pc); }
.aiapi-nitem.soon { opacity: .45; cursor: default; }
.aiapi-nitem.soon:hover { background: transparent; color: var(--cm-text-secondary); }

/* Vạch cắt nhóm trong 1 phần (Studio có 4 nhóm: bàn làm việc → tạo → sửa → cất). */
.aiapi-ngrp {
    display: flex; align-items: center; gap: 8px; margin: 9px 6px 3px;
    font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 700; color: var(--cm-text-muted); user-select: none;
}
.aiapi-ngrp > span { white-space: nowrap; }
.aiapi-ngrp::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--cm-border); }

.aiapi-soon-badge {
    margin-left: auto; font-size: 9px; padding: 1px 7px; border-radius: 999px;
    background: rgba(148,163,184,.16); color: var(--cm-text-muted); font-weight: 600; flex: 0 0 auto;
}
.aiapi-side-do {
    padding: 10px 12px 2px;
    border-top: 1px solid var(--cm-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aiapi-do-o {
    display: block;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(148, 163, 184, .08);
    border: 1px solid var(--cm-border);
    text-decoration: none;
    color: inherit;
}

.aiapi-do-o:hover { background: rgba(148, 163, 184, .16); }

.aiapi-do-nhan {
    display: block;
    font-size: 10px;
    color: var(--cm-text-muted);
    letter-spacing: .02em;
}

.aiapi-do-nhan i { width: 12px; margin-right: 4px; }

.aiapi-do-so {
    display: block;
    font-size: 12px;
    margin-top: 1px;
    color: var(--cm-text);
}

.aiapi-do-thanh {
    display: block;
    height: 3px;
    margin-top: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .22);
    overflow: hidden;
}

.aiapi-do-thanh > i {
    display: block;
    height: 100%;
    background: var(--cm-primary);
    border-radius: 999px;
}

.aiapi-side-off .aiapi-side-do { display: none; }

.aiapi-sidebar-foot {
    padding: 12px 16px;
    font-size: 11px;
    color: var(--cm-text-muted);
    border-top: 1px solid var(--cm-border);
    display: flex;
    gap: 6px;
    line-height: 1.4;
}

/* ===== THU GỌN CỘT TRÁI — CHỈ PC (≥1025px) ==========================================
   Thu xong cột KHÔNG biến mất hẳn mà co còn đúng 1 nút. Nút đó vẫn nằm TRONG DÒNG CHẢY
   (không phải position:fixed) — đây là chỗ dễ làm sai nhất: nút fixed ở mép trái sẽ đè lên
   nội dung ngay khi cửa sổ hẹp hơn 1400px (lúc đó lề trang chỉ còn đúng phần đệm 48px), mà
   muốn chừa chỗ cho nó thì lại phải đoán bề rộng — đằng nào cũng mất chỗ, thà để nó tự chiếm.
   Giá phải trả: 38px + khe 10px. Đổi lại khách được thêm 256px bàn làm việc.

   ⚠ TOÀN BỘ nằm trong @media min-width:1025px. Dưới mốc đó sidebar vốn ĐÃ là ngăn kéo
   (components.css §3b) — thu gọn chồng lên ngăn kéo là hai cơ chế giẫm chân nhau. Nhờ vậy
   khách thu ở PC rồi bóp nhỏ cửa sổ vẫn ra ngăn kéo bình thường, dù lớp .aiapi-side-off
   còn nguyên trên <html>. */
.aiapi-side-tools { display: none; }

@media (min-width: 1025px) {
    .aiapi-side-tools { display: flex; justify-content: flex-end; padding: 6px 6px 0; }
    .aiapi-side-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; padding: 0; cursor: pointer;
        border: 1px solid var(--cm-border); border-radius: 8px;
        background: rgba(255,255,255,.03); color: var(--cm-text-muted);
        font-size: 11px; line-height: 1;
        transition: background .18s, border-color .18s, color .18s;
    }
    /* MỘT glyph quay 180° cho cả hai chiều, không phải hai icon: bộ FontAwesome của web là BẢN
       CẮT GỌN và `fa-chevron-left` KHÔNG nằm trong đó — dùng bừa là ra ô trống, muốn có thì phải
       dựng lại font + đập cache. Xem docs/frontend-css-reference.md. */
    .aiapi-side-toggle i { transition: transform .22s ease; transform: rotate(180deg); }
    .aiapi-sidebar { transition: width .22s ease, border-color .22s ease, background .22s ease; }

    .aiapi-side-off .cm-sidebar-layout { gap: 10px; }
    /* 0-3-0 để thắng `.cm-sidebar-left{width:280px}` của components.css (0-1-0, nạp trước). */
    .aiapi-side-off .cm-sidebar-left.aiapi-sidebar {
        width: 38px; background: none; border-color: transparent; box-shadow: none;
    }
    .aiapi-side-off .aiapi-sidebar > :not(.aiapi-side-tools) { display: none; }
    .aiapi-side-off .aiapi-side-tools { padding: 0; justify-content: center; }
    .aiapi-side-off .aiapi-side-toggle {
        width: 34px; height: 54px; font-size: 13px; border-radius: 10px;
        color: var(--cm-text-primary);
        background: linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(6,182,212,.18) 100%);
        border-color: rgba(124,58,237,.4);
    }
    .aiapi-side-off .aiapi-side-toggle i { transform: none; }
    .aiapi-side-off .aiapi-sidebar--studio .aiapi-side-toggle {
        background: linear-gradient(135deg, rgba(99,102,241,.28) 0%, rgba(168,85,247,.2) 100%);
        border-color: rgba(99,102,241,.45);
    }
    /* ⚠ Hover để CUỐI KHỐI: cùng độ đặc hiệu 0-2-0 với luật lúc đã thu, đứng trước là bị nuốt
       (nút thu gọn rê vào không đổi màu, trông như hỏng). */
    .aiapi-side-toggle:hover {
        background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.5); color: var(--cm-text-primary);
    }
    .aiapi-sidebar--studio .aiapi-side-toggle:hover {
        background: rgba(99,102,241,.18); border-color: var(--ais-accent, #6366f1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aiapi-sidebar, .aiapi-side-toggle i { transition: none; }
}

/* Docs page — mỗi mục là 1 KHUNG (card) */
.aiapi-doc-block {
    background: var(--cm-gradient-card, #111827);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg, 16px);
    padding: 18px 22px 22px;
    margin-bottom: 18px;
}
.aiapi-doc-block h2 {
    font-size: 17px;
    color: var(--cm-text-primary);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(124,58,237,.5);
    display: inline-block;
}
.aiapi-code {
    position: relative;
    background: #0b1020;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md, 12px);
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #d1d5db;
    line-height: 1.55;
    white-space: pre;
    margin: 8px 0;
}
.aiapi-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(124,58,237,.4);
    color: #c4b5fd;
    border-radius: 7px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--cm-font-family, sans-serif);
    transition: .15s;
    z-index: 2;
}
.aiapi-copy-btn:hover { background: rgba(124,58,237,.35); color: #fff; }
.aiapi-copy-btn.done { background: rgba(16,185,129,.25); border-color: rgba(16,185,129,.5); color: #6ee7b7; }
.aiapi-code .k { color: #c084fc; }
.aiapi-code .s { color: #7dd3fc; }
.aiapi-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.aiapi-tab {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--cm-border);
    background: transparent;
    color: var(--cm-text-secondary);
    cursor: pointer;
    font-size: 13px;
}
.aiapi-tab.active { background: linear-gradient(135deg, #7c3aed, #06b6d4); color: #fff; border-color: transparent; }
.aiapi-ep {
    display: inline-block;
    background: rgba(6,182,212,.12);
    border: 1px solid rgba(6,182,212,.35);
    color: #67e8f9;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
}
.aiapi-method { font-weight: 700; color: #34d399; }

/* Thống kê dashboard khách: pills + lưới biểu đồ */
.aiapi-stat-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.aiapi-pill { background: rgba(255,255,255,.03); border: 1px solid var(--cm-border); border-radius: 12px; padding: 12px 14px; }
.aiapi-pill-val { display: block; font-size: 19px; font-weight: 700; color: var(--cm-text-primary, #e5e7eb); }
.aiapi-pill-lbl { display: block; font-size: 11px; color: var(--cm-text-muted); margin-top: 2px; }
.aiapi-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.aiapi-chart-lbl { font-size: 12px; color: var(--cm-text-muted); margin: 0 0 4px; }
@media (max-width: 720px) {
    .aiapi-stat-pills { grid-template-columns: repeat(2, 1fr); }
    .aiapi-charts-grid { grid-template-columns: 1fr; }
    .aiapi-stats-grid { grid-template-columns: 1fr !important; }
}

/* Trang quản lý key — bảng + modal tạo/sửa */
.aiapi-key-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.aiapi-kf { text-align: left; }
.aiapi-kf-row { margin-bottom: 15px; }
.aiapi-kf-row > label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--cm-text-secondary, #cbd5e1); }
.aiapi-kf-row > label span { font-weight: 400; color: var(--cm-text-muted); }
.aiapi-kf .cm-modal-input { width: 100%; box-sizing: border-box; margin: 0; display: block; }
.aiapi-kf-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--cm-text-secondary, #cbd5e1); cursor: pointer; margin-bottom: 8px; }
.aiapi-kf-check input { width: 16px; height: 16px; flex: 0 0 auto; }
.aiapi-kf-hint { font-size: 11px; color: var(--cm-text-muted); margin-top: 5px; line-height: 1.45; }
.aiapi-kf-models { max-height: 148px; overflow: auto; border: 1px solid var(--cm-border); border-radius: 8px; padding: 8px 12px; }
.aiapi-kf-models label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 3px 0; font-weight: 400; color: var(--cm-text-primary, #e5e7eb); cursor: pointer; }
.aiapi-kf-models input { width: 15px; height: 15px; flex: 0 0 auto; }

/* Bộ lọc trang nhật ký */
.aiapi-log-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aiapi-log-filters .cm-form-select { width: auto; min-width: 130px; padding: 7px 12px; font-size: 13px; }