/* File: wwwroot/custom-pane.css */
/* AI Custom – kho dữ liệu RAG riêng cho user, đồng bộ tone Train Platform */

/* Pane bao ngoài – chiếm full chiều ngang, vẫn chừa padding 2 bên */
.custom-pane{
    width: 100%;
    max-width: none;          /* bỏ giới hạn 1180px */
    margin: 0;                /* bỏ canh giữa */
    padding: 18px 20px 32px;  /* padding 2 bên để card không dính sát mép */
    box-sizing: border-box;   /* đảm bảo tính cả padding vào width */
}
  
/* Card chính – giống tp-card để đồng bộ với Quik AI / Train Platform */
.custom-pane .ac-card{
  border-radius:24px;
  padding:18px 18px 14px;

  /* KHÔNG cắt nội dung bên trong (dropdown filter cần tràn ra ngoài) */
  /* overflow:hidden; */
  overflow:visible;

  border:1px solid var(--border-soft,rgba(148,163,184,.35));
  box-shadow:0 18px 40px rgba(15,23,42,.28);
  background:
    radial-gradient(1200px 700px at 0% -20%, rgba(59,130,246,.18), transparent),
    radial-gradient(1200px 700px at 100% -20%, rgba(236,72,153,.18), transparent),
    var(--card);
  display:flex;
  flex-direction:column;
}
  
  @media (prefers-color-scheme: light){
    .custom-pane .ac-card{
      background:
        radial-gradient(1200px 700px at 0% -20%, rgba(59,130,246,.20), transparent),
        radial-gradient(1200px 700px at 100% -20%, rgba(236,72,153,.16), transparent),
        linear-gradient(180deg,#ffffff,#f5f7ff);
    }
  }
  
  /* =================== HERO =================== */
  
  .ac-hero{
    margin:16px 16px 10px;
    padding:12px 16px 14px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(15,23,42,.88));
    border:1px solid rgba(148,163,184,.6);
    box-shadow:0 12px 28px rgba(15,23,42,.65);
    color:#e5e7eb;
  }
  
  @media (prefers-color-scheme: light){
    .ac-hero{
      background:linear-gradient(135deg,#ffffff,#eef2ff);
      border-color:rgba(148,163,184,.5);
      box-shadow:0 12px 26px rgba(15,23,42,.20);
      color:var(--text,#0f172a);
    }
  }
  
  .ac-hero-main{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  
  .ac-hero-text{
    flex:1 1 0;
    min-width:0;
    max-width:none;   /* bỏ bó hẹp 620px để mô tả dàn ngang hết section */
  }
  
  /* Pill title: tone gọn, đồng bộ với hero card ở cả light/dark */
  .ac-label-pill{
    --lp-bg: linear-gradient(135deg, rgba(15,23,42,.30), rgba(30,41,59,.20));
    --lp-border: rgba(148,163,184,.55);
    --lp-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(2,6,23,.34);
    --lp-fg: #e2e8f0;
    --lp-brand-bg: rgba(37,99,235,.20);
    --lp-brand-border: rgba(96,165,250,.55);
    --lp-brand-fg: #dbeafe;
    --lp-title-fg: #f8fafc;

    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    padding:7px 12px;
    border-radius:999px;
    background:var(--lp-bg);
    color:var(--lp-fg);
    border:1px solid var(--lp-border);
    box-shadow:var(--lp-shadow);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    white-space:nowrap;
    margin-bottom:8px;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }

  .ac-label-pill > span:first-child{
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--lp-brand-border);
    background:var(--lp-brand-bg);
    color:var(--lp-brand-fg);
    font-weight:900;
    letter-spacing:.06em;
  }

  .ac-label-pill > span:last-child{
    color:var(--lp-title-fg);
    font-weight:900;
    letter-spacing:.10em;
  }
  
  @media (prefers-color-scheme: light){
    .ac-label-pill{
      --lp-bg: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,242,255,.92));
      --lp-border: rgba(148,163,184,.60);
      --lp-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(15,23,42,.14);
      --lp-fg: #0f172a;
      --lp-brand-bg: rgba(37,99,235,.10);
      --lp-brand-border: rgba(37,99,235,.35);
      --lp-brand-fg: #1d4ed8;
      --lp-title-fg: #0f172a;
    }
  }

  html[data-theme="light"] .ac-label-pill{
    --lp-bg: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,242,255,.92));
    --lp-border: rgba(148,163,184,.60);
    --lp-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(15,23,42,.14);
    --lp-fg: #0f172a;
    --lp-brand-bg: rgba(37,99,235,.10);
    --lp-brand-border: rgba(37,99,235,.35);
    --lp-brand-fg: #1d4ed8;
    --lp-title-fg: #0f172a;
  }

  html[data-theme="dark"] .ac-label-pill{
    --lp-bg: linear-gradient(135deg, rgba(15,23,42,.30), rgba(30,41,59,.20));
    --lp-border: rgba(148,163,184,.55);
    --lp-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(2,6,23,.34);
    --lp-fg: #e2e8f0;
    --lp-brand-bg: rgba(37,99,235,.20);
    --lp-brand-border: rgba(96,165,250,.55);
    --lp-brand-fg: #dbeafe;
    --lp-title-fg: #f8fafc;
  }
  
  .ac-title{
    margin:0 0 6px;
    font-size:22px;
    font-weight:900;
    letter-spacing:.25px;
    text-shadow:0 1px 0 rgba(15,23,42,.5);
  }
  
  @media (prefers-color-scheme: light){
    .ac-title{
      text-shadow:none;
    }
  }
  
  .ac-subtitle{
    margin:0 0 4px;
    font-size:14px;
    line-height:1.7;
    opacity:.96;
  }
  
  .ac-subtitle code{
    font-family:var(--mono,ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
    font-size:13px;
    padding:1px 6px;
    border-radius:999px;
    background:rgba(15,23,42,.35);
    color:#e5e7eb;
  }
  
  @media (prefers-color-scheme: light){
    .ac-subtitle code{
      background:rgba(15,23,42,.07);
      color:#0f172a;
    }
  }
  
  /* Dòng summary do app.js set text */
  .ac-summary{
    margin:6px 0 0;
    font-size:12px;
    opacity:.92;
  }
  
  /* Actions bên phải */
  .ac-hero-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-end;
    min-width:220px;
  }
  
  .ac-btn{
    padding:9px 14px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
  }
  
  .ac-btn.ghost{
    background:#0b1120;
    color:#e5e7eb;
    border-color:rgba(148,163,184,.75);
  }
  
  @media (prefers-color-scheme: light){
    .ac-btn.ghost{
      background:#ffffff;
      color:#111827;
    }
  }
  
  .ac-btn.primary{
    background:linear-gradient(135deg,var(--primary,#3b82f6),var(--primary-2,#60a5fa));
    color:var(--primary-ink,#ffffff);
    border-color:transparent;
    box-shadow:0 10px 24px rgba(59,130,246,.35);
  }
  
  .ac-btn.loading{
    opacity:.6;
    pointer-events:none;
  }
  
  
  /* =================== GENERIC SECTION =================== */
  
  .ac-section{
    padding:18px 20px;
    margin:12px 16px;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 12px 30px rgba(15,23,42,.18);
    color:#0f172a;
  }
  
  .ac-section + .ac-section{
    margin-top:10px;
  }
  
  .ac-section-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
 
    /* Header section có nút upload bên phải */
    .ac-section-head-with-upload{
      align-items:stretch;
      gap:16px;
    }
  
    .ac-section-head-with-upload .ac-section-titles{
      flex:0 0 auto;
      max-width:420px;
    }
  
    .ac-section-upload-wrap{
      flex:1 1 auto;
      display:flex;
      align-items:center;
      margin-left:auto;
    }
  
    /* Nút upload chiếm hết phần ngang còn lại */
    .ac-section-upload-wrap .ac-upload-zone{
      width:100%;
      box-sizing:border-box;
    }
  
    @media (max-width:720px){
      .ac-section-head-with-upload{
        flex-direction:column;
        align-items:stretch;
      }
  
      .ac-section-upload-wrap{
        margin-left:0;
        width:100%;
      }
  
      .ac-section-upload-wrap .ac-upload-zone{
        width:100%;
      }
    }

  .ac-section-head-slim{
    margin-bottom:12px;
  }
  
  .ac-section-titles{
    max-width:560px;
  }
  
  .ac-section-title{
    margin:0 0 4px;
    font-size:17px;
    font-weight:800;
    color:#0b1120;
  }
  
  .ac-section-desc{
    margin:0;
    font-size:13px;
    color:#374151;
    line-height:1.6;
  }
  
  .ac-section-desc code{
    font-family:var(--mono);
    font-size:12px;
    color:#111827;
  }
  
  .ac-section-actions{
    display:flex;
    gap:8px;
    align-items:center;
  }
  
  .ac-section-actions-right{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  
  
  /* =================== UPLOAD ZONE =================== */
  
 
  
  .ac-upload-zone{
    border-radius:var(--radius-sm,14px);
    border:1px dashed var(--border,rgba(148,163,184,.8));
    background:linear-gradient(180deg,#f9fafb,#eef2ff);
    padding:14px 14px 12px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#0f172a;
    cursor:pointer;
    transition:
      background .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      transform .06s ease;
  }
  
  .ac-upload-zone:hover{
    border-style:solid;
    border-color:rgba(59,130,246,.9);
    box-shadow:
      0 0 0 1px rgba(59,130,246,.35),
      0 10px 24px rgba(15,23,42,.16);
    transform:translateY(-1px);
  }
  
  /* trạng thái drag over – app.js thêm class over */
  .ac-upload-zone.over{
    border-style:solid;
    border-color:rgba(59,130,246,1);
    box-shadow:
      0 0 0 1px rgba(59,130,246,.45),
      0 14px 32px rgba(15,23,42,.22);
    background:linear-gradient(180deg,#e0f2fe,#e5edff);
  }
  
  .ac-upload-icon{
    font-size:24px;
    flex-shrink:0;
  }
  
  .ac-upload-title{
    font-weight:700;
    font-size:14px;
    color:#0b1120;
  }
  
  .ac-upload-desc{
    margin:4px 0 0;
    font-size:13px;
    color:#374151;
    line-height:1.6;
  }
  
  .ac-upload-desc strong{
    color:#0b1120;
  }
  
  
  /* input file ẩn – chỉ dùng JS */
  .ac-file-input-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    border:0;
    clip:rect(0,0,0,0);
    overflow:hidden;
  }
  
  /* =================== LIST FILE =================== */
  
  .ac-list-shell{
    border-radius:var(--radius-sm,14px);
    border:1px solid var(--border,rgba(148,163,184,.8));
    background:#ffffff;
    box-shadow:0 14px 32px rgba(15,23,42,.18);
    overflow:hidden;
  }
  
  .ac-list-head{
    padding:10px 12px;
    border-bottom:1px solid rgba(148,163,184,.35);
    background:#e5edff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .ac-list-head-left{
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .ac-list-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#1f2937;
  }
  
  .ac-list-count{
    font-size:13px;
    font-weight:700;
    color:#1e40af;
  }
  
    /* Tổng dung lượng toàn kho, cạnh số file */
    .ac-list-size{
      font-size:12px;
      font-weight:500;
      color:#374151;
      margin-left:6px;
      white-space:nowrap;
    }

  .ac-list-head-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    font-size:12px;
    color:#4b5563;
  }
  
    /* Thanh tools (filter + search) */
    .ac-list-tools{
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        justify-content:flex-end;
      }
    
      /* Thanh tìm kiếm – làm nổi bật */
      .ac-search-shell{
        display:flex;
        align-items:center;
        gap:10px;
        padding:9px 20px;
        border-radius:999px;
    
        /* NỀN TRẮNG HẲN + VIỀN ĐẬM HƠN → TÁCH KHỎI MÀU HEADER */
        background:#ffffff;
        border:1px solid rgba(15,23,42,.14);
    
        /* Đổ bóng mạnh hơn để giống một “thanh nổi” trên bề mặt */
        box-shadow:
          0 12px 30px rgba(15,23,42,.22),
          0 0 0 1px rgba(191,219,254,.95);
    
        min-width:280px;
        max-width:420px;
        flex:0 0 auto;
        order:1; /* vẫn đứng bên phải cụm filter */
    
        transition:
          background .18s ease,
          border-color .18s ease,
          box-shadow .18s ease,
          transform .08s ease;
      }
    
      html[data-theme="dark"] .ac-search-shell{
        /* Dark mode: nền tối hẳn, viền sáng để nổi trên nền card */
        background:linear-gradient(135deg,#020617,#020617);
        border-color:rgba(148,163,184,1);
        box-shadow:
          0 12px 30px rgba(0,0,0,.9),
          0 0 0 1px rgba(30,64,175,.9);
      }
    
      .ac-search-shell:focus-within{
        /* Khi focus, tăng ring xanh cho đúng brand Quik Smart */
        box-shadow:
          0 0 0 1px rgba(59,130,246,1),
          0 14px 34px rgba(37,99,235,.55);
        border-color:rgba(59,130,246,1);
        transform:translateY(-0.5px);
      }
    
      /* Icon kính lúp */
      .ac-search-icon{
        font-size:14px;
        opacity:.9;
      }
    
      /* Input search */
      .ac-search-input{
        border:none;
        outline:none;
        background:transparent;
        font-size:13px;
        color:#0f172a;
        min-width:0;
        width:100%;
      }
    
      html[data-theme="dark"] .ac-search-input{
        color:#e5e7eb;
      }
    
      .ac-search-input::placeholder{
        color:#9ca3af;
      }

  .ac-state-filter-empty .ac-empty-icon{
    margin-bottom:2px;
  }
  
  .ac-list{
    max-height:none;      /* bỏ giới hạn chiều cao */
    overflow:visible;     /* để page scroll chung, không scroll riêng vùng list */
    padding:8px 10px;
    background:#f9fafb;
  }
 
  .ac-list-pager{
    margin-top:8px;
    padding:8px 10px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:12px;
    color:#4b5563;
  }

  .ac-list-pager.hidden{
    display:none;
  }

  .ac-pager-btn{
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.9);
    background:#ffffff;
    font-size:12px;
    cursor:pointer;
    white-space:nowrap;
  }

  .ac-pager-btn:disabled{
    opacity:.4;
    cursor:default;
    box-shadow:none;
  }

  .ac-pager-info{
    font-size:12px;
    color:#6b7280;
    white-space:nowrap;
  }

  /* State trống mặc định – khi app.js chưa load lên */
  .ac-state-empty{
    padding:18px 14px;
    border-radius:14px;
    border:1px dashed var(--border,rgba(148,163,184,.8));
    background:linear-gradient(145deg,#f9fafb,#e5edff);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  
  .ac-empty-icon{
    font-size:24px;
    margin-bottom:4px;
  }
  
  .ac-empty-title{
    font-weight:800;
    font-size:14px;
    color:#0b1120;
  }
  
  .ac-empty-msg{
    margin:0;
    font-size:13px;
    color:#374151;
  }
  
  /* =================== CÁC DÒNG UK-ROW DO app.js RENDER =================== */
    /* ================== FOLDER GROUP (KHỐI / DỰ ÁN) ================== */

    .ac-folder-row{
        padding:7px 10px;
        margin:4px 0 2px;
        border-radius:10px;
        background:linear-gradient(90deg,#eef2ff,#e0e7ff);
        border:1px solid rgba(129,140,248,.6);
        box-shadow:0 4px 10px rgba(129,140,248,.18);
      }
  
            /* ==== Trạng thái folder MỚI hoặc có file mới ==== */
            .ac-folder-row.is-new,
            .ac-folder-row.has-new{
              border-color:rgba(37,99,235,1);
              box-shadow:
                0 0 0 1px rgba(191,219,254,1),
                0 10px 24px rgba(37,99,235,.4);
              background:linear-gradient(90deg,#e0f2fe,#dbeafe);
              position:relative;
              order:-1;                          /* đưa folder mới lên đầu list (khi .ac-list là flex) */
            }
      
            /* Đảm bảo nhóm file ngay sau folder cũng “đi kèm” lên đầu */
            .ac-folder-row.has-new + .ac-row-in-folder{
              order:-1;
            }

      .ac-folder-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
      }
  
      .ac-folder-toggle{
        flex:1 1 auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        background:transparent;
        border:none;
        padding:0;
        cursor:pointer;
        text-align:left;
        font-size:13px;
        color:#111827;
      }
  
      .ac-folder-main{
        display:flex;
        align-items:center;
        gap:8px;
      }
  
      .ac-folder-icon{
        font-size:16px;
        flex-shrink:0;
      }
  
      .ac-folder-name{
        font-weight:700;
      }
  
      .ac-folder-meta{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
        justify-content:flex-end;
      }
  
      .ac-folder-actions{
        display:flex;
        align-items:center;
        gap:6px;
        flex-shrink:0;
      }
      
      /* Base cho tất cả nút trong folder actions */
      .ac-folder-actions{
        display:flex;
        align-items:center;
        gap:6px;
        flex-shrink:0;
      }
      
      /* Base cho tất cả nút trong folder actions */
      .ac-folder-select,
      .ac-folder-cancel,
      .ac-folder-delete,
      .ac-folder-leave,
      .ac-folder-members{
        padding:3px 9px;
        border-radius:999px;
        font-size:11px;
        font-weight:600;
        border:1px solid transparent;
        cursor:pointer;
        white-space:nowrap;
      }
    
      /* Nút "Chọn folder" (giữ nguyên) */
      .ac-folder-select{
        background:rgba(219,234,254,.95);
        border-color:rgba(129,140,248,.9);
        color:#1d4ed8;
        box-shadow:0 2px 6px rgba(129,140,248,.3);
      }
    
      .ac-folder-select:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
      /* Nút "Huỷ chọn" (giữ nguyên) */
      .ac-folder-cancel{
        background:#f9fafb;
        border-color:rgba(148,163,184,.9);
        color:#374151;
        box-shadow:0 2px 6px rgba(148,163,184,.25);
      }
    
      .ac-folder-cancel:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
      /* Nút "Xoá folder/nhóm" + "Rời nhóm" (đồng bộ y hệt) */
      .ac-folder-delete,
      .ac-folder-leave{
        background:#fef2f2;
        border-color:rgba(239,68,68,.9);
        color:#b91c1c;
        box-shadow:0 2px 6px rgba(248,113,113,.35);
      }
    
      .ac-folder-delete:hover,
      .ac-folder-leave:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
      /* Nút "Danh sách thành viên" – đồng bộ tone với nút chọn */
      .ac-folder-members{
        background:rgba(239,246,255,.95);
        border-color:rgba(129,140,248,.75);
        color:#1f2937;
        box-shadow:0 2px 6px rgba(148,163,184,.28);
      }
    
      .ac-folder-members:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
      /* Nút "Huỷ chọn" (giữ nguyên) */
      .ac-folder-cancel{
        background:#f9fafb;
        border-color:rgba(148,163,184,.9);
        color:#374151;
        box-shadow:0 2px 6px rgba(148,163,184,.25);
      }
    
      .ac-folder-cancel:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
      /* Nút "Xoá folder/nhóm" (giữ nguyên) */
      .ac-folder-delete{
        background:#fef2f2;
        border-color:rgba(239,68,68,.9);
        color:#b91c1c;
        box-shadow:0 2px 6px rgba(248,113,113,.35);
      }
    
      .ac-folder-delete:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
      /* Nút "Danh sách thành viên" – đồng bộ tone với nút chọn */
      .ac-folder-members{
        background:rgba(239,246,255,.95);          /* xanh nhạt cùng hệ với select */
        border-color:rgba(129,140,248,.75);
        color:#1f2937;
        box-shadow:0 2px 6px rgba(148,163,184,.28);
      }
    
      .ac-folder-members:hover{
        filter:brightness(1.03);
        transform:translateY(0.5px);
      }
    
        /* Các dòng file nằm trong folder – không thụt lề, dùng cột STT riêng */
  .ac-row-in-folder{
    margin-top:6px;
  }

/* Cột STT bên trái mỗi file */
.uk-index{
    flex-shrink:0;
    width:30px;                    /* cột STT gọn hơn */
    display:flex;
    justify-content:flex-end;      /* số sát về phía nội dung file */
    align-items:flex-start;
    padding-top:2px;
    font-size:11px;
    font-weight:700;
    color:#6b7280;
  }

  .uk-index-check{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .uk-index-check .ac-row-check{
    width:14px;
    height:14px;
    cursor:pointer;
  }
  
  .uk-row{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;    /* KHÔNG dùng space-between để tránh khoảng trống lớn */
    gap:6px;                       /* giảm gap giữa STT – nội dung – nút */
    padding:9px 10px;
    border-radius:12px;
    background:#ffffff;
    border:1px solid rgba(148,163,184,.35);
    box-shadow:0 3px 8px rgba(15,23,42,.04);
  }
    
  .uk-row + .uk-row{
    margin-top:8px;
  }


    /* ==== Trạng thái file MỚI (vừa upload) ==== */
    .uk-row.is-new{
        border-color:rgba(37,99,235,1);
        background:linear-gradient(135deg,#eef2ff,#dbeafe);
        box-shadow:
          0 0 0 1px rgba(191,219,254,1),
          0 10px 26px rgba(37,99,235,.45);
        position:relative;
        order:-1;                    /* đưa file mới lên đầu nhóm (khi cha là flex) */
      }
    
      .uk-row.is-new::before{
        content:"NEW";
        position:absolute;
        top:-8px;
        left:12px;
        padding:2px 8px;
        border-radius:999px;
        font-size:10px;
        font-weight:700;
        letter-spacing:.12em;
        text-transform:uppercase;
        background:linear-gradient(135deg,#fb923c,#f97316);
        color:#111827;
        box-shadow:0 4px 14px rgba(248,150,69,.55);
        animation:acNewPulse 1.2s ease-out 0s 2;
      }
    
      @keyframes acNewPulse{
        0%{
          transform:translateY(0);
          opacity:0;
        }
        30%{
          transform:translateY(2px);
          opacity:1;
        }
        70%{
          transform:translateY(2px);
          opacity:1;
        }
        100%{
          transform:translateY(4px);
          opacity:0;
        }
      }
    
      /* Trong folder: file mới cũng lên đầu nhóm */
      .ac-row-in-folder .uk-row.is-new{
        order:-1;
      }

/* =================== PREVIEW MÔ TẢ RAG =================== */

.ac-desc-preview{
    margin-top:6px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.75);
    background:
      linear-gradient(90deg,#eef2ff,#e0f2fe);
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#1f2937;
    cursor:pointer;
    text-align:left;
    transition:
      background .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      transform .06s ease;
  }
  
  .ac-desc-preview:hover{
    border-color:rgba(59,130,246,.95);
    box-shadow:
      0 0 0 1px rgba(59,130,246,.30),
      0 8px 18px rgba(15,23,42,.14);
    transform:translateY(-0.5px);
  }
  
  /* Nhãn “MÔ TẢ” bên trái */
  .ac-desc-preview-label{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 9px;
    border-radius:999px;
    background:rgba(219,234,254,.98);
    border:1px solid rgba(191,219,254,.98);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:#1d4ed8;
  }
  
  .ac-desc-preview-dot{
    width:6px;
    height:6px;
    border-radius:999px;
    background:#3b82f6;
  }
  
  /* Đoạn mô tả rút gọn ở giữa */
  .ac-desc-preview-text{
    flex:1 1 auto;
    min-width:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#374151;
  }
  
  /* Nút “Bấm để xem chi tiết” bên phải */
  .ac-desc-preview-more{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    background:rgba(59,130,246,.08);
    border:1px solid rgba(129,140,248,.65);
    color:#1d4ed8;
    white-space:nowrap;
  }
  
  .ac-desc-preview-arrow{
    font-size:11px;
    margin-top:-1px;
  }
  
  /* Mobile: pill gọn hơn, không bị “nặng” */
  @media (max-width:720px){
    .ac-desc-preview{
      padding:6px 9px;
      gap:6px;
    }
  
    .ac-desc-preview-label{
      padding:2px 7px;
    }
  
    .ac-desc-preview-more{
      padding:2px 7px;
      font-size:10px;
    }
  }
  
  /* Mobile: mô tả vẫn gọn */
  @media (max-width:720px){
    .ac-desc-preview{
      padding:5px 7px;
    }
  }

  .uk-main{
    flex:1 1 auto;    /* chiếm hết phần còn lại để đẩy nút sang phải */
    min-width:0;
  }
  
  .uk-name{
    font-size:13px;
    font-weight:700;
    color:#0b1120;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .uk-meta{
    margin-top:2px;
    font-size:12px;
    color:#4b5563;
  }

  .uk-dataset{
    margin-top:2px;
    font-size:12px;
    color:#6b7280;
  }

  .uk-meta-row{
    margin-top:4px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .uk-meta-path{
    margin-top:4px;
    font-size:11px;
    font-family:var(--mono,ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
    color:#6b7280;
    word-break:break-all;
  }

  .uk-meta-path .ac-meta-path-label{
    opacity:.9;
    margin-right:4px;
  }

  /* Pills dùng chung cho meta file & folder */
  .ac-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    line-height:1.5;
    white-space:nowrap;
  }

  .ac-pill-soft{
    background:rgba(239,246,255,.9);
    border:1px solid rgba(191,219,254,.9);
    color:#1e3a8a;
  }

  .ac-pill-tag{
    background:rgba(236,252,203,.9);
    border:1px solid rgba(190,242,100,.95);
    color:#3f6212;
  }
 
  .ac-pill-type{
    background:rgba(248,250,252,.95);
    border:1px solid rgba(148,163,184,.9);
    color:#111827;
  }

    /* Pill "NEW" nổi bật cho folder có file mới */
    .ac-pill-new{
        background:linear-gradient(135deg,#f97316,#fb923c);
        border:1px solid rgba(194,65,12,.95);
        color:#111827;
        box-shadow:
          0 4px 14px rgba(248,150,69,.6),
          0 0 0 1px rgba(255,237,213,.9);
        text-transform:uppercase;
        letter-spacing:.14em;
      }
    
      .ac-pill-new-dot{
        width:6px;
        height:6px;
        border-radius:999px;
        background:#fef3c7;
      }
      
 /* Nhóm nút hành động (Tải + Xoá) */
  .uk-actions{
    display:flex;
    flex-direction:row;
    gap:6px;
    flex-shrink:0;
  }

  .uk-dl{
    padding:6px 11px;
    border-radius:999px;
    font-size:12px;
    border:1px solid rgba(59,130,246,.9);
    background:#eff6ff;
    color:#1d4ed8;
    box-shadow:0 3px 8px rgba(59,130,246,.25);
    cursor:pointer;
    white-space:nowrap;
  }

  .uk-dl:hover{
    filter:brightness(1.03);
    transform:translateY(0.5px);
  }

  .uk-dl:active{
    transform:translateY(1px);
    box-shadow:0 1px 4px rgba(30,64,175,.65);
  }
  
  .uk-del{
    padding:6px 11px;
    border-radius:999px;
    font-size:12px;
    border:1px solid rgba(239,68,68,.85);
    background:#fef2f2;
    color:#b91c1c;
    box-shadow:0 3px 8px rgba(248,113,113,.35);
    cursor:pointer;
    white-space:nowrap;
  }
  
  .uk-del:hover{
    filter:brightness(1.03);
    transform:translateY(0.5px);
  }
  
  .uk-del:active{
    transform:translateY(1px);
    box-shadow:0 1px 4px rgba(127,29,29,.65);
  }
  
  /* =================== FOOT NOTE =================== */
  
  .ac-foot{
    margin-top:12px;
  }
  
  .ac-foot-note{
    font-size:12px;
    color:#4b5563;
    border-radius:10px;
    border:1px dashed var(--border,rgba(148,163,184,.8));
    padding:8px 10px;
    background:#ffffff;
  }

   /* =================== RESPONSIVE =================== */
  
   @media (max-width:720px){
    .ac-hero{
      margin:12px 12px 8px;
      padding:10px 12px 12px;
    }
  
    .ac-title{
      font-size:20px;
    }
  
    .ac-hero-actions{
      align-items:stretch;
      min-width:100%;
    }
  
    .ac-section{
      margin:10px 10px;
      padding:14px 14px;
    }

    /* Thanh filter + search trên mobile:
       - cho phép xuống 2 hàng
       - search chiếm full chiều ngang bên dưới pill */
    .ac-list-head-right{
      align-items:stretch;
    }

    .ac-list-tools{
      flex-wrap:wrap;
      justify-content:flex-start;
    }

    .ac-search-shell{
      flex:1 1 100%;
      min-width:0;
      max-width:none;
    }
  }

  /* Thanh tìm kiếm: cần position: relative để menu filter bám theo */
.ac-search-shell{
  position:relative;
}

/* Nút filter bên phải thanh search */
.ac-filter-btn{
  flex-shrink:0;
  border:none;
  background:rgba(248,250,252,.95);
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(148,163,184,.7);
  transition:
    background .16s ease,
    box-shadow .16s ease,
    transform .06s ease;
}

.ac-filter-btn:hover{
  background:#ffffff;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.8),
    0 6px 16px rgba(15,23,42,.16);
  transform:translateY(-0.5px);
}

.ac-filter-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(59,130,246,.95);
}

/* Icon filter đơn giản, dùng Unicode có sẵn */
.ac-filter-icon{
  font-size:12px;
  line-height:1;
}

/* Menu filter thả xuống */
.ac-filter-menu{
  position:absolute;
  right:0;
  top:110%;
  margin-top:4px;
  min-width:190px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.8);
  box-shadow:0 14px 30px rgba(15,23,42,.25);
  padding:4px;
  display:none;

  /* Tăng z-index để luôn nổi trên list + nội dung bên dưới */
  z-index:40;

  /* Giới hạn theo chiều cao viewport để không bị cắt khi scroll màn hình */
  max-height:calc(100vh - 140px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch; /* mượt hơn trên mobile/iOS */
}

.ac-filter-menu.is-open{
  display:block;
}

.ac-filter-item{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ac-filter-item:hover{
  background:rgba(239,246,255,.9);
}

.ac-filter-item.is-active{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  color:#1d4ed8;
  font-weight:600;
}

/* Dark mode cho nút filter + menu */
html[data-theme="dark"] .ac-filter-btn{
  background:rgba(15,23,42,1);
  box-shadow:
    0 0 0 1px rgba(51,65,85,1);
  color:#e5e7eb;
}

html[data-theme="dark"] .ac-filter-btn:hover{
  background:#020617;
  box-shadow:
    0 0 0 1px rgba(129,140,248,1),
    0 8px 20px rgba(15,23,42,.9);
}

html[data-theme="dark"] .ac-filter-menu{
  background:rgba(15,23,42,1);
  border-color:rgba(51,65,85,1);
  box-shadow:
    0 16px 34px rgba(0,0,0,.9);
}

html[data-theme="dark"] .ac-filter-item{
  color:#e5e7eb;
}

html[data-theme="dark"] .ac-filter-item:hover{
  background:rgba(30,64,175,.6);
}

html[data-theme="dark"] .ac-filter-item.is-active{
  background:linear-gradient(135deg,rgba(30,64,175,1),rgba(37,99,235,1));
  color:#f9fafb;
}

/* =================== RAG GROUP MODE (POPUP TẠO NHÓM) =================== */

.ac-rag-modal.ac-rag-group-mode .tp-manager-modal-body{
  /* hơi rộng hơn một chút cho layout nhóm */
  max-width: 760px;
}

.ac-rag-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:10px 0 0;
  border-top:1px solid rgba(148,163,184,.35);
}

.ac-rag-foot-left{
  flex:0 0 auto;
}

.ac-rag-foot-right{
  flex:1 1 auto;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* Hàng chứa Khối / Dự án + nút Tạo nhóm */
.tp-org-mode-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
  flex-wrap:wrap;
}

.tp-org-mode-header-row .tp-org-mode-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:1 1 auto;
}

/* Nút Tạo nhóm trong header mode */
.ac-group-toggle-btn{
  white-space:nowrap;
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  font-weight:600;
}

/* Mobile: cho phép Tạo nhóm xuống dòng dưới Khối/Dự án */
@media (max-width:720px){
  .tp-org-mode-header-row{
    align-items:flex-start;
  }
}

/* Hàng chứa select dự án + nút tạo nhóm */
.tp-org-project-select-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:6px;
}

.tp-org-project-select-row select.tp-field-input{
  flex:1 1 auto;
}

/* Hint dưới nút tạo nhóm */
.ac-group-hint{
  margin-top:6px;
  font-size:12px;
  color:#6b7280;
}

/* Panel group: tone trắng sạch, giống Train Platform */
.ac-rag-group{
  margin-top:4px;
}

/* Hàng mời thành viên: input + nút */
.ac-group-invite-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.ac-group-invite-row .tp-field-input{
  flex:1 1 auto;
}

.ac-group-invite-btn{
  white-space:nowrap;
  border-radius:999px;
  padding:7px 14px;
  font-size:12px;
  font-weight:600;
}

/* Hàng nhập mã join nhóm: input + nút theo hàng ngang */
.ac-group-join-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.ac-group-join-row .tp-field-input{
  flex:1 1 auto;              /* ô nhập mã chiếm hết phần còn lại của hàng */
}

.ac-group-join-btn{
  white-space:nowrap;
  border-radius:999px;
  padding:7px 16px;
  font-size:12px;
  font-weight:600;
}

/* Mã mời: khung code + nút copy / tạo mới */
.ac-group-code-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.ac-group-code-box{
  flex:1 1 180px;
  padding:8px 10px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.7);
  background:#f9fafb;
  font-family:var(--mono,ui-monospace,Menlo,Monaco,Consolas,"Courier New",monospace);
  font-size:13px;
  color:#111827;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ac-group-code-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ac-group-code-btn{
  border-radius:999px;
  font-size:12px;
  padding:6px 10px;
}

/* Danh sách thành viên */
.ac-group-member-list{
  margin-top:6px;
  padding:8px 8px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.5);
  background:linear-gradient(180deg,#f9fafb,#eff6ff);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:190px;
  overflow:auto;
}

.ac-group-member-empty{
  font-size:12px;
  color:#6b7280;
  padding:2px 2px 4px;
}

/* Chip thành viên: tên + vai trò */
.ac-group-member-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  background:#e5edff;
  color:#111827;
  box-shadow:0 1px 3px rgba(15,23,42,.12);
}

/* Không dùng chấm tròn nữa – ẩn hoàn toàn */
.ac-group-member-dot{
  display:none;
}

/* ROLE chung cho mọi thành viên (OWNER / MEMBER) */
.ac-group-member-role{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#4b5563;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(248,250,252,.95);
  border:1px solid rgba(148,163,184,.7);
}

/* ======= OWNER CHIP – làm nổi bật chip đầu tiên (Owner) ======= */

/* Chip đầu tiên trong danh sách (Owner) – nền cam vàng nổi bật */
.ac-group-member-list .ac-group-member-chip:first-child{
  background:linear-gradient(135deg,#facc15,#f97316);
  color:#111827;
  box-shadow:
    0 6px 16px rgba(248,184,66,.55),
    0 0 0 1px rgba(253,224,71,.9);
}

/* ROLE OWNER: pill đậm hơn một chút */
.ac-group-member-list .ac-group-member-chip:first-child .ac-group-member-role{
  background:rgba(254,243,199,.95);
  border-color:rgba(251,191,36,.95);
  color:#92400e;
}

/* Dark mode tinh chỉnh nhẹ */
@media (prefers-color-scheme: dark){
  .ac-group-code-box{
    background:rgba(15,23,42,.9);
    border-color:rgba(148,163,184,.7);
    color:#e5e7eb;
  }

  .ac-group-member-list{
    background:linear-gradient(180deg,#020617,#020617);
    border-color:rgba(148,163,184,.6);
  }

  .ac-group-member-chip{
    background:rgba(30,64,175,.9);
    color:#e5e7eb;
  }

  /* ROLE chung trong dark mode */
  .ac-group-member-role{
    background:rgba(15,23,42,1);
    border-color:rgba(148,163,184,.85);
    color:#cbd5f5;
  }

  /* OWNER trong dark mode vẫn giữ cam vàng nổi bật */
  .ac-group-member-list .ac-group-member-chip:first-child{
    background:linear-gradient(135deg,#facc15,#f97316);
    color:#111827;
    box-shadow:
      0 8px 20px rgba(0,0,0,.9),
      0 0 0 1px rgba(253,224,71,.9);
  }

  .ac-group-member-list .ac-group-member-chip:first-child .ac-group-member-role{
    background:rgba(254,243,199,1);
    color:#92400e;
    border-color:rgba(251,191,36,1);
  }
}

/* AI Custom – Popup Upload RAG (dùng chung layout Train Platform) */
.ac-rag-modal.tp-manager-modal{
    /* đảm bảo nổi trên card AI Custom */
    z-index: 9999;
  }
 
  /* Popup chi tiết file RAG – dùng chung layout Train Platform
   nhưng cũng phải nổi trên card AI Custom */
.ac-detail-modal.tp-manager-modal{
    z-index: 10000;         /* cao hơn cả popup upload RAG */
    pointer-events: auto;   /* đảm bảo nhận được click */
  }

  /* Khi popup AI Custom mở → khoá scroll nền, chỉ cho scroll trong popup
     Dựa trên việc #acRagUploadModal bỏ class .hidden khi hiển thị */
  body:has(#acRagUploadModal:not(.hidden)){
    overflow: hidden;
  }
  
    /* Khi popup chi tiết mô tả mở → cũng khoá scroll nền */
    body:has(#acDetailModal:not(.hidden)){
        overflow:hidden;
      }

  /* Thân popup: giới hạn theo chiều cao viewport, scroll nội bộ */
  .ac-rag-modal .tp-manager-modal-body{
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  
  /* Textarea đồng bộ style với input */
  .tp-field-textarea{
    min-height:96px;
    resize:vertical;
  }
  
/* =================== FOOTER POPUP RAG =================== */

/* Layout mặc định: trái (Quay lại), phải (Tạo nhóm + Upload) */
.ac-rag-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:10px 0 0;
  border-top:1px solid rgba(148,163,184,.35);
}

.ac-rag-foot-left{
  flex:0 0 auto;
}

.ac-rag-foot-right{
  flex:1 1 auto;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* === MODE UPLOAD: chỉ có 1 nút Upload đứng giữa === */
.ac-rag-foot.ac-rag-foot-center{
  justify-content:center;         /* cả foot căn giữa */
}

/* Ẩn hẳn cột trái khi chỉ có Upload */
.ac-rag-foot.ac-rag-foot-center .ac-rag-foot-left{
  display:none;
}

/* Cột phải thu về kích thước nút, không chiếm full width
   và căn giữa luôn */
.ac-rag-foot.ac-rag-foot-center .ac-rag-foot-right{
  flex:0 0 auto;
  justify-content:center;
}

/* Nút Upload trong mode center: to hơn một chút */
.ac-rag-foot.ac-rag-foot-center #acRagSubmitBtn{
  min-width:220px;
  margin-left:0;
}

/* Khối / Dự án / Nhóm trong phân loại */
.tp-org-block-wrap,
.tp-org-project-wrap,
.tp-org-group-wrap{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Phần "Chọn dự án đã có" */
.tp-org-project-existing{
  margin-top:6px;
}

/* Khi đã chọn dự án từ list:
   - JS thêm class .ac-project-has-select vào tp-org-project-wrap
   - Dropdown "Chọn dự án đã có" sẽ nhảy lên đúng vị trí ô input cũ */
.tp-org-project-wrap.ac-project-has-select .tp-org-project-existing{
  margin-top:0;
}

/* Nhãn inline nhỏ phía trước các mô tả (dùng chung nếu cần) */
.tp-org-sub-label-inline{
  display:inline-block;
  margin-right:6px;
}

/* =================== PILL CHỌN KHỐI / DỰ ÁN / NHÓM =================== */
/* Dùng chung cho 3 nút Khối / Dự án / Chọn nhóm trong popup RAG */

/* Hàng chứa 3 pill */
.ac-rag-modal .tp-org-mode-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  flex-wrap:nowrap;
  flex:1 1 auto;
}

/* 3 phần tử Khối / Dự án / Chọn nhóm chia đều chiều ngang */
.ac-rag-modal .tp-org-mode-row .tp-radio-pill,
.ac-rag-modal .tp-org-mode-row .ac-group-option-btn{
  flex:1 1 0;
}

/* Label bọc input radio (Khối / Dự án) */
.ac-rag-modal .tp-radio-pill{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  border-radius:999px;
  padding:0;                     /* span bên trong mới là phần click chính */
  cursor:pointer;
  position:relative;
}

/* Ẩn input radio, chỉ dùng span làm pill nhấn */
.ac-rag-modal .tp-radio-pill input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Span bên trong pill + nút "Chọn nhóm" – TRẠNG THÁI MẶC ĐỊNH */
.ac-rag-modal .tp-radio-pill span,
.ac-rag-modal .ac-group-option-btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;                   /* fill hết chiều ngang ô flex để 3 nút đều nhau */
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.85);
  background:#f9fafb;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  color:#64748b;
  box-shadow:none;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .06s ease;
}

/* Hover nhẹ cho cả 3 pill */
.ac-rag-modal .tp-radio-pill span:hover,
.ac-rag-modal .ac-group-option-btn span:hover{
  filter:brightness(1.03);
}

/* TRẠNG THÁI ACTIVE:
   - radio Khối/Dự án được chọn
   - hoặc nút "Chọn nhóm" có class .is-active (JS sẽ toggle) */
   .ac-rag-modal .tp-radio-pill input[type="radio"]:checked + span,
   .ac-rag-modal .ac-group-option-btn.is-active span{
     background:linear-gradient(135deg,#3b82f6,#60a5fa); /* phủ XANH ĐẶC toàn bộ */
     color:#ffffff;
     border-color:rgba(37,99,235,.98);
     box-shadow:0 3px 10px rgba(37,99,235,.45);
     transform:translateY(0.5px);
   }

/* Khi chế độ "Chọn nhóm" đang bật như 1 option
   thì tắt highlight của radio Khối/Dự án để chỉ còn pill "Chọn nhóm" sáng */
.ac-rag-modal.ac-rag-has-group-option
  .tp-radio-pill input[type="radio"]:checked + span{
  background:#f9fafb;
  color:#64748b;
  border-color:rgba(148,163,184,.85);
  box-shadow:none;
  transform:none;
}

/* Focus cho accessibility */
.ac-rag-modal .tp-radio-pill span:focus-visible,
.ac-rag-modal .ac-group-option-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(248,250,252,1),
    0 0 0 4px rgba(59,130,246,.95);
}

.tp-field-maxsize {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}

/* Thanh tools list file – đồng bộ với search */
.ac-list-tools {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;           /* giữ filter + search cùng một hàng trên desktop */
    justify-content:flex-end;
    width:100%;
  }
  
  /* Pill filter Tất cả / Dự án / Khối – làm nổi bật hơn */
  .ac-mode-toggle{
    display:inline-flex;
    align-items:center;
    padding:4px;
    border-radius:999px;
    background:rgba(239,246,255,.92);
    box-shadow:
      0 4px 14px rgba(148,163,184,.45),
      0 0 0 1px rgba(148,163,184,.75);
    flex:0 0 auto;
    order:0;                     /* luôn đứng bên trái thanh search */
  }
  
  /* Nút bên trong pill */
  .ac-mode-btn{
    position:relative;
    border:none;
    background:transparent;
    padding:7px 14px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    color:#64748b;
    cursor:pointer;
    transition:
      color .18s ease,
      background .18s ease,
      transform .12s ease,
      box-shadow .18s ease;
    white-space:nowrap;
  }
  
  .ac-mode-btn:hover{
    transform:translateY(-0.5px);
    color:#0f172a;
  }
  
  /* Trạng thái active – nổi hẳn lên như segmented control */
  .ac-mode-btn.is-active{
    color:#0f172a;
    background:linear-gradient(135deg,#ffffff,#dbeafe);
    box-shadow:
      0 8px 22px rgba(37,99,235,.35),
      0 0 0 1px rgba(59,130,246,.85);
  }
  
  /* Focus cho accessibility */
  .ac-mode-btn:focus-visible{
    outline:none;
    box-shadow:
      0 0 0 2px rgba(248,250,252,1),
      0 0 0 4px rgba(59,130,246,.95);
  }
  
  /* Dark mode */
  html[data-theme="dark"] .ac-mode-toggle{
    background:rgba(15,23,42,.9);
    box-shadow:
      0 0 0 1px rgba(51,65,85,.95),
      0 6px 18px rgba(15,23,42,.9);
  }
  
  html[data-theme="dark"] .ac-mode-btn{
    color:#cbd5f5;
  }
 
  html[data-theme="dark"] .ac-mode-btn.is-active{
    background:linear-gradient(135deg,rgba(15,23,42,1),rgba(30,64,175,.95));
    color:#e5e7eb;
    box-shadow:
      0 10px 26px rgba(15,23,42,.9),
      0 0 0 1px rgba(129,140,248,.9);
  }

 /* =================== OWNER SCOPE TOGGLE (CÁ NHÂN / NHÓM) =================== */

.ac-owner-toggle-row{
  margin: 0 16px 10px 16px;
}

.ac-section.ac-section-list .ac-owner-toggle-row{
  margin-top: 0;
}

.ac-owner-toggle{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;

  padding:4px;
  border-radius:999px;
  background:rgba(239,246,255,.95);
  box-shadow:
    0 4px 14px rgba(148,163,184,.45),
    0 0 0 1px rgba(148,163,184,.75);
  box-sizing:border-box;
}

.ac-owner-btn{
  flex:1 1 0;
  border:none;
  background:transparent;
  padding:8px 18px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  color:#64748b;
  cursor:pointer;
  white-space:nowrap;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .10s ease;
}

.ac-owner-btn:hover{
  transform:translateY(-0.5px);
  color:#0f172a;
}

/* Trạng thái active – giống segmented control */
.ac-owner-btn.is-active{
  color:#0b1120;
  background:linear-gradient(135deg,#ffffff,#dbeafe);
  box-shadow:
    0 8px 22px rgba(37,99,235,.35),
    0 0 0 1px rgba(59,130,246,.85);
}

/* Focus cho accessibility */
.ac-owner-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(248,250,252,1),
    0 0 0 4px rgba(59,130,246,.95);
}

/* Dark mode */
html[data-theme="dark"] .ac-owner-toggle{
  background:rgba(15,23,42,.9);
  box-shadow:
    0 0 0 1px rgba(51,65,85,.95),
    0 6px 18px rgba(15,23,42,.9);
}

html[data-theme="dark"] .ac-owner-btn{
  color:#cbd5f5;
}

html[data-theme="dark"] .ac-owner-btn.is-active{
  background:linear-gradient(135deg,rgba(15,23,42,1),rgba(30,64,175,.95));
  color:#e5e7eb;
  box-shadow:
    0 10px 26px rgba(15,23,42,.9),
    0 0 0 1px rgba(129,140,248,.9);
} 

.ac-uploader-label {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted, #64748b);
  margin-left: 4px;
}

/* =================== INLINE "THAM GIA NHÓM" TRONG TAB NHÓM =================== */
/* Cụm nhập mã + nút tham gia, nằm cùng hàng với Tất cả / Chủ nhóm / Thành viên */

/* CHỈ áp dụng cho cụm inline ở header tab Nhóm:
   - #acGroupJoinInlineRow
   - .ac-group-join-inline
   - (và兼 luôn case HTML cũ còn dùng .ac-group-join-row)
   → Không ảnh hưởng popup vì popup không nằm trong .ac-list-head-right */
   .ac-list-head-right #acGroupJoinInlineRow,
   .ac-list-head-right .ac-group-join-inline,
   .ac-list-head-right .ac-group-join-row {
     display: flex;
     align-items: center;
     gap: 8px;
   
     padding: 6px 12px;
     border-radius: 999px;
   
     /* nền + viền đồng bộ style với search / mode pill */
     background: #ffffff;
     border: 1px solid rgba(148, 163, 184, .85);
     box-shadow:
       0 8px 20px rgba(15, 23, 42, .18),
       0 0 0 1px rgba(191, 219, 254, .95);
   
     flex: 0 0 auto;
     max-width: 360px;    /* gọn, không chiếm hết hàng */
     box-sizing: border-box;
   }
   
   /* Ô nhập mã mời trong cụm inline */
   .ac-list-head-right #acGroupJoinInlineRow input,
   .ac-list-head-right .ac-group-join-inline input,
   .ac-list-head-right .ac-group-join-row input {
     border: none;
     outline: none;
     background: transparent;
     font-size: 12px;
     color: #0f172a;
     min-width: 0;
     width: 180px;
   }
   
   .ac-list-head-right #acGroupJoinInlineRow input::placeholder,
   .ac-list-head-right .ac-group-join-inline input::placeholder,
   .ac-list-head-right .ac-group-join-row input::placeholder {
     color: #9ca3af;
   }
   
   /* Nút "Tham gia nhóm" inline – tone primary giống các nút chính */
   .ac-list-head-right .ac-group-join-btn {
     border: none;
     border-radius: 999px;
     padding: 7px 16px;
     font-size: 12px;
     font-weight: 600;
     white-space: nowrap;
     cursor: pointer;
   
     background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-2, #60a5fa));
     color: var(--primary-ink, #ffffff);
     box-shadow: 0 8px 20px rgba(37, 99, 235, .45);
     transition:
       transform .08s ease,
       box-shadow .12s ease,
       filter .12s ease;
   }
   
   .ac-list-head-right .ac-group-join-btn:hover {
     filter: brightness(1.03);
     transform: translateY(-0.5px);
   }
   
   .ac-list-head-right .ac-group-join-btn:active {
     transform: translateY(0.5px);
     box-shadow: 0 4px 10px rgba(30, 64, 175, .55);
   }
   
   /* Dark mode cho cụm join nhóm */
   html[data-theme="dark"] .ac-list-head-right #acGroupJoinInlineRow,
   html[data-theme="dark"] .ac-list-head-right .ac-group-join-inline,
   html[data-theme="dark"] .ac-list-head-right .ac-group-join-row {
     background: linear-gradient(135deg, #020617, #020617);
     border-color: rgba(148, 163, 184, 1);
     box-shadow:
       0 10px 24px rgba(0, 0, 0, .9),
       0 0 0 1px rgba(30, 64, 175, .9);
   }
   
   html[data-theme="dark"] .ac-list-head-right #acGroupJoinInlineRow input,
   html[data-theme="dark"] .ac-list-head-right .ac-group-join-inline input,
   html[data-theme="dark"] .ac-list-head-right .ac-group-join-row input {
     color: #e5e7eb;
   }
  
   /* Mobile: cho phép cụm join nhóm xuống dòng như search */
   @media (max-width: 720px) {
     .ac-list-head-right #acGroupJoinInlineRow,
     .ac-list-head-right .ac-group-join-inline,
     .ac-list-head-right .ac-group-join-row {
       flex: 1 1 100%;
       max-width: none;
     }
   }

   /* Nút Huỷ nhóm / Rời nhóm trong popup Tạo nhóm */
#acGroupLeaveBtn,
.ac-group-leave-btn{
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;

  /* Tone đỏ đồng bộ với uk-del / ac-folder-delete */
  border: 1px solid rgba(239,68,68,.90);
  background: #fef2f2;
  color: #b91c1c;
  box-shadow: 0 3px 8px rgba(248,113,113,.35);

  transition:
    transform .08s ease,
    box-shadow .12s ease,
    filter .12s ease,
    background .16s ease,
    border-color .16s ease;
}

/* Hover: hơi nổi hơn, giống uk-del */
#acGroupLeaveBtn:hover,
.ac-group-leave-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-0.5px);
  box-shadow: 0 4px 10px rgba(248,113,113,.45);
}

/* Active: nhấn xuống nhẹ */
#acGroupLeaveBtn:active,
.ac-group-leave-btn:active{
  transform: translateY(0.5px);
  box-shadow: 0 2px 6px rgba(127,29,29,.65);
}

/* Disabled: mờ + không hover được */
#acGroupLeaveBtn:disabled,
.ac-group-leave-btn:disabled{
  opacity: .55;
  cursor: default;
  filter: none;
  box-shadow: none;
}

/* Trạng thái disabled cho các ô trong popup RAG nhóm
   (bao gồm ô Tên nhóm, ô tạo mã, v.v.) */
   .ac-rag-modal .tp-field-input[disabled],
   .ac-rag-modal .tp-field-input[readonly]{
     cursor: not-allowed;
     opacity: .70;
   
     /* Nền xám nhẹ, viền rõ hơn để khác trạng thái bình thường */
     background: linear-gradient(135deg,#f9fafb,#e5e7eb);
     border-color: rgba(148,163,184,.85);
     box-shadow:
       0 0 0 1px rgba(148,163,184,.55);
   
     /* Thu nhỏ nhẹ để cảm giác “bị khoá” */
     transform: scale(0.99);
   
     /* Animation nhỏ lúc vừa bị disable */
     animation: acFieldDisabledFlash .28s ease-out;
   }
   
   /* Dark mode cho input disabled trong popup nhóm */
   @media (prefers-color-scheme: dark){
     .ac-rag-modal .tp-field-input[disabled],
     .ac-rag-modal .tp-field-input[readonly]{
       background: linear-gradient(135deg,#020617,#020617);
       border-color: rgba(148,163,184,1);
       box-shadow:
         0 0 0 1px rgba(51,65,85,.95);
       color: #9ca3af;
     }
   }
   
   /* Animation flash nhẹ khi chuyển sang trạng thái disabled */
@keyframes acFieldDisabledFlash{
  0%{
       box-shadow:
         0 0 0 0 rgba(239,68,68,0.00),
         0 0 0 1px rgba(148,163,184,.35);
       transform: scale(1);
     }
     50%{
       box-shadow:
         0 0 0 4px rgba(148,163,184,.35),
         0 0 0 1px rgba(148,163,184,.55);
       transform: scale(0.985);
     }
     100%{
       box-shadow:
         0 0 0 1px rgba(148,163,184,.55);
       transform: scale(0.99);
  }
}

/* =================== Quik AI Custom: Upload Popup (Simplified) =================== */
.ac-rag-modal .tp-field-hint{
  display:none !important;
}

.ac-rag-modal .tp-manager-modal-body{
  max-width:760px;
  border-radius:16px;
}

.ac-rag-modal #acRagUploadPanel{
  grid-template-columns:1fr;
  gap:12px;
}

.ac-rag-modal #acRagUploadPanel .tp-field-full,
.ac-rag-modal #acRagUploadPanel .ac-rag-file-field{
  grid-column:1 / -1;
}

.ac-rag-modal #acRagUploadPanel .tp-field-label{
  font-size:12px;
  font-weight:700;
}

.ac-rag-modal #acRagUploadPanel .tp-field-input{
  border-radius:10px;
}

.ac-rag-modal #acRagUploadPanel #acRagFile{
  padding:10px;
  background:#f8fafc;
  border:1px dashed rgba(148,163,184,.75);
}

.ac-rag-file-meta{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.ac-rag-file-summary{
  font-size:12px;
  color:#475569;
}

.ac-rag-file-clear{
  border:1px solid rgba(148,163,184,.75);
  background:#ffffff;
  color:#334155;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}

.ac-rag-file-clear:hover{
  background:#f1f5f9;
}

.ac-rag-file-list{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:92px;
  overflow:auto;
}

.ac-rag-file-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ac-rag-file-chip-more{
  background:#e2e8f0;
  color:#334155;
}

.ac-rag-modal .tp-org-mode-row{
  gap:6px;
}

.ac-rag-modal .tp-org-mode-row .tp-radio-pill span,
.ac-rag-modal .tp-org-mode-row .ac-group-option-btn span{
  padding:8px 10px;
}

.ac-rag-modal .ac-group-toggle-btn{
  border-radius:10px;
  padding:8px 12px;
}

.ac-rag-modal .tp-org-group-wrap,
.ac-rag-modal .tp-org-block-wrap,
.ac-rag-modal .tp-org-project-wrap{
  margin-top:10px;
}

@media (max-width:780px){
  .ac-rag-modal #acRagUploadPanel{
    grid-template-columns:1fr;
  }

  .ac-rag-modal .tp-org-mode-row{
    flex-wrap:wrap;
  }

  .ac-rag-modal .tp-org-mode-row .tp-radio-pill,
  .ac-rag-modal .tp-org-mode-row .ac-group-option-btn{
    flex:1 1 calc(50% - 4px);
  }

  .ac-rag-modal .ac-group-toggle-btn{
    width:100%;
  }
}