/* Quik Smart — Web Inspector (production) */

/* ===================== THEME ===================== */
:root{
  --bg:#0b1220;
  --card:#0f172a; --card-soft:#0b1530; --elev:#111a31; --border:#1f2a40;
  --text:#e6ebff; --muted:#8ea2c8;
  --primary:#3b82f6; --primary-2:#60a5fa; --primary-ink:#fff;
  --ghost:#253149; --danger:#ef4444;
  --ok:#22c55e; --ok-2:#16a34a;
  --warn:#f59e0b; --warn-2:#b45309;
  --err:#ef4444; --err-2:#b91c1c;
  --radius:16px; --radius-sm:12px;
  --shadow:0 14px 36px rgba(0,0,0,.35);
  --shadow-soft:0 8px 22px rgba(0,0,0,.25);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  --container: 1280px;

  /* Bubbles map */
  --user-d:#0f5132;       --user-d-border:#1fa86b; --user-d-text:#dbffef;
  --assist-d:#0f152a;     --assist-d-border:#22304d; --assist-d-text:#eaf0ff;
  --user-l:#e8fff3;       --user-l-border:#a7e8c6; --user-l-text:#0b3b25;
  --assist-l:#f3f6ff;     --assist-l-border:#d7e1ff; --assist-l-text:#0f1a37;

  /* ==== SFT hero theme ==== */
  --sft-hero-1:#3b82f6;
  --sft-hero-2:#a855f7;
  --sft-accent:#f472b6;
  --sft-glass:rgba(255,255,255,.14);
  --sft-grid:rgba(255,255,255,.06);

  /* ==== SFT head heights (for dynamic grid height) ==== */
  --sft-head-h: 220px;           /* normal header height */
  --sft-head-h-compact: 92px;    /* compact header height */

   /* ===================== TOPBAR TOKENS (Flat modern) ===================== */
  --topbar-h: 46px;            /* mỏng hơn, hiện đại */
  --topbar-pad-x: 14px;
  --topbar-gap: 10px;

  /* 1 chuẩn kích thước cho TẤT CẢ nút topbar */
  --tb-ctl-h: 30px;            /* ✅ mọi nút = 30px */
  --tb-ctl-radius: 999px;      /* ✅ pill đồng bộ cho Menu / Quik AI / Profile */
  --tb-ctl-pad-x: 10px;        /* padding ngang cho nút có chữ */

  /* topbar nền — glass mờ kiểu ChatGPT macOS (mờ hơn + không kẻ line) */
  --topbar-bg: rgba(15,23,42,.10);          /* ✅ mờ hơn (thấy nền xuyên nhẹ) */
  --topbar-border: transparent;             /* ✅ bỏ line */
  --topbar-fg: var(--text);

    /* ✅ NEW: Topbar scroll fade (ChatGPT-like) */
    --topbar-scroll: 0%; /* 0% = ở top, 100% = scroll sâu */
    --topbar-bg-top: rgba(15,23,42,.06);   /* rất trong ở đầu trang (thấy nội dung phía sau) */
    --topbar-bg-deep: rgba(15,23,42,.28);  /* đậm dần khi scroll (nội dung sau “biến mất dần”) */
    --topbar-scrim-top: rgba(15,23,42,.00);
    --topbar-scrim-deep: rgba(15,23,42,.22);

  /* control background (flat glass nhẹ) */
  --tb-ctl-bg: rgba(255,255,255,.10);
  --tb-ctl-border: rgba(148,163,184,.26);
  --tb-ctl-hover: rgba(255,255,255,.12);
  --tb-ctl-press: rgba(255,255,255,.16);

  /* gần như phẳng: bỏ “pill-shadow” nặng */
  --tb-ctl-shadow: 0 1px 0 rgba(255,255,255,.10) inset;

  /* ✅ NEW: Group pill (Menu + Quik AI + New chat) — DEFAULT (dark/no-preference) */
  --tb-group-bg: rgba(255,255,255,.92);              /* pill trắng nổi trên nền tối */
  --tb-group-border: rgba(255,255,255,.18);
  --tb-group-sep: rgba(2,21,80,.10);
  --tb-group-hover: rgba(15,23,42,.06);
  --tb-group-press: rgba(15,23,42,.10);
  --tb-group-shadow:
  0 18px 52px rgba(0,0,0,.34),
  0 1px 0 rgba(255,255,255,.55) inset,
  0 0 0 1px rgba(255,255,255,.10);

      /* ✅ NEW: Group pill foreground (light) */
      --tb-group-fg: #0f172a;

  /* ✅ Profile button tokens (sync với pill trắng trên topbar) */
  --tb-profile-fg: #0f172a;                 /* icon mực tối */
  --tb-profile-bg: var(--tb-group-bg);      /* nền trắng như pill */
  --tb-profile-border: var(--tb-group-border);
  --tb-profile-shadow: var(--tb-group-shadow);

/* ===================== NAV ITEM TOKENS (Tabs + History đồng bộ) ===================== */
--nav-item-radius: 12px;

/* hover: phẳng, nhẹ */
--nav-item-hover-bg: rgba(255,255,255,.06);
--nav-item-hover-border: transparent;

/* active: KHÔNG nền bọc — chỉ còn accent trái */
--nav-item-active-bg: transparent;
--nav-item-active-border: transparent;
--nav-item-active-fg: #ffffff;

/* accent bar (thanh trái) */
--nav-item-accent: rgba(59,130,246,.95);
--nav-item-accent-glow: rgba(59,130,246,.22);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fb; --card:#fff; --card-soft:#f8fbff; --elev:#fff; --border:#e6ebf3;
    --text:#0f172a; --muted:#64748b; --ghost:#e9eef8;
    --shadow:0 14px 28px rgba(2,21,80,.08); --shadow-soft:0 8px 20px rgba(2,21,80,.06);
    --user:var(--user-l); --user-border:var(--user-l-border); --user-text:var(--user-l-text);
    --assist:var(--assist-l); --assist-border:var(--assist-l-border); --assist-text:var(--assist-l-text);


/* TOPBAR tokens (light) — glass mờ, không kẻ line */
--topbar-bg: rgba(255,255,255,.38);       /* ✅ mờ hơn */
--topbar-border: transparent;             /* ✅ bỏ line */
--topbar-fg: #0f172a;

/* ✅ NEW: Topbar scroll fade (light) */
--topbar-scroll: 0%;
--topbar-bg-top: rgba(255,255,255,.22);
--topbar-bg-deep: rgba(255,255,255,.78);
--topbar-scrim-top: rgba(255,255,255,.00);
--topbar-scrim-deep: rgba(255,255,255,.35);

/* control flat */
--tb-ctl-bg: rgba(15,23,42,.05);
--tb-ctl-border: rgba(2,21,80,.10);
--tb-ctl-hover: rgba(15,23,42,.08);
--tb-ctl-press: rgba(15,23,42,.11);
--tb-ctl-shadow: 0 1px 0 rgba(255,255,255,.75) inset;

/* ✅ NEW: Group pill (Menu + Quik AI + New chat) — trắng, phẳng, liền mạch */
--tb-group-bg: #ffffff;
--tb-group-border: rgba(2,21,80,.14);
--tb-group-sep: rgba(2,21,80,.10);
--tb-group-hover: rgba(15,23,42,.06);
--tb-group-press: rgba(15,23,42,.10);
--tb-group-shadow:
  0 14px 34px rgba(2,21,80,.14),
  0 1px 0 rgba(255,255,255,.75) inset,
  0 0 0 1px rgba(2,21,80,.08);

    /* ✅ Profile tokens (light) — TRẮNG HẲN như các nút pill khác */
    --tb-profile-fg: #0f172a;
    --tb-profile-bg: #ffffff;
    --tb-profile-border: rgba(2,21,80,.14);
    --tb-profile-shadow: var(--tb-group-shadow);
  }
}
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: dark){
  :root{
    --user:var(--user-d); --user-border:var(--user-d-border); --user-text:var(--user-d-text);
    --assist:var(--assist-d); --assist-border:var(--assist-d-border); --assist-text:var(--assist-d-text);


  }
}

/* ===================== BASE ===================== */
/* ✅ HARD-KILL: hidden attribute luôn là display:none */
[hidden]{
  display:none !important;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding-top: var(--topbar-h); /* chừa đúng chiều cao topbar */

  /* ✅ FIX: bỏ toàn bộ màu nền dưới cùng (pastel floor + glow) */
  background: var(--bg);

  /* Thu nhỏ font một chút để hiển thị được nhiều block hơn */
  color:var(--text);
  font:14px/1.45 var(--font);
}
a{color:inherit}
:focus-visible{outline:2px solid #93c5fd; outline-offset:2px; border-radius:10px}

/* ===== Background riêng cho màn “Kết quả train” ===== */
body.sft-theme{
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(168,85,247,.18), transparent),
    radial-gradient(1200px 700px at -10% 30%, rgba(59,130,246,.16), transparent),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    var(--bg-floor); /* dùng pastel floor theo system mode */

  /* 🔽 Thu nhỏ mạnh chiều cao phần head để nhìn được nhiều nội dung hơn */
  --sft-head-h: 140px;          /* giảm thêm so với 170px → header thấp rõ rệt */
  --sft-head-h-compact: 76px;   /* khi vào compact mode càng mỏng hơn */
}

/* ===== SFT & HISTORY grid loading / empty state (spinner + message giữa khung) ===== */
#sftGrid .sft-state,
#historyGrid .sft-state{
  grid-column: 1 / -1;  /* span hết 2 cột: index + nội dung */
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.sft-loader{
  width:44px;
  height:44px;
  border-radius:999px;
  border:3px solid rgba(148,163,184,.28);
  border-top-color:var(--sft-hero-1);
  border-right-color:var(--sft-hero-2);
  box-shadow:
    0 0 0 1px rgba(15,23,42,.45) inset,
    0 0 24px rgba(59,130,246,.45);
  animation:sft-spin .9s linear infinite;
}

/* State trống cho Kết quả train (không có dữ liệu) */
#sftGrid .sft-state.sft-state-empty{
  min-height:260px; /* giữ cùng chiều cao với spinner */
}

.sft-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  max-width:420px;
}

.sft-empty-ic{
  font-size:26px;
  margin-bottom:4px;
  opacity:.9;
}

.sft-empty-title{
  font-weight:700;
  font-size:15px;
}

.sft-empty-msg{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}

@keyframes sft-spin{
  to{ transform:rotate(360deg); }
}

/* Empty state riêng cho Lịch sử train (file JSONL rỗng / không có dữ liệu) */
#historyGrid .sft-state.hist-empty{
  min-height:260px;
}

.hist-empty-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  max-width:420px;
}

.hist-empty-ic{
  font-size:26px;
  margin-bottom:4px;
  opacity:.9;
}

.hist-empty-title{
  font-weight:700;
  font-size:15px;
}

.hist-empty-msg{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}
/* ===================== TOPBAR (ChatGPT-like, slim) ===================== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  height:var(--topbar-h);
  display:flex;
  align-items:center;

  /* ✅ nền topbar đổi theo scroll: trong → đậm dần */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,0)
    ),
    color-mix(in srgb, var(--topbar-bg-top) calc(100% - var(--topbar-scroll)), var(--topbar-bg-deep) var(--topbar-scroll));

  color: var(--topbar-fg);

  /* ✅ bỏ line */
  border-bottom: 0 !important;

  /* ✅ glass */
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);

  /* ✅ mặc định không shadow để pill nổi */
  box-shadow: none;

  /* ✅ để dùng pseudo-element fade edge */
  position: fixed;
  isolation: isolate;
}

/* ✅ “fade edge” phía dưới topbar: nội dung phía sau nhìn thấy rồi mờ dần */
.topbar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height: 18px;

  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--topbar-scrim-top) calc(100% - var(--topbar-scroll)), var(--topbar-scrim-deep) var(--topbar-scroll)),
    transparent
  );

  pointer-events:none;
  z-index: 0;
}

/* ✅ khi scroll nhẹ: thêm shadow rất nhẹ (không phải đường kẻ) */
.topbar.is-scrolled{
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
@media (prefers-color-scheme: light){
  .topbar.is-scrolled{
    box-shadow: 0 10px 26px rgba(2,21,80,.10);
  }
}

.topbar-inner{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 var(--topbar-pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--topbar-gap);
  height:100%;

  /* NEW: để canh title chính giữa tuyệt đối */
  position:relative;
}

/* Left: toggle + brand */
.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-shrink:0;
}

/* ===================== TOPBAR LEFT ACTIONS (pill + model button) ===================== */
.topbar-left-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===================== TOPBAR PILL GROUP (Side + New chat) ===================== */
.topbar-pill{
  display:inline-flex;
  align-items:center;
  height: var(--tb-ctl-h);
  border-radius: 999px;

  background: var(--tb-group-bg);
  border: 1px solid var(--tb-group-border);
  box-shadow: var(--tb-group-shadow);

  /* ✅ quan trọng: icon/text bên trong ăn màu mực tối */
  color: var(--tb-group-fg);

  overflow:hidden; /* để separator + hover “liền mạch” */
}

/* Reset style nút con để “ăn” pill group */
.topbar-pill > button{
  height: var(--tb-ctl-h);
  width: var(--tb-ctl-h);
  min-width: var(--tb-ctl-h);

  padding: 0;
  margin: 0;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: inherit;
  border-radius: 0;

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
}

/* Separator giữa 2 nút trong pill */
.topbar-pill > button + button{
  border-left: 1px solid var(--tb-group-sep);
}

.topbar-pill > button:hover{
  background: var(--tb-group-hover);
}
.topbar-pill > button:active{
  background: var(--tb-group-press);
  transform: translateY(1px);
}

.topbar-pill > button:focus-visible{
  outline: 2px solid rgba(147,197,253,.95);
  outline-offset: 2px;
}

/* ===================== QUIK AI MODEL PILL (match group pill) ===================== */
/* ✅ Nút Quik AI nằm ngoài group pill nhưng “nhìn” y hệt group pill */
#topbarQuikAiBtn.topbar-model-btn{
  height: var(--tb-ctl-h);
  border-radius: 999px;
  padding: 0 var(--tb-ctl-pad-x);

  background: var(--tb-group-bg) !important;
  border: 1px solid var(--tb-group-border) !important;
  box-shadow: var(--tb-group-shadow) !important;

  color: var(--tb-group-fg) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .06s ease;
}

#topbarQuikAiBtn.topbar-model-btn:hover{
  background: color-mix(in srgb, var(--tb-group-bg) 92%, var(--tb-group-hover)) !important;
}

#topbarQuikAiBtn.topbar-model-btn:active{
  background: color-mix(in srgb, var(--tb-group-bg) 88%, var(--tb-group-press)) !important;
  transform: translateY(1px);
}

/* trạng thái open: viền nhấn nhẹ theo primary nhưng vẫn cùng “hệ pill trắng” */
#topbarQuikAiBtn.topbar-model-btn[aria-expanded="true"]{
  border-color: color-mix(in srgb, var(--tb-group-border) 55%, rgba(59,130,246,.55)) !important;
  background: color-mix(in srgb, var(--tb-group-bg) 92%, rgba(59,130,246,.10)) !important;
}

/* caret + label giữ gọn */
#topbarQuikAiBtn.topbar-model-btn .topbar-quik-ai-caret{
  opacity: .75;
}

/* Nút model (vẫn dùng #topbarQuikAiBtn), giờ là nút riêng ngoài pill */
#topbarQuikAiBtn.topbar-model-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 var(--tb-ctl-pad-x);
  height: var(--tb-ctl-h);
}

/* ===================== TOPBAR QUICK MODE PILL (Đối thủ + Agent) ===================== */
.topbar-mode-pill{
  display:inline-flex;
  align-items:center;
  height: var(--tb-ctl-h);
  border-radius: 999px;

  background: var(--tb-group-bg);
  border: 1px solid var(--tb-group-border);
  box-shadow: var(--tb-group-shadow);
  color: var(--tb-group-fg);

  overflow:hidden;
  position:relative;
  flex: 0 0 auto;
  isolation: isolate;

  --tb-mode-on-bg: color-mix(in srgb, var(--tb-group-bg) 66%, rgba(96,165,250,.36));
  --tb-mode-on-ring: rgba(96,165,250,.74);
  --tb-mode-on-glow: rgba(59,130,246,.40);
  --tb-mode-on-text: color-mix(in srgb, var(--tb-group-fg) 82%, #dbeafe 18%);

  --tb-mode-loading-bg: color-mix(in srgb, var(--tb-group-bg) 62%, rgba(96,165,250,.34));
  --tb-mode-loading-ring: rgba(96,165,250,.76);
  --tb-mode-loading-spin-a: rgba(147,197,253,.96);
  --tb-mode-loading-spin-b: rgba(59,130,246,.96);
}

/* Separator giữa 2 nút trong pill */
.topbar-mode-pill > button + button{
  border-left: 1px solid var(--tb-group-sep);
}

/* ✅ Reset sạch để KHÔNG bị dính style panel */
.topbar-mode-pill .btn.chart-toggle,
.topbar-mode-pill .btn.agent-toggle{
  height: var(--tb-ctl-h) !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;

  padding: 0 12px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 8px;

  white-space: nowrap;
  line-height: 1;

  color: inherit !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;

  cursor: pointer;

  position: relative !important;
  z-index: 1 !important;

  transition: transform .10s ease, background .14s ease, box-shadow .14s ease !important;
}
.topbar-mode-pill .btn.chart-toggle[aria-pressed="false"],
.topbar-mode-pill .btn.agent-toggle[aria-pressed="false"]{
  color: color-mix(in srgb, var(--tb-group-fg) 78%, rgba(100,116,139,.92)) !important;
}

/* Hover/Press */
.topbar-mode-pill .btn.chart-toggle:hover,
.topbar-mode-pill .btn.agent-toggle:hover{
  background: var(--tb-group-hover) !important;
}
.topbar-mode-pill .btn.chart-toggle:active,
.topbar-mode-pill .btn.agent-toggle:active{
  transform: translateY(1px) !important;
  background: var(--tb-group-press) !important;
}

/* Pressed (toggle ON) – highlight nhẹ theo primary */
.topbar-mode-pill .btn.chart-toggle[aria-pressed="true"],
.topbar-mode-pill .btn.agent-toggle[aria-pressed="true"]{
  color: var(--tb-mode-on-text) !important;
  background: var(--tb-mode-on-bg) !important;
  box-shadow:
    0 0 0 1px var(--tb-mode-on-ring) inset,
    0 6px 16px -10px var(--tb-mode-on-glow),
    var(--tb-group-shadow);
}
.topbar-mode-pill[data-active="chart"]{
  box-shadow:
    0 0 0 1px var(--tb-mode-on-ring) inset,
    0 0 0 3px rgba(96,165,250,.22),
    var(--tb-group-shadow);
}
.topbar-mode-pill[data-active="agent-loading"]{
  box-shadow:
    0 0 0 1px var(--tb-mode-loading-ring) inset,
    0 0 0 3px rgba(96,165,250,.26),
    var(--tb-group-shadow);
}
.topbar-mode-pill[data-active="agent"]{
  box-shadow:
    0 0 0 1px var(--tb-mode-on-ring) inset,
    0 0 0 3px rgba(96,165,250,.22),
    var(--tb-group-shadow);
}
.topbar-mode-pill .btn.agent-toggle .agent-btn-ic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
}
.topbar-mode-pill .btn.agent-toggle .agent-btn-label{
  letter-spacing: .01em;
}
.topbar-mode-pill .btn.agent-toggle[data-state="loading"]{
  color: var(--tb-mode-on-text) !important;
  background: var(--tb-mode-loading-bg) !important;
  box-shadow:
    0 0 0 1px var(--tb-mode-loading-ring) inset,
    0 6px 16px -10px rgba(59,130,246,.42),
    var(--tb-group-shadow);
}
.topbar-mode-pill .btn.agent-toggle[data-state="loading"] .agent-btn-ic{
  font-size: 0;
  border-radius: 999px;
  border: 2px solid rgba(147,197,253,.45);
  border-top-color: var(--tb-mode-loading-spin-a);
  border-right-color: var(--tb-mode-loading-spin-b);
  animation: tbAgentSpin .9s linear infinite;
}
.topbar-mode-pill .btn.agent-toggle[data-state="agent"]{
  color: var(--tb-mode-on-text) !important;
  background: color-mix(in srgb, var(--tb-group-bg) 64%, rgba(59,130,246,.36)) !important;
  box-shadow:
    0 0 0 1px var(--tb-mode-on-ring) inset,
    0 6px 16px -10px rgba(37,99,235,.44),
    var(--tb-group-shadow);
}
.topbar-mode-pill .btn.agent-toggle[data-state="agent"] .agent-btn-ic{
  filter: saturate(1.08) drop-shadow(0 0 8px rgba(147,197,253,.35));
}
@keyframes tbAgentSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Focus ring */
.topbar-mode-pill .btn.chart-toggle:focus-visible,
.topbar-mode-pill .btn.agent-toggle:focus-visible{
  outline: 2px solid rgba(147,197,253,.95);
  outline-offset: 2px;
}

/* ===================== MODE TOGGLE BUTTON (Đối thủ) — FULL REDESIGN ===================== */
/* ✅ Chỉ giữ cho khu vực panel / mode-switch-row (nếu có dùng), KHÔNG ảnh hưởng topbar */
.btn.chart-toggle{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 12px;
  border-radius:16px;

  font-size:13px;
  font-weight:850;
  letter-spacing:.01em;

  color: var(--mt-ink, #eef2ff);
  border: 1px solid var(--mt-border, rgba(191,219,254,.55));

  background:
    radial-gradient(900px 240px at 12% 0%, var(--mt-a1, rgba(59,130,246,.38)), transparent 60%),
    radial-gradient(900px 240px at 88% 0%, var(--mt-a2, rgba(236,72,153,.26)), transparent 62%),
    linear-gradient(135deg, rgba(2,6,23,.92), rgba(15,23,42,.92));

  box-shadow:
    0 14px 34px rgba(15,23,42,.55),
    0 0 0 1px rgba(15,23,42,.92);

  position:relative;
  overflow:hidden;

  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);

  transition:
    transform .14s ease-out,
    filter .14s ease-out,
    border-color .14s ease-out,
    box-shadow .14s ease-out,
    background .14s ease-out;
}

/* ✅ Không shimmer nữa */
.btn.chart-toggle::before{ content:none !important; }

/* Hover/Active (panel) */
.btn.chart-toggle:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(219,234,254,.80);
  box-shadow:
    0 18px 44px rgba(15,23,42,.66),
    0 0 0 1px rgba(59,130,246,.22);
}
.btn.chart-toggle:active{
  transform: translateY(1px) scale(.99);
  filter: brightness(1.0);
  box-shadow:
    0 10px 26px rgba(15,23,42,.70),
    0 0 0 1px rgba(129,140,248,.22);
}
.btn.chart-toggle:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(191,219,254,.85),
    0 0 0 4px rgba(59,130,246,.35),
    0 18px 44px rgba(15,23,42,.58);
}

/* Đối thủ: blue/pink */
.btn.chart-toggle{
  --mt-ink: #eef2ff;
  --mt-border: rgba(191,219,254,.60);
  --mt-a1: rgba(59,130,246,.42);
  --mt-a2: rgba(236,72,153,.28);
}

/* Pressed / Active */
.btn.chart-toggle[aria-pressed="true"]{
  border-color: rgba(59,130,246,.78);
  background:
    radial-gradient(900px 240px at 12% 0%, rgba(59,130,246,.55), transparent 60%),
    radial-gradient(900px 240px at 88% 0%, rgba(236,72,153,.20), transparent 62%),
    linear-gradient(135deg, rgba(2,6,23,.92), rgba(30,58,138,.40));
  box-shadow:
    0 18px 44px rgba(15,23,42,.64),
    0 0 0 1px rgba(59,130,246,.28);
}

/* LIGHT MODE */
@media (prefers-color-scheme: light){
  .btn.chart-toggle{
    color:#0f172a;
    border-color: rgba(148,163,184,.55);

    background:
      radial-gradient(900px 240px at 12% 0%, rgba(191,219,254,.92), transparent 60%),
      radial-gradient(900px 240px at 88% 0%, rgba(254,226,226,.80), transparent 62%),
      linear-gradient(180deg,#ffffff,#f5f7ff);

    box-shadow:
      0 14px 30px rgba(15,23,42,.14),
      0 0 0 1px rgba(148,163,184,.30);
  }

  .btn.chart-toggle{
    --mt-a1: rgba(147,197,253,.95);
    --mt-a2: rgba(252,165,165,.55);
  }

  .btn.chart-toggle[aria-pressed="true"]{
    border-color: rgba(59,130,246,.55);
    background:
      radial-gradient(900px 240px at 12% 0%, rgba(191,219,254,.98), transparent 60%),
      radial-gradient(900px 240px at 88% 0%, rgba(254,226,226,.70), transparent 62%),
      linear-gradient(180deg,#ffffff,#eff6ff);
  }
}

/* ✅ Bỏ hẳn title center như yêu cầu */
.topbar-center,
.topbar-title{
  display:none !important;
}

/* Right: actions + profile */
.topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  flex-shrink:0;
  margin-left:auto;
}

/* ===== Brand nhỏ gọn như ChatGPT ===== */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
  font-size:15px;
  line-height:1;
  opacity:.95;
}
.logo-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:conic-gradient(from 180deg at 50% 50%, #fff, #a5b4fc, #60a5fa, #fff);
  box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 10px rgba(255,255,255,.18) inset;
}

/* ===== Topbar SVG icon (auto contrast via currentColor) ===== */
.topbar-ic{
  width:18px;
  height:18px;
  display:block;
}
.topbar-ic rect,
.topbar-ic path,
.topbar-ic line,
.topbar-ic circle{
  fill:none;
  stroke:currentColor;

  stroke-width:1.25;
  opacity:.78;

  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}


/* ===================== QUIK AI HEADER OVERLAY — V5 (BALANCED, STRICT SCOPED) ===================== */
/* Chỉ chỉnh UI bên trong overlay, KHÔNG đụng layout ngoài. Giữ nguyên ID/DOM. */

#quikAiHeaderOverlay{
  position: fixed;
  inset: 0;
  z-index: 10080;
  pointer-events: none;
  background: transparent;
}

#quikAiHeaderOverlay.hidden,
#quikAiHeaderOverlay[hidden],
#quikAiHeaderOverlay[aria-hidden="true"]{
  display: none !important;
}

/* Panel ngoài: canh giữa theo tổng thể màn, không tạo scroll lock */
#quikAiHeaderOverlay .qa-overlay-panel{
  position: fixed;

  /* ✅ FIX: tránh topbar + fade-edge (18px) đè lên overlay */
  top: calc(var(--topbar-h) + 18px + 12px + env(safe-area-inset-top, 0px));

  /* ✅ FIX LỆCH: canh theo inset giống .pane (padding 18px) */
  left: 18px;
  right: 18px;
  width: auto;

  transform: none;

  z-index: 10081;
  pointer-events: auto;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  overflow: visible;
  height: auto;
}

/* Khối header overlay (cụm chat-head) */
#quikAiHeaderOverlay .qa-chat-head{
  margin: 0 !important;

  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--card) 82%, transparent);

  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.06) inset;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  position: relative;
  z-index: 10050;
  isolation: isolate;

  padding: 12px 14px !important;

  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-areas:
    "bar"
    "controls";
  gap: 10px;
}

/* ===== BAR (MODEL LEFT • RAG STRETCH) ===== */
#quikAiHeaderOverlay .chat-head-bar{
  grid-area: bar;
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

/* ===================== MODEL GROUP (surface đồng bộ với RAG) ===================== */
#quikAiHeaderOverlay .qa-model-wrap{
  flex: 0 0 clamp(320px, 34vw, 460px);
  min-width: 300px;
  max-width: 520px;
  min-width: 0;
}

/* Surface giống .chat-rag-picker để đồng bộ chiều cao */
#quikAiHeaderOverlay .qa-model-group{
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 13px 10px;
  border-radius: 14px;

  background: color-mix(in srgb, var(--card-soft) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;

  /* ✅ FLAT: bỏ shadow */
  box-shadow: none !important;

  height: 100%;
  box-sizing: border-box;
}

/* Model block: giữ cân đối, không “ăn” quá nhiều */
#quikAiHeaderOverlay .qa-model-bar{
  flex: 0 0 clamp(280px, 30vw, 380px);
  min-width: 260px;
  max-width: 420px;
}
/* ✅ SR-ONLY: giữ hint trong DOM để JS update nhưng không chiếm layout */
#quikAiHeaderOverlay .sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ✅ Top bar: label + ? thẳng hàng, không còn “em hint” đẩy layout */
#quikAiHeaderOverlay .qa-model-bar .ctrl-label-with-help{
  align-items: center;
  min-height: 0;
}

#quikAiHeaderOverlay .qa-model-bar .ctrl-label-main{
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
 
/* Model help có click -> pointer (các help khác vẫn “hover tooltip” là default) */
#quikAiHeaderOverlay #chatModelHelp{
  cursor: pointer;
}

/* ✅ RAG block: chia đều 50/50 với Model */
#quikAiHeaderOverlay .qa-rag-bar{
  flex: 1 1 auto;
  min-width: 0;

  /* ✅ để picker stretch theo chiều cao hàng, khớp với cụm Model preset */
  display: flex;
  align-items: stretch;
}

/* picker: tinh tế, đồng bộ, tự wrap mượt */
#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  padding: 13px 10px;
  border-radius: 14px;

  background: color-mix(in srgb, var(--card-soft) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;

  /* ✅ FLAT: bỏ shadow */
  box-shadow: none !important;

  margin: 0 !important;
  height: 100%;
}

/* Ẩn nhãn RAG (nếu bạn muốn giữ UI gọn như đang làm) */
#quikAiHeaderOverlay .chat-rag-label{ display: none !important; }

/* ===================== RAG SELECT CARET — FIX LỆCH MŨI TÊN (V1) ===================== */
/* ✅ Mục tiêu:
   - Tắt native arrow (Chrome/macOS hay lệch)
   - Dùng caret SVG làm background-image, luôn center
   - Padding-right cố định để text không đè caret
*/

#quikAiHeaderOverlay .chat-rag-picker select,
#quikAiHeaderOverlay .chat-rag-picker input{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;

  font-size: 13px;
  font-weight: 650;
  line-height: 1;

  color: var(--text);
  background: color-mix(in srgb, var(--card) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;

  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;

  min-width: 160px;
  max-width: 360px;
  width: auto;
  flex: 0 0 auto;

  /* ✅ đồng bộ baseline để nhìn “thẳng hàng” */
  box-sizing: border-box;
}

/* ✅ Chỉ áp dụng cho SELECT: kill native arrow + gắn caret SVG */
#quikAiHeaderOverlay .chat-rag-picker select{
  /* chừa chỗ caret */
  padding-right: 44px;

  /* kill native arrow */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* caret SVG (center chuẩn, không lệch) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important; /* ✅ canh giữa dọc */
  background-size: 18px 18px !important;

  /* giữ nền như bạn set, tránh bị override bởi UA */
  background-color: color-mix(in srgb, var(--card) 72%, transparent) !important;
}

/* IE/old Edge (an toàn) */
#quikAiHeaderOverlay .chat-rag-picker select::-ms-expand{
  display:none;
}

/* Folder/File/Input: được phép “ăn” rộng hơn để cân đối */
#quikAiHeaderOverlay #chatRagFolderSelect,
#quikAiHeaderOverlay #chatRagFileSelect,
#quikAiHeaderOverlay #chatRagFolder{
  flex: 1 1 300px;
  min-width: 220px;
  max-width: none;
}

/* Mode select: gọn */
#quikAiHeaderOverlay #chatRagMode{
  flex: 0 0 auto;
  min-width: 160px;
}

/* Hover/Focus: tinh tế, không lòe */
#quikAiHeaderOverlay .chat-rag-picker select:hover,
#quikAiHeaderOverlay .chat-rag-picker input:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.35)) !important;
}

#quikAiHeaderOverlay .chat-rag-picker select:focus,
#quikAiHeaderOverlay .chat-rag-picker input:focus{
  border-color: rgba(59,130,246,.70) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}

/* Refresh button */
#quikAiHeaderOverlay .chat-rag-refresh{
  width: 40px;
  height: 40px;
  border-radius: 12px;

  background: color-mix(in srgb, var(--card) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  color: var(--text);
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
  flex: 0 0 auto;
}

#quikAiHeaderOverlay .chat-rag-refresh:hover{ transform: translateY(-1px); }
#quikAiHeaderOverlay .chat-rag-refresh:active{ transform: translateY(0); }


/* Config toggle (pill) — CHỈ áp cho dạng pill/switch, KHÔNG áp cho nút icon */
#quikAiHeaderOverlay .config-toggle:not(.config-icbtn){
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  border-radius: 999px;
  padding: 0 12px;

  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;

  background: color-mix(in srgb, var(--card) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);

  /* ✅ FLAT: bỏ shadow */
  box-shadow: none !important;

  color: var(--text);
  cursor: pointer;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* ✅ bỏ transition shadow */
  transition: transform .12s ease, border-color .18s ease, background .18s ease;
}

#quikAiHeaderOverlay .config-toggle:not(.config-icbtn):hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.28));
  box-shadow: none !important; /* ✅ FLAT */
}

#quikAiHeaderOverlay .config-toggle:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.28));
  box-shadow: none !important; /* ✅ FLAT */
}

#quikAiHeaderOverlay .config-toggle-switch{
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  flex: 0 0 auto;
  transition: background .18s ease;
}

#quikAiHeaderOverlay .config-toggle-thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s ease;
}

#quikAiHeaderOverlay .config-toggle[aria-expanded="true"]{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.32);
  box-shadow: none !important; /* ✅ FLAT */
}
#quikAiHeaderOverlay .config-toggle[aria-expanded="true"] .config-toggle-switch{
  background: rgba(34,197,94,.55);
}
#quikAiHeaderOverlay .config-toggle[aria-expanded="true"] .config-toggle-thumb{
  transform: translateX(16px);
}

#quikAiHeaderOverlay .config-toggle::before,
#quikAiHeaderOverlay .config-toggle::after{
  content: none !important;
}

/* Ẩn actions-stack (reset hidden) */
#quikAiHeaderOverlay .chat-rag-picker .actions-stack{ display: none !important; }

/* ===================== SETTING ICON BUTTON — FIX SHAPE + ICON ===================== */
#quikAiHeaderOverlay .chat-rag-picker #chatConfigToggle.config-icbtn{
  /* ✅ khóa hình dạng, không cho .btn/.ghost làm bo tròn */
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;

  padding: 0 !important;
  border-radius: 12px !important; /* ✅ vuông bo nhẹ, không chip */
  margin-left: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: color-mix(in srgb, var(--card) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
  box-shadow: none !important; /* ✅ FLAT */

  color: var(--text) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hover/Active giống hệ control */
#quikAiHeaderOverlay .chat-rag-picker #chatConfigToggle.config-icbtn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.30)) !important;
  box-shadow: none !important; /* ✅ FLAT */
}
#quikAiHeaderOverlay .chat-rag-picker #chatConfigToggle.config-icbtn:active{
  transform: translateY(0);
}

/* Expanded highlight */
#quikAiHeaderOverlay .chat-rag-picker #chatConfigToggle.config-icbtn[aria-expanded="true"]{
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.32) !important;
  box-shadow: none !important; /* ✅ FLAT */
}

/* ✅ icon gear: FIX TRIỆT ĐỂ (không khuyết, không bị clip stroke) */
#quikAiHeaderOverlay .chat-rag-picker #chatConfigToggle.config-icbtn .ic{
  width: 18px;
  height: 18px;
  display: block;

  /* ✅ quan trọng: tránh SVG bị cắt stroke ở mép */
  overflow: visible !important;
}

/* ✅ áp stroke cho TẤT CẢ phần tử trong SVG (circle + path + line...) */
#quikAiHeaderOverlay .chat-rag-picker #chatConfigToggle.config-icbtn .ic *{
  fill: none !important;
  stroke: currentColor !important;

  /* stroke hơi dày hơn chút cho rõ, nhưng không bị clip vì đã overflow:visible */
  stroke-width: 1.8 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-miterlimit: 10 !important;

  opacity: .90 !important;
  vector-effect: non-scaling-stroke;
}

/* ===== CONTROLS PANEL (expand/collapse) ===== */
#quikAiHeaderOverlay #chatControls{
  grid-area: controls;
  margin-top: 2px;
}

/* Panel controls: giữ trong flow, co giãn mượt */
#quikAiHeaderOverlay .controls-wrap{
  position: relative;
  z-index: 10060;

  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 14px;

  background: color-mix(in srgb, var(--card-soft) 86%, transparent);
  padding: 12px 14px;
  margin: 0;

  width: 100%;
  max-width: 100%;

  box-shadow: 0 18px 40px rgba(0,0,0,.18);

  transform-origin: top center;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  visibility: visible;

  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  will-change: transform, opacity, filter, max-height;
  transition:
    opacity .18s ease,
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    max-height .18s ease,
    padding .18s ease,
    border-color .18s ease,
    visibility 0s linear 0s;
}

/* Khi thu gọn */
#quikAiHeaderOverlay .controls-wrap.collapsed{
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  filter: blur(2px);
  box-shadow: none;

  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;

  pointer-events: none;
  visibility: hidden;

  transition:
    opacity .18s ease,
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    max-height .18s ease,
    padding .18s ease,
    border-color .18s ease,
    visibility 0s linear .18s;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #quikAiHeaderOverlay .controls-wrap,
  #quikAiHeaderOverlay .controls-wrap.collapsed{
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ===== GRID controls: CHỈ CÒN Model advanced (bỏ Temp/MaxTok) ===== */
#quikAiHeaderOverlay .ctrl-row{
  display: grid;
  grid-template-columns: 1fr; /* ✅ 1 cột */
  row-gap: 10px;
  align-items: start;
}

/* Model advanced chiếm full hàng */
#quikAiHeaderOverlay .ctrl-row > .ctrl.model-advanced{
  grid-column: 1 / -1;
}
/* Ctrl base */
#quikAiHeaderOverlay .ctrl{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

#quikAiHeaderOverlay .ctrl-label-with-help{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
}

#quikAiHeaderOverlay .ctrl-label-main{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* ✅ Model advanced label: 1 dòng, nút ✏️ sát cạnh text */
#quikAiHeaderOverlay .ctrl.model-advanced .ctrl-label-with-help{
  align-items: center;            /* canh giữa theo trục dọc */
  justify-content: flex-start;    /* không đẩy nút sang phải */
}

/* inline row cho title + edit */
#quikAiHeaderOverlay .ctrl.model-advanced .ctrl-label-main.ctrl-label-inline{
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* text 1 dòng, không xuống dòng */
#quikAiHeaderOverlay .ctrl.model-advanced .ctrl-label-title{
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ẩn "actions" cũ để tránh chiếm chỗ (vẫn giữ node để tương thích) */
#quikAiHeaderOverlay .ctrl.model-advanced .ctrl-label-actions{
  display: none !important;
}


/* Action icons */
#quikAiHeaderOverlay .ctrl-label-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Model select/custom + inputs trong controls */
#quikAiHeaderOverlay .ctrl-model{
  position: relative;
}

/* ✅ CHỈ áp dụng cho Model ID select trong #chatControls, KHÔNG đè topbar preset */
#quikAiHeaderOverlay #chatControls .ctrl-model #chatModelSelect,
#quikAiHeaderOverlay .ctrl input[type="text"],
#quikAiHeaderOverlay .ctrl input[type="number"],
#quikAiHeaderOverlay .ctrl textarea{
  height: 40px;
  width: 100%;
  border-radius: 12px;

  background: color-mix(in srgb, var(--card) 74%, transparent);
  color: var(--text);

  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  padding: 0 12px;

  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}


/* ===================== MODEL CUSTOM ROW (input + Apply button) ===================== */
#quikAiHeaderOverlay .ctrl-input-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  width:100%;
  min-width:0;
}


/* ✅ Nút Áp dụng: đồng bộ surface + glow tinh tế như header overlay */
#quikAiHeaderOverlay .ctrl-input-row #chatModelApply{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;

  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;

  color: var(--text);
  background: color-mix(in srgb, rgba(59,130,246,.18) 70%, var(--card) 30%);
  border: 1px solid color-mix(in srgb, rgba(59,130,246,.45) 65%, var(--border) 35%);

  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    0 0 0 1px rgba(59,130,246,.18) inset;

  cursor: pointer;
  flex: 0 0 auto;

  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

#quikAiHeaderOverlay .ctrl-input-row #chatModelApply:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.70);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 0 1px rgba(59,130,246,.22) inset,
    0 10px 22px rgba(37,99,235,.10);
}

#quikAiHeaderOverlay .ctrl-input-row #chatModelApply:active{
  transform: translateY(0);
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    0 0 0 1px rgba(59,130,246,.18) inset;
}

/* Disabled (khi chưa nhập ID) */
#quikAiHeaderOverlay .ctrl-input-row #chatModelApply:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#quikAiHeaderOverlay .ctrl-model #chatModelSelect:focus-visible,
#quikAiHeaderOverlay .ctrl-model #chatModelCustom:focus-visible,
#quikAiHeaderOverlay .ctrl input[type="text"]:focus-visible,
#quikAiHeaderOverlay .ctrl input[type="number"]:focus-visible,
#quikAiHeaderOverlay .ctrl textarea:focus-visible{
  border-color: rgba(59,130,246,.85);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.75),
    0 0 0 3px rgba(37,99,235,.22);
}

/* Nút ✏️ */
#quikAiHeaderOverlay .ctrl-edit-toggle{
  width: 22px;
  height: 22px;
  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--border) 65%, rgba(148,163,184,.55));
  background: color-mix(in srgb, var(--card) 72%, transparent);

  color: var(--text);
  font-size: 11px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}


/* Nút ? tooltip */
#quikAiHeaderOverlay .ctrl-help{
  width: 20px;
  height: 20px;
  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--border) 65%, rgba(148,163,184,.55));
  background: color-mix(in srgb, var(--card) 72%, transparent);

  color: var(--text);
  font-size: 11px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: default;
  flex: 0 0 auto;

  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  position: relative;
  overflow: visible;
}

#quikAiHeaderOverlay .ctrl-help::after{
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);

  width: min(280px, calc(100vw - 60px));
  padding: 8px 10px;
  border-radius: 10px;

  font-size: 11px;
  line-height: 1.5;

  background: color-mix(in srgb, var(--card) 86%, rgba(0,0,0,.35));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);

  box-shadow: 0 12px 28px rgba(0,0,0,.35);

  opacity: 0;
  pointer-events: none;
  white-space: normal;
  text-align: left;

  z-index: 10160;
  transition: opacity .12s ease-out, transform .12s ease-out;
}

#quikAiHeaderOverlay .ctrl-help::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 2px);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent color-mix(in srgb, var(--card) 86%, rgba(0,0,0,.35)) transparent;
  opacity: 0;
  z-index: 10161;
  transition: opacity .12s ease-out, transform .12s ease-out;
}

#quikAiHeaderOverlay .ctrl-help:hover::after,
#quikAiHeaderOverlay .ctrl-help:hover::before{
  opacity: 1;
}
#quikAiHeaderOverlay .ctrl-help:hover::after{ transform: translate(-50%, 0); }
#quikAiHeaderOverlay .ctrl-help:hover::before{ transform: translate(-50%, 0); }

#quikAiHeaderOverlay .ctrl-help-right::after{
  left: auto;
  right: 0;
  transform: translate(0, -4px);
}
#quikAiHeaderOverlay .ctrl-help-right:hover::after{ transform: translate(0, 0); }
#quikAiHeaderOverlay .ctrl-help-right::before{
  left: auto;
  right: 10px;
  transform: translate(0, 2px);
}
#quikAiHeaderOverlay .ctrl-help-right:hover::before{ transform: translate(0, 0); }

/* ===== MODEL SEARCH (trong controls) ===== */
#quikAiHeaderOverlay .chat-model-search{
  width: 100%;
  margin-bottom: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  font-size: 13px;
  background: color-mix(in srgb, var(--card) 74%, transparent);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

/* ✅ Search row: input + Apply nằm chung 1 hàng */
#quikAiHeaderOverlay .model-search-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  margin-top: 2px;
}

#quikAiHeaderOverlay .model-search-row .chat-model-search{
  flex: 1 1 auto;
  min-width: 0;

  /* match height với các control khác */
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
}

#quikAiHeaderOverlay .model-search-row #chatModelApply{
  height: 40px;
  flex: 0 0 auto;
}

/* placeholder cho search */
#quikAiHeaderOverlay .model-search-row .chat-model-search::placeholder{
  color: var(--muted);
  font-size: 12px;
}

/* Suggestions trong overlay (nếu còn dùng dạng absolute) */
#quikAiHeaderOverlay .chat-model-search-suggestions{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10090;

  max-height: min(260px, calc(100vh - 180px));
  overflow-y: auto;

  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--card-soft) 92%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 4px 0;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#quikAiHeaderOverlay .chat-model-search-suggestions.hidden{
  display: none !important;
}

/* ===================== MODEL SEARCH SUGGESTIONS — INLINE DROPDOWN (V7) ===================== */
/* ✅ Mục tiêu:
   - NỀN ĐẶC (không trong suốt)
   - Section OpenAI / HuggingFace rõ ràng, không “lấp lửng”
   - Có divider + spacing đẹp
   - Nổi trên tất cả & scroll riêng
*/

#quikAiHeaderOverlay .qa-overlay-panel,
#quikAiHeaderOverlay .chat-head,
#quikAiHeaderOverlay #chatControls,
#quikAiHeaderOverlay .ctrl-model,
#quikAiHeaderOverlay .model-search-row{
  overflow: visible !important;
}

/* ✅ search row phải relative để dropdown absolute bám theo */
#quikAiHeaderOverlay #chatModelSearchRow,
#quikAiHeaderOverlay .model-search-row{
  position: relative;
}

/* ✅ Dropdown suggestions bọc trong search row */
#quikAiHeaderOverlay #chatModelSearchSuggestions,
#quikAiHeaderOverlay .chat-model-search-suggestions{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  width: 100%;
  z-index: 99999;

  /* ✅ NỀN ĐẶC (bỏ hoàn toàn transparent) */
  background: var(--card, #0f172a);
  border: 1px solid color-mix(in srgb, var(--border, #1f2a40) 92%, #000 8%);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.38);

  /* ✅ “khung” nội dung */
  padding: 6px 0;

  /* ✅ scroll riêng */
  max-height: 360px;
  overflow-y: auto;     /* ✅ chỉ scroll dọc */
  overflow-x: hidden;   /* ✅ chặn scroll ngang */

  /* ✅ chống thấy xuyên nền khi scroll (Safari/Chrome) */
  background-clip: padding-box;

  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border, #1f2a40) 85%, #000 15%) transparent;

  pointer-events: auto;
}

/* Light mode: nền trắng rõ */
@media (prefers-color-scheme: light){
  #quikAiHeaderOverlay #chatModelSearchSuggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions{
    background: #ffffff;
    border-color: color-mix(in srgb, var(--border, #cbd5e1) 92%, #000 8%);
    box-shadow: 0 16px 44px rgba(2,6,23,.14);
  }
}

/* ✅ khi thiếu chỗ dưới -> mở lên trên */
#quikAiHeaderOverlay #chatModelSearchSuggestions.open-up,
#quikAiHeaderOverlay .chat-model-search-suggestions.open-up{
  top: auto;
  bottom: calc(100% + 6px);
}

/* Scrollbar webkit */
#quikAiHeaderOverlay #chatModelSearchSuggestions::-webkit-scrollbar,
#quikAiHeaderOverlay .chat-model-search-suggestions::-webkit-scrollbar{
  width: 10px;
}
#quikAiHeaderOverlay #chatModelSearchSuggestions::-webkit-scrollbar-thumb,
#quikAiHeaderOverlay .chat-model-search-suggestions::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--border, #1f2a40) 82%, #000 18%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ===================== SECTION HEADER (OpenAI / Hugging Face / ...) ===================== */
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-section{
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted, #8ea2c8) 92%, #000 8%);
  opacity: 1;

  position: sticky;
  top: 0;
  z-index: 2;

  /* ✅ NỀN ĐẶC + line rõ */
  background: var(--card, #0f172a);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #1f2a40) 86%, #000 14%);
}

/* Light mode section */
@media (prefers-color-scheme: light){
  #quikAiHeaderOverlay .chat-model-search-suggestions .ms-section{
    background: #ffffff;
    color: color-mix(in srgb, var(--muted, #475569) 92%, #000 8%);
    border-bottom-color: color-mix(in srgb, var(--border, #cbd5e1) 88%, #000 12%);
  }
}

/* ✅ Divider giữa các nhóm: nhìn giống tab group, không lấp lửng */
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-section + .chat-model-search-suggestion{
  margin-top: 6px;
}
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-section:not(:first-child){
  border-top: 1px solid color-mix(in srgb, var(--border, #1f2a40) 70%, #000 30%);
}

/* Empty state */
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-empty{
  padding: 12px;
  font-size: 12px;
  color: color-mix(in srgb, var(--muted, #8ea2c8) 92%, #000 8%);
}

/* ===================== ITEM UI (giữ nguyên style của bạn) ===================== */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;

  padding: 10px 12px;
  text-align: left;

  border: 0;
  background: transparent;
  color: var(--text, #e6ebff);

  cursor: pointer;
  border-radius: 10px;
  margin: 2px 6px;

  outline: none;
  transition: background .14s ease, transform .12s ease, box-shadow .14s ease, border-color .14s ease;
}

/* Row1: title + badges */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion .ms-row1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

/* line1: label */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion .line1{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;

  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line2: provider + id */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion .line2{
  font-size: 12px;
  line-height: 1.25;
  color: color-mix(in srgb, var(--muted, #8ea2c8) 94%, transparent);

  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* mark highlight */
#quikAiHeaderOverlay .chat-model-search-suggestions mark{
  padding: 0 2px;
  border-radius: 6px;
  color: var(--text, #e6ebff);
  background: rgba(59,130,246,.28);
  box-shadow: 0 0 0 1px rgba(59,130,246,.18) inset;
}

/* Badges */
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-badges{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

#quikAiHeaderOverlay .chat-model-search-suggestions .ms-badge{
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;

  color: color-mix(in srgb, var(--text, #e6ebff) 92%, transparent);
  background: color-mix(in srgb, var(--card, #0f172a) 88%, #000 12%);
  border: 1px solid color-mix(in srgb, var(--border, #1f2a40) 78%, #000 22%);
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
}

/* Provider variants */
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-badge.openai{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.38);
}
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-badge.huggingface{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.36);
}

/* Group badge */
#quikAiHeaderOverlay .chat-model-search-suggestions .ms-badge.group{
  opacity: .92;
}

/* Hover/active */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion:hover{
  background: color-mix(in srgb, var(--card, #0f172a) 78%, #000 22%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* Keyboard active */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion.is-active{
  background: rgba(59,130,246,.14);
  box-shadow:
    0 12px 30px rgba(0,0,0,.26),
    0 0 0 1px rgba(59,130,246,.22) inset;
  transform: translateY(-1px);
}

/* Focus ring */
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion:focus-visible{
  box-shadow:
    0 12px 30px rgba(0,0,0,.26),
    0 0 0 1px rgba(59,130,246,.32) inset,
    0 0 0 3px rgba(37,99,235,.20);
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  #quikAiHeaderOverlay .chat-head-bar{
    flex-wrap: wrap;
  }

  /* ✅ đổi: wrap mới là khối model */
  #quikAiHeaderOverlay .qa-model-wrap{
    flex: 1 1 420px;
    min-width: min(420px, 100%);
    max-width: none;
  }

  #quikAiHeaderOverlay .qa-rag-bar{
    flex: 1 1 100%;
  }
}

@media (max-width: 860px){
  #quikAiHeaderOverlay .ctrl-row{
    grid-template-columns: 1fr;
  }
  #quikAiHeaderOverlay .qa-chat-head{
    padding: 12px !important;
  }
  #quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
    align-items: stretch;
  }
  #quikAiHeaderOverlay .chat-rag-picker select,
  #quikAiHeaderOverlay .chat-rag-picker input{
    width: 100%;
    max-width: none;
  }
}

/* Không blur main khi mở */
.qa-overlay-open main.page{ filter: none !important; }

/* ===================== MODEL WRAP (pill + nút search ở ngoài) ===================== */
#quikAiHeaderOverlay .qa-model-wrap{
  flex: 0 0 clamp(320px, 34vw, 460px);
  min-width: 300px;
  max-width: 520px;

  display: flex;
  align-items: stretch;
  gap: 10px;

  /* quan trọng: không bị co chữ trong flex */
  min-width: 0;
}

/* pill model phải “ăn” hết phần còn lại trong wrap */
#quikAiHeaderOverlay .qa-model-wrap .qa-model-bar{
  flex: 1 1 auto;
  min-width: 0;
}

/* ===================== MODEL SELECT — MATCH RAG SIZE (V8) ===================== */

/* ===================== MODEL BAR (bên trong model-group, KHÔNG còn là surface) ===================== */
#quikAiHeaderOverlay .qa-model-bar{
  position: relative;
  display: flex;
  align-items: center;

  flex: 1 1 auto;
  min-width: 0;

  /* ✅ bỏ padding/background/border/shadow vì surface đã chuyển sang .qa-model-group */
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  height: 40px; /* ✅ khóa chiều cao nội bộ */
}

/* Ẩn hẳn mọi label/hint nếu còn sót DOM cũ (an toàn) */
#quikAiHeaderOverlay .qa-model-bar .ctrl-label-with-help,
#quikAiHeaderOverlay .qa-model-bar .ctrl-label-main,
#quikAiHeaderOverlay .qa-model-bar .ctrl-label-title{
  display:none !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select{
  width: 100%;
  height: 40px;
  border-radius: 12px;

  padding: 0 44px 0 12px; /* chừa caret */

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;

  color: var(--text);
  background: color-mix(in srgb, var(--card) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;

  outline: none;
  cursor: pointer;

  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;

  box-sizing: border-box;
}

/* IE/old edge (an toàn) */
#quikAiHeaderOverlay .qa-model-bar .qa-model-select::-ms-expand{
  display:none;
}

/* Hover/press giống hệ RAG */
#quikAiHeaderOverlay .qa-model-bar .qa-model-select:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.35)) !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:active{
  transform: translateY(0);
}

/* Focus/open feel */
#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus,
#quikAiHeaderOverlay .qa-model-bar.is-open .qa-model-select{
  border-color: rgba(59,130,246,.70) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}

/* ✅ Caret SVG (không lệch font, không bị “▾” méo) */
#quikAiHeaderOverlay .qa-model-bar .qa-model-caret{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .75;

  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-caret .qa-caret-ic{
  width: 18px;
  height: 18px;
  display:block;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-caret .qa-caret-ic path{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce){
  #quikAiHeaderOverlay .qa-model-bar .qa-model-select{
    transition:none !important;
    transform:none !important;
  }
}

/* ===================== MODEL SEARCH BUTTON (nằm trong model-group) ===================== */
/* ✅ FLAT: bỏ shadow triệt để */
#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;

  padding: 0 !important;
  border-radius: 12px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: color-mix(in srgb, var(--card) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;

  /* ✅ KILL shadow */
  box-shadow: none !important;

  color: var(--text) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  flex: 0 0 auto;
  box-sizing: border-box;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.30)) !important;

  /* ✅ KILL shadow */
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn:active{
  transform: translateY(0);

  /* ✅ KILL shadow */
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn[aria-expanded="true"]{
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.32) !important;

  /* ✅ KILL shadow */
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn .ic{
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible !important;
}
#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn .ic *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .90 !important;
  vector-effect: non-scaling-stroke;
}

/* ✅ FLAT: kill shadow triệt để cho nút search cạnh model (qa-model-wrap) */
#quikAiHeaderOverlay .qa-model-wrap #chatConfigToggle.config-icbtn{
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-wrap #chatConfigToggle.config-icbtn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 55%, rgba(59,130,246,.30)) !important;
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-wrap #chatConfigToggle.config-icbtn:active{
  transform: translateY(0);
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-wrap #chatConfigToggle.config-icbtn[aria-expanded="true"]{
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.32) !important;
  box-shadow: none !important;
}

/* ===================== QUIK AI HEADER OVERLAY — FINAL CLEANUP ===================== */
/* Mục tiêu:
   - chỉ còn 1 surface chính cho toàn bộ header overlay
   - bớt layer/card lồng nhau, giảm blur + shadow nặng
   - input/button phẳng, đồng bộ, không nhảy translate gây rối mắt
*/
#quikAiHeaderOverlay .qa-overlay-panel{
  right: auto !important;
  width: min(1480px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

#quikAiHeaderOverlay .qa-chat-head{
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(148,163,184,.10));
  background: color-mix(in srgb, var(--card) 94%, rgba(255,255,255,.36));
  box-shadow:
    0 18px 42px rgba(2,6,23,.14),
    0 1px 0 rgba(255,255,255,.68) inset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 16px 18px !important;
  gap: 12px;
}

#quikAiHeaderOverlay .chat-head-bar{
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.42fr);
  gap: 12px;
  align-items: stretch;
}

#quikAiHeaderOverlay .qa-model-wrap{
  display: block;
  min-width: 0;
  max-width: none;
}

#quikAiHeaderOverlay .qa-model-group,
#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
  height: 100%;
  padding: 0;
  gap: 12px;
  border-radius: 0;
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#quikAiHeaderOverlay .qa-model-group{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
}

#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select,
#quikAiHeaderOverlay .chat-rag-picker select,
#quikAiHeaderOverlay .chat-rag-picker input,
#quikAiHeaderOverlay .model-search-row .chat-model-search,
#quikAiHeaderOverlay .ctrl input[type="text"],
#quikAiHeaderOverlay .ctrl input[type="number"],
#quikAiHeaderOverlay .ctrl textarea{
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 96%, rgba(148,163,184,.06)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(148,163,184,.08)) !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:hover,
#quikAiHeaderOverlay .chat-rag-picker select:hover,
#quikAiHeaderOverlay .chat-rag-picker input:hover,
#quikAiHeaderOverlay .model-search-row .chat-model-search:hover{
  transform: none;
  background: color-mix(in srgb, var(--card) 98%, rgba(96,165,250,.04)) !important;
  border-color: color-mix(in srgb, var(--border) 56%, rgba(59,130,246,.28)) !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus,
#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus-visible,
#quikAiHeaderOverlay .chat-rag-picker select:focus,
#quikAiHeaderOverlay .chat-rag-picker input:focus,
#quikAiHeaderOverlay .chat-rag-picker select:focus-visible,
#quikAiHeaderOverlay .chat-rag-picker input:focus-visible,
#quikAiHeaderOverlay .model-search-row .chat-model-search:focus,
#quikAiHeaderOverlay .model-search-row .chat-model-search:focus-visible,
#quikAiHeaderOverlay .ctrl input[type="text"]:focus-visible,
#quikAiHeaderOverlay .ctrl input[type="number"]:focus-visible,
#quikAiHeaderOverlay .ctrl textarea:focus-visible{
  transform: none;
  border-color: rgba(59,130,246,.45) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn,
#quikAiHeaderOverlay .chat-rag-refresh,
#quikAiHeaderOverlay .ctrl-input-row #chatModelApply{
  height: 44px;
  min-height: 44px;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn,
#quikAiHeaderOverlay .chat-rag-refresh{
  width: 44px;
  min-width: 44px;
  background: color-mix(in srgb, var(--card) 96%, rgba(148,163,184,.06)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(148,163,184,.08)) !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn:hover,
#quikAiHeaderOverlay .chat-rag-refresh:hover{
  background: color-mix(in srgb, var(--card) 98%, rgba(96,165,250,.05)) !important;
  border-color: color-mix(in srgb, var(--border) 56%, rgba(59,130,246,.28)) !important;
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn:active,
#quikAiHeaderOverlay .chat-rag-refresh:active{
  transform: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn[aria-expanded="true"],
#quikAiHeaderOverlay .chat-rag-refresh[aria-expanded="true"]{
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.28) !important;
}

#quikAiHeaderOverlay #chatControls{
  margin-top: 0;
}

#quikAiHeaderOverlay .controls-wrap{
  margin-top: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, rgba(148,163,184,.10));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  max-height: calc(100vh - 260px);
  transition:
    opacity .16s ease,
    transform .16s ease,
    max-height .16s ease,
    padding .16s ease,
    border-color .16s ease,
    visibility 0s linear 0s;
}

#quikAiHeaderOverlay .controls-wrap.collapsed{
  transform: translateY(-4px);
  filter: none;
  border-top-color: transparent;
}

#quikAiHeaderOverlay .ctrl-row{
  row-gap: 8px;
}

#quikAiHeaderOverlay .ctrl{
  gap: 8px;
}

#quikAiHeaderOverlay .ctrl-label-with-help{
  min-height: 0;
}

#quikAiHeaderOverlay .ctrl.model-advanced .ctrl-label-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
}

#quikAiHeaderOverlay .ctrl-input-row,
#quikAiHeaderOverlay .model-search-row{
  gap: 12px;
  margin-top: 0;
}

#quikAiHeaderOverlay .ctrl-input-row #chatModelApply{
  min-width: 110px;
  padding: 0 16px;
  color: color-mix(in srgb, var(--text) 84%, #2563eb 16%);
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.24);
  font-weight: 800;
}

#quikAiHeaderOverlay .ctrl-input-row #chatModelApply:hover{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.34);
  box-shadow: none;
}

#quikAiHeaderOverlay .ctrl-input-row #chatModelApply:active{
  box-shadow: none;
}

#quikAiHeaderOverlay .ctrl-input-row #chatModelApply:disabled{
  background: color-mix(in srgb, var(--card) 92%, rgba(148,163,184,.06));
  border-color: color-mix(in srgb, var(--border) 78%, rgba(148,163,184,.08));
}

#quikAiHeaderOverlay .qa-model-group::before,
#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker::before,
#quikAiHeaderOverlay .qa-model-group::after,
#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker::after{
  content: none !important;
}

#quikAiHeaderOverlay #chatModelSearchSuggestions,
#quikAiHeaderOverlay .chat-model-search-suggestions{
  top: calc(100% + 8px);
  padding: 6px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, rgba(148,163,184,.10));
  background: color-mix(in srgb, var(--card) 98%, rgba(15,23,42,.04));
  box-shadow: 0 18px 34px rgba(2,6,23,.12);
}

#quikAiHeaderOverlay .chat-model-search-suggestions .ms-section{
  padding: 10px 12px 8px;
  background: color-mix(in srgb, var(--card) 98%, rgba(15,23,42,.04));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, rgba(148,163,184,.08));
}

#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion{
  margin: 0;
  border-radius: 12px;
  transition: background .14s ease, border-color .14s ease;
}

#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion:hover,
#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion.is-active{
  transform: none;
  background: rgba(59,130,246,.08);
  box-shadow: none;
}

#quikAiHeaderOverlay .chat-model-search-suggestions .chat-model-search-suggestion:focus-visible{
  box-shadow: 0 0 0 2px rgba(59,130,246,.16);
}

#quikAiHeaderOverlay .chat-model-search-suggestions .ms-badge{
  box-shadow: none;
}

@media (prefers-color-scheme: no-preference), (prefers-color-scheme: dark){
  #quikAiHeaderOverlay .qa-chat-head{
    background: color-mix(in srgb, var(--card) 92%, rgba(15,23,42,.16));
    border-color: color-mix(in srgb, var(--border) 82%, rgba(148,163,184,.08));
    box-shadow:
      0 20px 38px rgba(0,0,0,.28),
      0 1px 0 rgba(255,255,255,.05) inset;
  }

  #quikAiHeaderOverlay .qa-model-group,
  #quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
    background: transparent;
  }

  #quikAiHeaderOverlay #chatModelSearchSuggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions .ms-section{
    background: color-mix(in srgb, var(--card) 96%, rgba(15,23,42,.18));
  }

  #quikAiHeaderOverlay #chatModelSearchSuggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions{
    box-shadow: 0 20px 40px rgba(0,0,0,.34);
  }
}

@media (prefers-color-scheme: light){
  #quikAiHeaderOverlay .qa-chat-head{
    background: rgba(255,255,255,.96);
    border-color: rgba(148,163,184,.22);
    box-shadow:
      0 18px 34px rgba(15,23,42,.08),
      0 1px 0 rgba(255,255,255,.82) inset;
  }

  #quikAiHeaderOverlay .qa-model-group,
  #quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
    background: transparent;
    border-color: transparent !important;
  }

  #quikAiHeaderOverlay .controls-wrap{
    border-top-color: rgba(148,163,184,.18);
  }

  #quikAiHeaderOverlay #chatModelSearchSuggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions .ms-section{
    background: rgba(255,255,255,.98);
  }

  #quikAiHeaderOverlay #chatModelSearchSuggestions,
  #quikAiHeaderOverlay .chat-model-search-suggestions{
    box-shadow: 0 18px 30px rgba(15,23,42,.10);
  }
}

@media (max-width: 1180px){
  #quikAiHeaderOverlay .chat-head-bar{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px){
  #quikAiHeaderOverlay .qa-overlay-panel{
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  #quikAiHeaderOverlay .qa-chat-head{
    padding: 12px !important;
    border-radius: 20px;
  }

  #quikAiHeaderOverlay .qa-model-group,
  #quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
    gap: 10px;
  }

  #quikAiHeaderOverlay .ctrl-input-row,
  #quikAiHeaderOverlay .model-search-row{
    flex-wrap: wrap;
  }

  #quikAiHeaderOverlay .ctrl-input-row #chatModelApply{
    width: 100%;
  }
}

/* ===================== QUIK AI HEADER — SMART SPLIT MODEL / RAG ===================== */
#quikAiHeaderOverlay .chat-head-bar{
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(420px, 1.08fr);
  gap: 14px;
  align-items: stretch;
}

#quikAiHeaderOverlay .qa-control-panel{
  --qa-panel-accent: rgba(37,99,235,.86);
  --qa-panel-glow: rgba(96,165,250,.16);
  --qa-panel-sheen: rgba(255,255,255,.22);
  --qa-panel-badge-bg: rgba(37,99,235,.12);
  --qa-panel-badge-fg: color-mix(in srgb, var(--text) 82%, #2563eb 18%);

  position: relative;
  min-width: 0;
  height: 100%;
  padding: 16px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;

  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--qa-panel-accent) 18%);
  background:
    linear-gradient(180deg, var(--qa-panel-sheen), transparent 30%),
    radial-gradient(circle at 0 0, var(--qa-panel-glow), transparent 58%),
    color-mix(in srgb, var(--card) 95%, rgba(255,255,255,.20));
  box-shadow:
    0 18px 32px rgba(2,6,23,.10),
    0 1px 0 rgba(255,255,255,.10) inset;

  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#quikAiHeaderOverlay .qa-control-panel:hover{
  border-color: color-mix(in srgb, var(--border) 68%, var(--qa-panel-accent) 32%);
  box-shadow:
    0 20px 38px rgba(2,6,23,.13),
    0 1px 0 rgba(255,255,255,.12) inset;
}

#quikAiHeaderOverlay .qa-control-panel::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

#quikAiHeaderOverlay .qa-model-panel{
  --qa-panel-accent: rgba(37,99,235,.88);
  --qa-panel-glow: rgba(96,165,250,.18);
  --qa-panel-badge-bg: rgba(37,99,235,.12);
  --qa-panel-badge-fg: color-mix(in srgb, var(--text) 80%, #2563eb 20%);
}

#quikAiHeaderOverlay .qa-rag-panel{
  --qa-panel-accent: rgba(13,148,136,.88);
  --qa-panel-glow: rgba(245,158,11,.14);
  --qa-panel-badge-bg: rgba(13,148,136,.12);
  --qa-panel-badge-fg: color-mix(in srgb, var(--text) 78%, #0f766e 22%);
}

#quikAiHeaderOverlay .qa-panel-head{
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 104px;
}

#quikAiHeaderOverlay .qa-panel-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 34%, var(--qa-panel-accent) 66%);
}

#quikAiHeaderOverlay .qa-panel-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#quikAiHeaderOverlay .qa-panel-title{
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

#quikAiHeaderOverlay .qa-panel-badge{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--qa-panel-accent) 26%, transparent);
  background: var(--qa-panel-badge-bg);
  color: var(--qa-panel-badge-fg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

#quikAiHeaderOverlay .qa-panel-sub{
  margin: 0;
  max-width: 62ch;
  color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
  font-size: 13px;
  line-height: 1.58;
}

#quikAiHeaderOverlay .qa-panel-body{
  min-width: 0;
  display: flex;
  align-items: stretch;
}

#quikAiHeaderOverlay .qa-model-wrap,
#quikAiHeaderOverlay .qa-rag-bar{
  width: 100%;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: stretch;
}

#quikAiHeaderOverlay .qa-model-group,
#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 96px;
  padding: 12px;
  gap: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--qa-panel-accent) 20%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 48%),
    color-mix(in srgb, var(--card) 98%, rgba(255,255,255,.08));
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 10px 18px rgba(15,23,42,.06);
}

#quikAiHeaderOverlay .qa-model-group{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
}

#quikAiHeaderOverlay .qa-model-bar{
  height: auto;
  min-width: 0;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select,
#quikAiHeaderOverlay .chat-rag-picker select,
#quikAiHeaderOverlay .chat-rag-picker input{
  height: 46px;
  min-height: 46px;
  width: 100%;
  max-width: none;
  min-width: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 97%, rgba(148,163,184,.05)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(148,163,184,.10)) !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select{
  padding: 0 46px 0 14px;
}

#quikAiHeaderOverlay .chat-rag-picker select{
  padding: 0 46px 0 14px;
  background-position: right 16px center !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:hover,
#quikAiHeaderOverlay .chat-rag-picker select:hover,
#quikAiHeaderOverlay .chat-rag-picker input:hover{
  transform: none;
  background: color-mix(in srgb, var(--card) 99%, rgba(255,255,255,.05)) !important;
  border-color: color-mix(in srgb, var(--border) 58%, var(--qa-panel-accent) 42%) !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus,
#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus-visible,
#quikAiHeaderOverlay .chat-rag-picker select:focus,
#quikAiHeaderOverlay .chat-rag-picker select:focus-visible,
#quikAiHeaderOverlay .chat-rag-picker input:focus,
#quikAiHeaderOverlay .chat-rag-picker input:focus-visible{
  transform: none;
  border-color: color-mix(in srgb, var(--qa-panel-accent) 78%, white 22%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qa-panel-accent) 16%, transparent) !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-caret{
  right: 14px;
  opacity: .72;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn,
#quikAiHeaderOverlay .chat-rag-refresh{
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0 !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--card) 97%, rgba(148,163,184,.05)) !important;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(148,163,184,.10)) !important;
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn:hover,
#quikAiHeaderOverlay .chat-rag-refresh:hover{
  transform: none !important;
  background: color-mix(in srgb, var(--card) 99%, rgba(255,255,255,.05)) !important;
  border-color: color-mix(in srgb, var(--border) 58%, var(--qa-panel-accent) 42%) !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn[aria-expanded="true"]{
  background: color-mix(in srgb, var(--qa-panel-accent) 12%, var(--card) 88%) !important;
  border-color: color-mix(in srgb, var(--qa-panel-accent) 46%, var(--border) 54%) !important;
}

#quikAiHeaderOverlay .qa-rag-bar{
  display: flex;
  align-items: stretch;
}

#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

#quikAiHeaderOverlay .chat-rag-headline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#quikAiHeaderOverlay .chat-rag-mini-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 34%, var(--qa-panel-accent) 66%);
}

#quikAiHeaderOverlay .chat-rag-mini-state{
  font-size: 12px;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  white-space: nowrap;
}

#quikAiHeaderOverlay .chat-rag-controls{
  display: grid;
  grid-template-columns: minmax(170px, .82fr) minmax(210px, 1fr) minmax(210px, 1fr) 46px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

#quikAiHeaderOverlay .chat-rag-controls:has(#chatRagFolderSelect.hidden){
  grid-template-columns: minmax(170px, .82fr) minmax(0, 1fr) 46px;
}

#quikAiHeaderOverlay #chatRagMode,
#quikAiHeaderOverlay #chatRagFolderSelect,
#quikAiHeaderOverlay #chatRagFileSelect,
#quikAiHeaderOverlay #chatRagFolder{
  min-width: 0;
  width: 100%;
  max-width: none;
}

#quikAiHeaderOverlay .chat-rag-refresh{
  justify-self: end;
}

#quikAiHeaderOverlay .chat-rag-picker.is-personal{
  border-color: color-mix(in srgb, var(--qa-panel-accent) 30%, var(--border) 70%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 48%),
    color-mix(in srgb, var(--card) 96%, rgba(13,148,136,.06));
}

#quikAiHeaderOverlay .chat-rag-picker.is-personal .chat-rag-mini-state{
  color: color-mix(in srgb, var(--text) 26%, var(--qa-panel-accent) 74%);
}

#quikAiHeaderOverlay .qa-panel-foot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

#quikAiHeaderOverlay .qa-foot-chip{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--qa-panel-accent) 20%, transparent);
  background: color-mix(in srgb, var(--qa-panel-accent) 10%, transparent);
  color: color-mix(in srgb, var(--muted) 58%, var(--text) 42%);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (prefers-color-scheme: no-preference), (prefers-color-scheme: dark){
  #quikAiHeaderOverlay .qa-control-panel{
    box-shadow:
      0 20px 36px rgba(0,0,0,.22),
      0 1px 0 rgba(255,255,255,.05) inset;
  }

  #quikAiHeaderOverlay .qa-model-group,
  #quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), transparent 48%),
      color-mix(in srgb, var(--card) 96%, rgba(15,23,42,.18));
  }
}

@media (prefers-color-scheme: light){
  #quikAiHeaderOverlay .qa-control-panel{
    background:
      linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.20) 32%, transparent 55%),
      radial-gradient(circle at 0 0, var(--qa-panel-glow), transparent 60%),
      rgba(255,255,255,.96);
    box-shadow:
      0 18px 32px rgba(15,23,42,.07),
      0 1px 0 rgba(255,255,255,.82) inset;
  }

  #quikAiHeaderOverlay .qa-model-group,
  #quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
    background:
      linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.32) 45%, transparent 100%),
      rgba(255,255,255,.88);
    box-shadow:
      0 10px 18px rgba(15,23,42,.05),
      0 1px 0 rgba(255,255,255,.86) inset;
  }

  #quikAiHeaderOverlay .qa-foot-chip{
    color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
  }
}

@media (max-width: 1180px){
  #quikAiHeaderOverlay .chat-head-bar{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  #quikAiHeaderOverlay .chat-rag-controls{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #quikAiHeaderOverlay .chat-rag-mini-state{
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 740px){
  #quikAiHeaderOverlay .qa-control-panel{
    padding: 14px;
    gap: 12px;
    border-radius: 20px;
  }

  #quikAiHeaderOverlay .qa-panel-head{
    min-height: 0;
  }

  #quikAiHeaderOverlay .qa-panel-title-row,
  #quikAiHeaderOverlay .chat-rag-headline{
    align-items: flex-start;
    flex-direction: column;
  }

  #quikAiHeaderOverlay .chat-rag-controls{
    grid-template-columns: 1fr;
  }

  #quikAiHeaderOverlay .chat-rag-refresh{
    justify-self: start;
  }
}

/* ===================== QUIK AI HEADER — MINIMAL SELECTORS ===================== */
#quikAiHeaderOverlay .qa-chat-head{
  padding: 12px 14px !important;
  gap: 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 96%, rgba(255,255,255,.24));
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

#quikAiHeaderOverlay .chat-head-bar{
  grid-template-columns: minmax(400px, 540px) minmax(0, 1fr);
  gap: 12px;
}

#quikAiHeaderOverlay .qa-control-panel{
  --qa-panel-accent: rgba(59,130,246,.26);
  --qa-panel-tint: rgba(59,130,246,.045);
  --qa-control-bg: rgba(255,255,255,.56);
  position: relative;
  padding: 12px;
  border-radius: 18px;
  gap: 10px;
  grid-template-rows: auto 1fr;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--qa-panel-accent) 22%);
  background: color-mix(in srgb, var(--card) 98%, var(--qa-panel-tint) 2%);
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}

#quikAiHeaderOverlay .qa-control-panel:hover{
  border-color: color-mix(in srgb, var(--border) 60%, var(--qa-panel-accent) 40%);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

#quikAiHeaderOverlay .qa-control-panel::after{
  display: none;
}

#quikAiHeaderOverlay .qa-model-panel{
  --qa-panel-accent: rgba(59,130,246,.34);
  --qa-panel-tint: rgba(59,130,246,.055);
}

#quikAiHeaderOverlay .qa-rag-panel{
  --qa-panel-accent: rgba(124,92,255,.34);
  --qa-panel-tint: rgba(124,92,255,.06);
}

#quikAiHeaderOverlay .qa-panel-head{
  display: flex;
  align-items: center;
  min-height: 0;
  gap: 0;
}

#quikAiHeaderOverlay .qa-panel-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 2px;
  color: color-mix(in srgb, var(--text) 72%, var(--qa-panel-accent) 28%);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}

#quikAiHeaderOverlay .qa-panel-label::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qa-panel-accent) 82%, white 18%);
  flex: 0 0 auto;
}

#quikAiHeaderOverlay .qa-model-wrap,
#quikAiHeaderOverlay .qa-rag-bar{
  display: flex;
  align-items: stretch;
  width: 100%;
}

#quikAiHeaderOverlay .qa-model-wrap{
  justify-content: flex-start;
}

#quikAiHeaderOverlay .qa-model-group,
#quikAiHeaderOverlay .qa-rag-bar .chat-rag-picker{
  min-height: 0;
  padding: 0;
  gap: 10px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group{
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) 44px;
}

#quikAiHeaderOverlay .qa-model-bar{
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
}

#quikAiHeaderOverlay .chat-rag-headline,
#quikAiHeaderOverlay .chat-rag-label,
#quikAiHeaderOverlay .qa-panel-kicker,
#quikAiHeaderOverlay .qa-panel-title-row,
#quikAiHeaderOverlay .qa-panel-sub,
#quikAiHeaderOverlay .qa-panel-foot{
  display: none !important;
}

#quikAiHeaderOverlay .chat-rag-controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#quikAiHeaderOverlay #chatRagMode{
  flex: 0 0 180px;
  max-width: 180px;
}

#quikAiHeaderOverlay #chatRagFolderSelect,
#quikAiHeaderOverlay #chatRagFileSelect,
#quikAiHeaderOverlay #chatRagFolder{
  flex: 1 1 220px;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select,
#quikAiHeaderOverlay .chat-rag-picker select,
#quikAiHeaderOverlay .chat-rag-picker input{
  height: 44px;
  min-height: 44px;
  border-radius: 12px;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 700;
  background: var(--qa-control-bg) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--qa-panel-accent) 18%) !important;
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select,
#quikAiHeaderOverlay .chat-rag-picker select{
  padding-right: 44px;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:hover,
#quikAiHeaderOverlay .chat-rag-picker select:hover,
#quikAiHeaderOverlay .chat-rag-picker input:hover{
  background: rgba(255,255,255,.76) !important;
  border-color: color-mix(in srgb, var(--border) 64%, var(--qa-panel-accent) 36%) !important;
}

#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus,
#quikAiHeaderOverlay .qa-model-bar .qa-model-select:focus-visible,
#quikAiHeaderOverlay .chat-rag-picker select:focus,
#quikAiHeaderOverlay .chat-rag-picker select:focus-visible,
#quikAiHeaderOverlay .chat-rag-picker input:focus,
#quikAiHeaderOverlay .chat-rag-picker input:focus-visible{
  border-color: color-mix(in srgb, var(--qa-panel-accent) 82%, white 18%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qa-panel-accent) 14%, transparent) !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn,
#quikAiHeaderOverlay .chat-rag-refresh{
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 12px !important;
  background: var(--qa-control-bg) !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--qa-panel-accent) 18%) !important;
  box-shadow: none !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn:hover,
#quikAiHeaderOverlay .chat-rag-refresh:hover{
  background: rgba(255,255,255,.76) !important;
  border-color: color-mix(in srgb, var(--border) 64%, var(--qa-panel-accent) 36%) !important;
}

#quikAiHeaderOverlay .qa-model-group #chatConfigToggle.config-icbtn[aria-expanded="true"]{
  background: color-mix(in srgb, white 88%, var(--qa-panel-accent) 12%) !important;
  border-color: color-mix(in srgb, var(--border) 58%, var(--qa-panel-accent) 42%) !important;
}

#quikAiHeaderOverlay .chat-rag-refresh{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
  justify-self: auto;
}

@media (prefers-color-scheme: light){
  #quikAiHeaderOverlay .qa-chat-head{
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
  }

  #quikAiHeaderOverlay .qa-control-panel{
    --qa-control-bg: rgba(255,255,255,.90);
    background: color-mix(in srgb, white 97%, var(--qa-panel-tint) 3%);
  }
}

@media (max-width: 1180px){
  #quikAiHeaderOverlay .chat-head-bar{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px){
  #quikAiHeaderOverlay .qa-chat-head{
    padding: 12px !important;
  }

  #quikAiHeaderOverlay .chat-rag-controls{
    gap: 8px;
  }

  #quikAiHeaderOverlay .qa-model-group{
    width: 100%;
  }

  #quikAiHeaderOverlay #chatRagMode,
  #quikAiHeaderOverlay #chatRagFolderSelect,
  #quikAiHeaderOverlay #chatRagFileSelect,
  #quikAiHeaderOverlay #chatRagFolder{
    flex: 1 1 100%;
    max-width: none;
  }

  #quikAiHeaderOverlay .chat-rag-refresh{
    margin-left: 0;
  }
}
/* ===================== TOPBAR CONTROLS (Flat + same size) ===================== */

/* Base: dùng cho mọi nút topbar */
#topbarQuikAiBtn.topbar-quik-ai-btn,
.side-nav-toggle,
.profile-btn{
  height: var(--tb-ctl-h);
  border-radius: var(--tb-ctl-radius);
  background: var(--tb-ctl-bg);
  border: 1px solid var(--tb-ctl-border);
  box-shadow: var(--tb-ctl-shadow);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  color: var(--topbar-fg);
  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .06s ease;
}

/* ===================== PROFILE BUTTON — FLAT + SYNC TOPBAR PILL ===================== */
.profile-btn{
  color: var(--tb-profile-fg);
  background: var(--tb-profile-bg);
  border-color: var(--tb-profile-border);

  /* ✅ đồng bộ cảm giác “pill” như các nút topbar khác */
  box-shadow: var(--tb-profile-shadow, var(--tb-ctl-shadow));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ✅ Hover/Press riêng cho Profile: giữ nền trắng (không bị xám bẩn) */
.profile-btn:hover{
  background: color-mix(in srgb, var(--tb-profile-bg) 92%, var(--tb-group-hover));
  border-color: color-mix(in srgb, var(--tb-profile-border) 80%, rgba(59,130,246,.18));
}

.profile-btn:active{
  background: color-mix(in srgb, var(--tb-profile-bg) 88%, var(--tb-group-press));
  transform: translateY(1px);
}

/* ✅ Nếu icon là SVG (đa phần UI icon): ép stroke/fill ăn theo currentColor */
.profile-btn svg,
.profile-btn .topbar-ic{
  color: currentColor;
}

/* case icon dạng stroke (line icon) */
.profile-btn svg path,
.profile-btn svg line,
.profile-btn svg rect,
.profile-btn svg circle,
.profile-btn .topbar-ic path,
.profile-btn .topbar-ic line,
.profile-btn .topbar-ic rect,
.profile-btn .topbar-ic circle{
  stroke: currentColor !important;
  fill: none !important;
  opacity: .92;
}

/* case icon dạng fill (solid icon) — nếu SVG có fill khác none thì ép theo currentColor */
.profile-btn svg [fill]:not([fill="none"]){
  fill: currentColor !important;
  stroke: none !important;
}

/* case icon là font-icon / <i> */
.profile-btn i,
.profile-btn .profile-ic{
  color: currentColor !important;
}

/* Hover / Press chung */
#topbarQuikAiBtn.topbar-quik-ai-btn:hover,
.side-nav-toggle:hover,
.profile-btn:hover{
  background: var(--tb-ctl-hover);
  border-color: color-mix(in srgb, var(--tb-ctl-border) 70%, rgba(255,255,255,.14));
}

#topbarQuikAiBtn.topbar-quik-ai-btn:active,
.side-nav-toggle:active,
.profile-btn:active{
  background: var(--tb-ctl-press);
  transform: translateY(1px);
}

/* Focus */
#topbarQuikAiBtn.topbar-quik-ai-btn:focus-visible,
.side-nav-toggle:focus-visible,
.profile-btn:focus-visible{
  outline: 2px solid rgba(147,197,253,.95);
  outline-offset: 2px;
}

/* Icon-only buttons: vuông đúng chuẩn 30x30 */
.side-nav-toggle,
.profile-btn{
  width: var(--tb-ctl-h);
  min-width: var(--tb-ctl-h);
  padding: 0;
  display: grid;
  place-items: center;
}

/* Quik AI button: cùng chiều cao, padding hợp lý */
#topbarQuikAiBtn.topbar-quik-ai-btn{
  pointer-events: auto;
  position: relative;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--tb-ctl-pad-x);
  line-height: 1;
  font-weight: 800;
  font-size: 13px;   /* nhỏ lại cho phẳng */
}

/* caret gọn hơn */
#topbarQuikAiBtn .topbar-quik-ai-caret{
  font-size: 11px;
  opacity: .8;
  transform: translateY(-.5px);
}

/* trạng thái open: chỉ nhấn viền nhẹ */
#topbarQuikAiBtn[aria-expanded="true"]{
  border-color: color-mix(in srgb, var(--tb-ctl-border) 60%, rgba(59,130,246,.35));
  background: color-mix(in srgb, var(--tb-ctl-press) 70%, rgba(59,130,246,.08));
}

/* ❌ Nếu trước đó có ::before highlight line thì tắt hẳn */
#topbarQuikAiBtn.topbar-quik-ai-btn::before,
.side-nav-toggle::before,
.profile-btn::before{
  content: none !important;
}

/* Avatar vẫn “nổi”, nhưng nhỏ gọn */
.profile-avatar{
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900;
  background:conic-gradient(from 180deg, #bfdbfe, #a855f7, #f97316, #bfdbfe);
  color:#0b1220;
  box-shadow: 0 0 0 1px rgba(255,255,255,.38);
}

/* ===================== PROFILE DROPDOWN — V2 (Synced with Topbar / Menus) ===================== */
/* ✅ Mục tiêu:
   - đồng bộ “glass + card” với hệ design hiện tại
   - có mũi tên (caret) chuẩn ở dark & light (bạn đang bị thiếu base ::before)
   - item hover/focus tinh tế, có divider nhẹ
   - z-index hợp lý: nổi trên topbar nhưng dưới overlay QuikAI
*/

.profile-shell{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Menu container */
.profile-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);

  min-width: 240px;
  padding: 8px;

  border-radius: 16px;

  /* ✅ “card glass” đồng bộ hệ chung */
  background: color-mix(in srgb, var(--card) 88%, rgba(0,0,0,.35));
  border: 1px solid color-mix(in srgb, var(--border) 82%, rgba(0,0,0,.18));
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.08) inset;

  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);

  /* ✅ animation “mượt, tinh tế” */
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: top right;
  pointer-events: none;

  transition:
    opacity .15s ease,
    transform .15s ease;

  /* ✅ nổi trên topbar (50) nhưng dưới overlay QuikAI (10080) */
  z-index: 10040;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Mũi tên (caret) — FIX: có base ở dark + light */
.profile-menu::before{
  content:"";
  position:absolute;
  right: 14px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;

  background: color-mix(in srgb, var(--card) 88%, rgba(0,0,0,.35));
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, rgba(0,0,0,.18));
  border-left: 1px solid color-mix(in srgb, var(--border) 82%, rgba(0,0,0,.18));

  transform: rotate(45deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Open state */
.profile-shell.open .profile-menu{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .profile-menu{
    transition: none !important;
    transform: none !important;
  }
}


/* Divider nhẹ (nếu bạn có hr hoặc muốn giả divider) */
.profile-menu .profile-divider{
  height: 1px;
  margin: 2px 6px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  opacity: .85;
}

/* Item base */
.profile-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  text-align: left;
  padding: 10px 12px;

  border-radius: 12px;

  border: 1px solid transparent;
  background: transparent;

  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  transition:
    background .14s ease,
    border-color .14s ease,
    transform .06s ease,
    box-shadow .14s ease;
}

/* ✅ FIX: BỎ HOÀN TOÀN “dấu gạch ngang / marker” thừa do CSS chung tạo ra
   (nhiều theme hay có kiểu: button::before { content:"-"; } hoặc ::marker)
   Chỉ scope trong dropdown profile để không ảnh hưởng nơi khác.
*/
.profile-menu .profile-item::before,
.profile-menu .profile-item::after{
  content: none !important;
  display: none !important;
}
.profile-menu .profile-item::marker{
  content: "" !important;
}

/* Icon trong item (nếu có svg/i) */
.profile-item svg{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  opacity: .9;
}

/* Hover/Active */
.profile-item:hover{
  background: color-mix(in srgb, var(--card) 78%, rgba(0,0,0,.22));
  border-color: color-mix(in srgb, var(--border) 70%, rgba(59,130,246,.22));
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

.profile-item:active{
  transform: translateY(0);
}

/* Focus ring */
.profile-item:focus-visible{
  outline: 2px solid rgba(147,197,253,.92);
  outline-offset: 2px;
}

/* ✅ Logout: luôn là item cuối (đúng logic bạn đang dùng) */
.profile-menu .profile-item:last-child{
  margin-top: 4px;

  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.38);
  color: #fff;

  box-shadow:
    0 14px 28px rgba(127,29,29,.40),
    0 1px 0 rgba(255,255,255,.10) inset;
}

.profile-menu .profile-item:last-child:hover{
  background: rgba(239,68,68,.20);
  border-color: rgba(252,165,165,.55);
}

/* ===================== LIGHT MODE OVERRIDE ===================== */
@media (prefers-color-scheme: light){
  .profile-menu{
    background: rgba(255,255,255,.96);
    border-color: rgba(2,21,80,.14);
    box-shadow:
      0 18px 46px rgba(2,6,23,.14),
      0 1px 0 rgba(255,255,255,.85) inset;
  }

  .profile-menu::before{
    background: rgba(255,255,255,.96);
    border-top-color: rgba(2,21,80,.14);
    border-left-color: rgba(2,21,80,.14);
    box-shadow: 0 10px 24px rgba(2,6,23,.10);
  }

  .profile-info{
    color: rgba(71,85,105,.95);
    background: rgba(2,21,80,.03);
    border-color: rgba(2,21,80,.10);
    box-shadow: 0 10px 22px rgba(2,6,23,.08);
  }

  .profile-item{
    color: #0f172a;
  }

  .profile-item:hover{
    background: rgba(2,21,80,.05);
    border-color: rgba(2,21,80,.12);
    box-shadow: 0 12px 26px rgba(2,6,23,.10);
  }

  .profile-menu .profile-item:last-child{
    color: #fff;
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.32);
  }

  .profile-menu .profile-item:last-child:hover{
    background: rgba(239,68,68,.22);
    border-color: rgba(239,68,68,.40);
  }
}
/* ===================== END PROFILE DROPDOWN V2 ===================== */


/* ===================== SIDE NAV (ChatGPT-like - REVISED) ===================== */

/* Sidebar mode: vẫn GIỮ title ở giữa topbar */
body.use-side-nav .topbar-center{ display:flex !important; }
body.use-side-nav .topbar-center .tabs{ display:none !important; }

/* Backdrop (overlay blur) */
.side-nav-backdrop{
  position:fixed; inset: var(--topbar-h) 0 0 0;

  /* ✅ BỎ HOÀN TOÀN overlay blur/mờ */
  background: transparent;
  backdrop-filter: none;

  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:45;
}
body.nav-open .side-nav-backdrop{ opacity:1; pointer-events:auto; }

/* Sidebar Container - Layout Flex dọc */
.side-nav {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 380px;
  background: #171717;
  border-right: 1px solid #2a2a2a;
  transform: translateX(-102%);
  transition: transform .2s cubic-bezier(0.2, 0, 0, 1);
  z-index: 10000;
  padding: 0;
  
  display: flex;
  flex-direction: column;

  /* ✅ SỬA ĐỔI: Đặt thanh cuộn ở container chính */
  overflow-y: auto; 
  overflow-x: hidden;
  /* Ẩn thanh cuộn mặc định cho gọn (tuỳ chọn) */
  scrollbar-width: thin; 
  scrollbar-color: #424242 transparent;
}

/* Open state */
body.nav-open .side-nav{ transform:translateX(0); }

/* --- 1. Sidebar Header (Nút đóng + New Chat) --- */
.side-nav-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  margin-bottom: 4px;
}

.side-nav-header .close-btn {
  padding: 8px;
  border-radius: 8px;
  color: #b4b4b4;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.side-nav-header .close-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.side-nav-header .new-chat-btn {
  flex: 1;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1); /* Viền nhẹ giống ChatGPT */
  color: #ececec;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.side-nav-header .new-chat-btn:hover { background: rgba(255,255,255,0.1); }


/* --- 2. Functional Tabs (Menu chính) --- */
.side-nav .tabs{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;

  /* ✅ FIX: bỏ khoảng trống giữa Tabs và Lịch sử */
  margin-bottom: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

/* ✅ Đồng bộ style với WI-HIST item — ACTIVE FLAT + LEFT ACCENT */
.side-nav .tab{
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: var(--nav-item-radius);

  font-size: 14px;
  font-weight: 550;

  color: #ececec;
  background: transparent;

  border: 1px solid transparent;
  position: relative;
  overflow: hidden;

  transition:
    background .15s ease,
    transform .12s ease,
    color .15s ease;
}

/* Hover: phẳng, không viền */
.side-nav .tab:hover{
  background: var(--nav-item-hover-bg);
  border-color: transparent;
}

/* Active: CHỈ accent trái — KHÔNG nền bọc */
.side-nav .tab.active{
  background: transparent;                 /* ✅ bỏ nền */
  border-color: transparent;               /* ✅ không viền */
  color: var(--nav-item-active-fg);
  font-weight: 750;
}

/* Thanh accent trái cho active */
.side-nav .tab.active::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;

  background: var(--nav-item-accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px var(--nav-item-accent-glow);
  opacity: .95;
}

/* Click feedback: nhẹ, không “pulse” lòe */
.side-nav .tab:active{
  transform: translateY(1px);
  animation: none;
}

/* Sub-item giữ cùng hệ */
.side-nav .tab.tab-sub{
  padding-left: 12px;
  color: inherit;
}
.side-nav .tab.tab-sub:hover{
  background: var(--nav-item-hover-bg);
  color: #fff;
}
/* ===================== HISTORY (NEW UI) — WI-HIST ===================== */
.wi-hist{
  display:block;
  width:100%;
  color:inherit;
}

.wi-hist.hidden{ display:none !important; }

.wi-hist--open{ display:block; }

.wi-hist__toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 8px;
}

.wi-hist__search{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(120,120,120,.25);
  border-radius:4px;
  padding:8px 10px;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wi-hist__icon{
  width:18px;
  height:18px;
  opacity:.75;
  flex:0 0 auto;
}

.wi-hist__search-input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  padding:0;
}

.wi-hist__search-input::placeholder{ opacity:.65; }

.wi-hist__sort{
  position:relative;
  flex:0 0 auto;
}

/* ===================== WI-HIST: SORT/FILTER BUTTON (SIDENAV CONTRAST FIX) ===================== */
/* ✅ Mục tiêu:
   - Giữ tương phản trên sidebar đen
   - KHÔNG “đậm” khi hover/active
   - KHÔNG có shadow bọc quanh nút (kể cả khi menu đang mở)
*/
.side-nav .wi-hist__sort-btn{
  width:36px;
  height:36px;
  border-radius:4px;

  /* Nền + viền tách khỏi sidebar */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.30);
  color: #f1f5f9;

  /* ✅ Bỏ shadow ngoài hoàn toàn để không bị “bọc quanh” */
  box-shadow: none;

  display:flex;
  align-items:center;
  justify-content:center;

  /* ✅ Không animate box-shadow để tránh “đậm” */
  transition:none;
}

/* Hover: chỉ tăng nhẹ nền + viền, KHÔNG shadow */
.side-nav .wi-hist__sort-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.40);
  box-shadow: none;
}

/* Active (nhấn): chỉ scale nhẹ + nền hơi giảm, KHÔNG shadow */
.side-nav .wi-hist__sort-btn:active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
  box-shadow: none;
}

/* ✅ Khi menu filter đang mở (thường là aria-expanded=true): vẫn KHÔNG shadow */
.side-nav .wi-hist__sort-btn[aria-expanded="true"]{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.42);
  box-shadow: none;
}

/* Focus ring */
.side-nav .wi-hist__sort-btn:focus-visible{
  outline: 2px solid rgba(147,197,253,.95);
  outline-offset: 2px;
}

/* ✅ ép icon stroke rõ ràng + không bị mờ */
.side-nav .wi-hist__sort-btn svg{
  width:18px;
  height:18px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1 !important;
}

/* ✅ Light mode: vẫn phẳng, không shadow */
@media (prefers-color-scheme: light){
  .side-nav .wi-hist__sort-btn{
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.16);
    color: rgba(15,23,42,.92);
    box-shadow: none;
  }
  .side-nav .wi-hist__sort-btn:hover{
    background: rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.22);
    box-shadow: none;
  }
  .side-nav .wi-hist__sort-btn:active{
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.18);
    box-shadow: none;
  }
  .side-nav .wi-hist__sort-btn[aria-expanded="true"]{
    background: rgba(0,0,0,.07);
    border-color: rgba(0,0,0,.22);
    box-shadow: none;
  }
}
/* ===================== END SORT/FILTER BUTTON FIX ===================== */

/* ===================== WI-HIST: FILTER DROPDOWN (SIDENAV CONTRAST FIX) ===================== */
.side-nav .wi-hist__menu{
  position:absolute;
  right:0;
  top:42px;

  min-width:180px;
  padding:6px;
  border-radius:4px;

  /* ✅ nền “đặc” + sáng hơn sidebar đen để nổi rõ */
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.96));
  border: 1px solid rgba(255,255,255,.22);
  color: #f8fafc;

  box-shadow:none;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index:12050;
}

.side-nav .wi-hist__menu.hidden{ display:none; }

.side-nav .wi-hist__menu-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:inherit;

  padding:10px 10px;
  border-radius:2px;
  cursor:pointer;

  /* ✅ chữ rõ hơn */
  opacity: .95;

  transition:none;
}

.side-nav .wi-hist__menu-item:hover{
  background: rgba(255,255,255,.14);
  opacity: 1;
}

.side-nav .wi-hist__menu-item:focus-visible{
  outline: 2px solid rgba(147,197,253,.92);
  outline-offset: 2px;
}

.side-nav .wi-hist__menu-item.is-active{
  opacity:1;
  background: rgba(59,130,246,.22);
  box-shadow:none;
}

/* ✅ Light mode override */
@media (prefers-color-scheme: light){
  .side-nav .wi-hist__menu{
    background: rgba(255,255,255,.96);
    border-color: rgba(2,21,80,.14);
    color: rgba(15,23,42,.96);
    box-shadow:none;
  }
  .side-nav .wi-hist__menu-item:hover{
    background: rgba(0,0,0,.06);
    box-shadow:none;
  }
  .side-nav .wi-hist__menu-item.is-active{
    background: rgba(59,130,246,.14);
    box-shadow:none;
  }
}
/* ===================== END FILTER DROPDOWN FIX ===================== */

.wi-hist__menu.hidden{ display:none; }

.wi-hist__menu-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:inherit;
  padding:10px 10px;
  border-radius:2px;
  cursor:pointer;
  opacity:.9;
}

html:not(.dark) .wi-hist__menu-item:hover,
body:not(.dark) .wi-hist__menu-item:hover{ background:rgba(0,0,0,.06); }

.wi-hist__menu-item:hover{
  background: rgba(255,255,255,.12);
}

.wi-hist__menu-item.is-active{
  opacity:1;
  /* ✅ active rõ ràng hơn, vẫn “đúng hệ” với primary */
  background: rgba(59,130,246,.18);
  box-shadow:none;
}
html:not(.dark) .wi-hist__menu-item.is-active,
body:not(.dark) .wi-hist__menu-item.is-active{ background:rgba(0,0,0,.08); }

.wi-hist__list{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 8px 14px;
}

.wi-hist__group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.wi-hist__group-items{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:0;
  border:1px solid rgba(148,163,184,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(15,23,42,.12);
  box-shadow:none;
  overflow:hidden;
}

.wi-hist__group-label{
  padding:4px 8px 0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.62;
}

.wi-hist__loading,
.wi-hist__empty{
  opacity:.75;
  padding:12px 10px;
  border-radius:0;
  border:1px dashed rgba(120,120,120,.25);
}

.wi-hist__item{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:8px;
  min-height:52px;
  border-radius:0;
  border:0;
  background:transparent;
  overflow:visible;

  transition:none;
}

.wi-hist__group-items .wi-hist__item + .wi-hist__item{
  border-top:1px solid rgba(148,163,184,.14);
}

.wi-hist__item::before{
  content:none;
  display:none;
}

.wi-hist__item:hover{
  transform:none;
  background:linear-gradient(90deg, rgba(59,130,246,.08), rgba(59,130,246,0));
  box-shadow:none;
}

.wi-hist__item.is-active{
  background:
    linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.06) 60%, transparent 100%);
  box-shadow:none;
}

.wi-hist__item.is-loading{
  background:linear-gradient(90deg, rgba(96,165,250,.12), transparent 72%);
  box-shadow:none;
}

.wi-hist__item.is-active::before,
.wi-hist__item.is-loading::before{
  content:none;
  display:none;
}

/* ✅ Pulse khi user chọn 1 cuộc trò chuyện (ăn khớp thao tác click) */
@keyframes wiHistSelectPulse{
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  45%  { box-shadow: 0 0 0 4px rgba(59,130,246,.18); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.wi-hist__item.wi-hist__item--pulse{
  animation:none;
}

/* divider nhẹ giữa các item (tạo cảm giác “list” liền mạch) */
.wi-hist__item::after{
  content:none;
  display:none;
}

.wi-hist__open{
  flex:1;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:2px;
  border:0;
  background:transparent;
  color:inherit;
  padding:11px 78px 11px 14px;
  cursor:pointer;
  min-width:0;
}
.wi-hist__open:active{
  transform:none;
}

.wi-hist__title-row{
  display:block;
  min-width:0;
}

.wi-hist__title{
  font-weight:600;
  font-size:13.5px;
  line-height:1.38;
  margin:0;
  display:block;
  max-height:calc(1.38em * 2);
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:break-word;
  word-break:normal;
}

.wi-hist__actions{
  position:absolute;
  top:50%;
  right:10px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0;

  /* ✅ giống ChatGPT: chỉ hiện rõ khi hover */
  opacity:.0;
  transform: translateY(-50%);
  transition:none;
  pointer-events:none;
}

/* hover item -> hiện actions */
.wi-hist__item:hover .wi-hist__actions,
.wi-hist__item.is-active .wi-hist__actions{
  opacity:1;
  pointer-events:auto;
}

/* Title luôn giữ ổn định để tránh nháy khi rê chuột giữa 2 item */

/* Touch device: luôn hiện (không có hover) */
@media (hover:none){
  .wi-hist__actions{ opacity:1; transform:translateY(-50%); pointer-events:auto; }
}

.wi-hist__action{
  width:28px;
  height:28px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:#e5e7eb;
  cursor:pointer;

  display:grid;
  place-items:center;

  transition:none;
}

/* icon svg ăn theo currentColor */
.wi-hist__action svg{
  width:14px;
  height:14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity:.95;
}

.wi-hist__action:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* ✅ Animation khi bấm */
.wi-hist__action:active{
  transform:none;
}

/* ✅ Edit = xanh */
.wi-hist__action--edit{
  color: rgba(147,197,253,.98);
  border-color: rgba(147,197,253,.28);
  background: rgba(59,130,246,.10);
}
.wi-hist__action--edit:hover{
  background: rgba(59,130,246,.16);
  border-color: rgba(147,197,253,.42);
}

/* ✅ Delete = đỏ */
.wi-hist__action--del{
  color: rgba(252,165,165,.98);
  border-color: rgba(252,165,165,.28);
  background: rgba(239,68,68,.10);
}
.wi-hist__action--del:hover{
  background: rgba(239,68,68,.16);
  border-color: rgba(252,165,165,.45);
}

/* Focus ring */
.wi-hist__action:focus-visible{
  outline:2px solid rgba(147,197,253,.9);
  outline-offset:2px;
}

.wi-hist--sidenav{
  /* Sidebar mode: lịch sử thường nằm dưới list tab -> nhìn giống ChatGPT */
  padding-top:4px;
}
/* ===================== END WI-HIST ===================== */

/* ===================== SIDENAV: ONE SCROLL ONLY (History uses parent scroll) ===================== */
/* ✅ Chỉ side-nav được phép scroll */
.side-nav{
  overflow-y:auto;
  overflow-x:hidden;
}

/* ✅ History KHÔNG tạo scroll riêng (chặn mọi rule cũ) */
.side-nav #chatHistoryMenu,
.side-nav .chat-history-wrapper,
.side-nav .side-chat-history,
.side-nav .wi-hist,
.side-nav .wi-hist__list{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
}

/* ✅ Nếu trước đó có "menu/list" lịch sử kiểu cũ */
.side-nav .side-chat-history-menu,
.side-nav .chat-history-menu,
.side-nav .chat-history-list{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
}
/* ===================== END ONE SCROLL ONLY ===================== */

/* ===================== FIX GAP: Tabs ↔ History (NO SPACE) ===================== */
.side-nav .side-chat-history{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Nếu lịch sử đang render dạng WI-HIST */
.side-nav .wi-hist--sidenav{
  padding-top: 0 !important;
}

/* Nếu lịch sử đang render menu cũ */
.side-nav #chatHistoryMenu,
.side-nav .side-chat-history-menu{
  margin-top: 0 !important;
}
/* ===================== END FIX GAP ===================== */

/* --- Media Queries --- */
/* Desktop: Pin sidebar */
@media (min-width: 1024px){
  body.use-side-nav{ padding-left: 0; } /* Không đẩy main content */
 
  /* Nếu muốn sidebar đẩy content như ChatGPT desktop */
  body.use-side-nav.nav-open main.page {
     /* margin-left: 380px; */ /* ✅ Đã sửa: Cập nhật comment theo width mới (380px) */
  }
  
  body.use-side-nav .side-nav{
    top: var(--topbar-h); /* Trên desktop thì bắt đầu từ dưới topbar */
    border-top: none;
  }
  /* Ẩn nút close trên desktop nếu muốn */
  .side-nav-header .close-btn { display: none; }
}

/* Light Mode Overrides */
@media (prefers-color-scheme: light){
  .side-nav {
    background: #f7f7f8;
    border-right: 1px solid #e5e7eb;
  }
  .side-nav-header .new-chat-btn {
    border-color: rgba(0,0,0,0.08); color: #333;
  }
  .side-nav-header .new-chat-btn:hover { background: #ececec; }
  .side-nav-header .close-btn { color: #666; border-color: rgba(0,0,0,0.1); }
  .side-nav-header .close-btn:hover { background: #ececec; color: #000; }
  
  .side-nav .tab{ color:#0f172a; }

  .side-nav .tab:hover{
    background: rgba(2,21,80,.05);
  }

  .side-nav .tab.active{
    background: transparent;   /* ✅ bỏ nền xanh bọc */
    color: #0f172a;
    font-weight: 750;
  }

  .side-nav .tab.active::before{
    background: rgba(29,78,216,.95);
    box-shadow: 0 8px 18px rgba(29,78,216,.20);
  }
  
  .side-chat-history { border-top: 0; }
  .side-history-item { color: #333; }
  .side-history-item:hover { background: #ececec; }
  
  .side-user-section { background: #f7f7f8; border-top-color: #e5e7eb; }
  .side-user-btn { color: #333; }
  .side-user-btn:hover { background: #ececec; }
}


/* Header info (nếu có hiển thị tên + email) */
.profile-info{
  padding:8px 10px 6px;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid rgba(148,163,184,.55);
  margin-bottom:2px;
  word-break:break-all;
}

/* Item trong menu */
.profile-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* không cần space-between nữa */
  gap:8px;

  text-align:left;
  padding:8px 11px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:13px;
  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .03s ease,
    box-shadow .15s ease;
}

/* Hover item thường */
.profile-item:hover{
  background:rgba(15,23,42,.75);
  border-color:rgba(148,163,184,.75);
  box-shadow:0 8px 20px rgba(15,23,42,.85);
}

.profile-item:active{
  transform:translateY(1px);
}

/* ITEM ĐĂNG XUẤT – dùng cho dòng cuối cùng trong menu */
.profile-menu .profile-item:last-child{
  margin-top:4px;
  background:linear-gradient(135deg,#f97373,#ef4444);
  border-color:rgba(248,113,113,.9);
  color:#fff;
  font-weight:600;
  box-shadow:
    0 10px 22px rgba(127,29,29,.65),
    inset 0 1px 0 rgba(254,242,242,.7);
}

/* Hover Đăng xuất – sáng hơn nhẹ */
.profile-menu .profile-item:last-child:hover{
  background:linear-gradient(135deg,#fecaca,#f97373);
}

/* LIGHT MODE: menu sáng, chữ mực tối – giữ danger đỏ cho Đăng xuất */
@media (prefers-color-scheme: light){
  .profile-menu{
    background:linear-gradient(180deg,#f9fafb,#eef2ff);
    border-color:rgba(148,163,184,.75);
    box-shadow:
      0 16px 32px rgba(15,23,42,.18),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  .profile-menu::before{
    background:linear-gradient(180deg,#f9fafb,#eef2ff);
    border-top-color:rgba(148,163,184,.75);
    border-left-color:rgba(148,163,184,.75);
    box-shadow:0 10px 24px rgba(15,23,42,.20);
  }

  .profile-item{
    color:#020617;
  }

  .profile-item:hover{
    background:rgba(15,23,42,.04);
    border-color:rgba(148,163,184,.7);
    box-shadow:0 8px 18px rgba(15,23,42,.18);
  }

  .profile-info{
    color:#64748b;
    border-bottom-color:rgba(148,163,184,.6);
  }
}

/* Profile dropdown: flat + square-ish like side nav, keep topbar profile button round */
.profile-menu{
  top:calc(100% + 8px);
  min-width:220px;
  padding:6px;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.96));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#f8fafc;
  gap:0;
  opacity:0;
  visibility:hidden;
  transform:none;
  pointer-events:none;
  transition:none;
}

.profile-menu::before{
  content:none !important;
  display:none !important;
}

.profile-shell.open .profile-menu{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.profile-info{
  margin-bottom:0;
  padding:8px 10px;
  color:rgba(226,232,240,.72);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:transparent;
  box-shadow:none;
}

.profile-item{
  padding:10px 10px;
  border-radius:2px;
  border:0;
  box-shadow:none;
  font-weight:700;
  transition:none;
}

.profile-item:hover{
  background:rgba(255,255,255,.14);
  border-color:transparent;
  box-shadow:none;
  transform:none;
}

.profile-item:active{
  background:rgba(255,255,255,.12);
  transform:none;
}

.profile-menu .profile-item:last-child{
  margin-top:0;
  background:transparent;
  border-color:transparent;
  color:#fecaca;
  box-shadow:none;
}

.profile-menu .profile-item:last-child:hover{
  background:rgba(239,68,68,.14);
  border-color:transparent;
  color:#fff;
}

@media (prefers-color-scheme: light){
  .profile-menu{
    background:#ffffff;
    border-color:rgba(15,23,42,.16);
    color:#0f172a;
    box-shadow:none;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .profile-item{
    color:#0f172a;
  }

  .profile-item:hover{
    background:rgba(15,23,42,.06);
    border-color:transparent;
    box-shadow:none;
  }

  .profile-item:active{
    background:rgba(15,23,42,.08);
  }

  .profile-info{
    color:#64748b;
    border-bottom-color:rgba(15,23,42,.12);
  }

  .profile-menu .profile-item:last-child{
    background:transparent;
    border-color:transparent;
    color:#b91c1c;
    box-shadow:none;
  }

  .profile-menu .profile-item:last-child:hover{
    background:rgba(239,68,68,.10);
    border-color:transparent;
    color:#991b1b;
  }
}


/* Không còn dùng grid nên chỉ giữ center để override cũ nếu JS gắn class */
.topbar-center{
  /* đã khai báo ở trên, dòng này chỉ để phòng HTML cũ */
}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 6px 18px rgba(17,24,39,.24);

  /* NEW: cho phép scroll ngang, không bao giờ bị đè lên logo/profile */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  flex-wrap:nowrap;
}
.tabs::-webkit-scrollbar{
  display:none;
}

/* ===== Tabs (TOPBAR) — ACTIVE FLAT + LEFT ACCENT ONLY ===== */
.tab{
  appearance:none;
  border:0;
  outline:none;
  user-select:none;

  position:relative;          /* ✅ để vẽ accent bar */
  overflow:hidden;            /* ✅ accent không tràn */

  /* ✅ chừa chỗ cho accent bên trái khi active */
  padding:10px 18px 10px 22px;

  border-radius:999px;
  cursor:pointer;

  color:#f8fbff;
  background:transparent;

  font-weight:800;
  font-size:14px;
  white-space:nowrap;

  transition: background .15s ease, transform .03s ease, color .15s ease;
}

.tab:hover{ background: rgba(255,255,255,.20); }
.tab:active{ transform: translateY(1px); }

/* ✅ ACTIVE: bỏ hoàn toàn “shape” (nền/viền/shadow) — chỉ còn accent trái */
.tab.active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #ffffff;
  font-weight: 900;
}

/* ✅ Accent bar bên trái cho active */
.tab.active::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;

  background: var(--nav-item-accent, rgba(59,130,246,.95));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px var(--nav-item-accent-glow, rgba(59,130,246,.22));
  opacity: .95;
}

/* ✅ Light mode: chữ mực tối + accent xanh đậm như side-nav */
@media (prefers-color-scheme: light){
  .tab{ color:#0f172a; }
  .tab:hover{ background: rgba(2,21,80,.05); }

  .tab.active{
    color:#0f172a;
    background: transparent !important;
    box-shadow: none !important;
  }
  .tab.active::before{
    background: rgba(29,78,216,.95);
    box-shadow: 0 8px 18px rgba(29,78,216,.20);
  }
}

/* ===== Main tab “Quik AI” vẫn giữ style cũ ===== */
.tab-main{
  position:relative;
  padding:12px 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  background:linear-gradient(135deg,#fefce8,#e0f2fe);
  color:#0f172a;
  box-shadow:
    0 10px 26px rgba(15,23,42,.38),
    0 0 0 3px rgba(255,255,255,.70);
  transform:translateY(-1px);
}

/* Vòng tròn “aura” bao quanh cho cảm giác tab tròn nổi lên */
.tab-main::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:
    radial-gradient(circle at 20% 0,rgba(59,130,246,.45),transparent 60%),
    radial-gradient(circle at 80% 100%,rgba(236,72,153,.45),transparent 60%);
  opacity:.28;
  z-index:-1;
}

.tab-main:hover{
  background:linear-gradient(135deg,#fef9c3,#dbeafe);
  box-shadow:
    0 12px 32px rgba(15,23,42,.42),
    0 0 0 4px rgba(255,255,255,.80);
}

.tab-main:active{
  transform:translateY(0);
  box-shadow:
    0 8px 20px rgba(15,23,42,.36),
    0 0 0 2px rgba(255,255,255,.75);
}

/* Khi không active vẫn nổi bật nhẹ hơn */
.tab-main:not(.active){
  opacity:.96;
}

/* Giữ khoảng cách 2 bên để Quik AI nằm nổi bật trong cụm */
.tabs .tab-main{
  margin:0 6px;
}

/* ====== RESPONSIVE: không bị đè nhau ở mọi size ====== */

/* Tablet & màn nhỏ: tách thành 2 hàng
   Hàng 1: brand (trái) + profile (phải)
   Hàng 2: cụm tabs full width, sát trái, scroll ngang nếu thiếu chỗ */
@media (max-width: 1024px){
  .topbar-inner{
    flex-wrap:wrap;
    row-gap:8px;
  }

  .topbar-left{
    order:1;
    flex:1 1 auto;
  }

  .topbar-right{
    order:2;
  }

  .topbar-center{
    order:3;
    flex-basis:100%;
    justify-content:flex-start; /* tabs bắt đầu từ trái như nav chuẩn */
  }

  .tabs{
    width:100%;
  }
}

/* Mobile: giảm padding & font size một chút cho dễ nhìn */
@media (max-width: 768px){
  .topbar-inner{
    padding:8px 10px;
  }
  .brand{
    font-size:16px;
  }
  .tab{
    padding:8px 14px;
    font-size:13px;
  }
  .tab-main{
    padding:9px 18px;
    font-size:14px;
  }
}
.tabs::-webkit-scrollbar{display:none}

/* ===== Dropdown riêng cho tab "Huấn luyện AI" ===== */
.tab-ft-shell{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.tab-ft-shell .tab{
  /* kế thừa style .tab mặc định */
}
.tab-ft-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:240px;
  padding:6px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:60;
}
.tab-ft-shell.open .tab-ft-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.tab-ft-item{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:13px;
  padding:8px 10px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
}
.tab-ft-item span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
}
.tab-ft-item:hover{
  background:rgba(255,255,255,.06);
}
@media (prefers-color-scheme: light){
  .tab-ft-item:hover{
    background:rgba(15,23,42,.04);
  }
}

/* ===== Main tab ở giữa: Quik AI (tabTest) ===== */
.tab-main{
  position:relative;
  padding:12px 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  background:linear-gradient(135deg,#fefce8,#e0f2fe);
  color:#0f172a;
  box-shadow:
    0 10px 26px rgba(15,23,42,.38),
    0 0 0 3px rgba(255,255,255,.70);
  transform:translateY(-1px);
}

/* Vòng tròn “aura” bao quanh cho cảm giác tab tròn nổi lên */
.tab-main::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:
    radial-gradient(circle at 20% 0,rgba(59,130,246,.45),transparent 60%),
    radial-gradient(circle at 80% 100%,rgba(236,72,153,.45),transparent 60%);
  opacity:.28;
  z-index:-1;
}

.tab-main:hover{
  background:linear-gradient(135deg,#fef9c3,#dbeafe);
  box-shadow:
    0 12px 32px rgba(15,23,42,.42),
    0 0 0 4px rgba(255,255,255,.80);
}

.tab-main:active{
  transform:translateY(0);
  box-shadow:
    0 8px 20px rgba(15,23,42,.36),
    0 0 0 2px rgba(255,255,255,.75);
}

/* Khi không active vẫn nổi bật nhẹ hơn */
.tab-main:not(.active){
  opacity:.96;
}

/* Giữ khoảng cách 2 bên để Quik AI đúng nghĩa nằm giữa cụm */
.tabs .tab-main{
  margin:0 6px;
}

@media (max-width:768px){
  .tab-main{
    padding:10px 20px;
    font-size:14px;
  }
}

/* ===================== QUik AI hover menu (Dashboard) ===================== */
.tab-main-shell{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* ✅ FIX: Menu dropdown đưa ra <body> + fixed để KHÔNG bị .tabs overflow cắt */
.tab-main-menu{
  position:fixed;              /* 👈 đổi từ absolute -> fixed */
  left:-9999px;                /* 👈 mặc định “cất” đi */
  top:-9999px;
  transform:translateX(-50%) translateY(6px);

  min-width:220px;
  padding:6px;
  border-radius:16px;

  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.90));
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 18px 40px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);

  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:70;
}

/* Mũi tên */
.tab-main-menu::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:14px;
  height:14px;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.90));
  border-top:1px solid rgba(148,163,184,.55);
  border-left:1px solid rgba(148,163,184,.55);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 8px 20px rgba(15,23,42,.45);
}

/* ✅ Menu mở bằng class (JS sẽ add/remove) */
.tab-main-menu.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Item trong menu */
.tab-main-item{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:#e6ebff;
  font-size:13px;
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .03s ease, filter .15s ease;
}
.tab-main-item:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(148,163,184,.55);
  filter:brightness(1.05);
}
.tab-main-item:active{ transform:translateY(1px); }

/* Light mode */
@media (prefers-color-scheme: light){
  .tab-main-menu{
    background:linear-gradient(180deg,#f9fafb,#eef2ff);
    border-color:rgba(148,163,184,.75);
    box-shadow:0 16px 32px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .tab-main-menu::before{
    background:linear-gradient(180deg,#f9fafb,#eef2ff);
    border-top-color:rgba(148,163,184,.75);
    border-left-color:rgba(148,163,184,.75);
    box-shadow:0 10px 24px rgba(15,23,42,.20);
  }
  .tab-main-item{ color:#020617; }
  .tab-main-item:hover{ background:rgba(15,23,42,.04); border-color:rgba(148,163,184,.7); }
}
/* ===================== META BAR ===================== */
.meta-bar{
  width:100%;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

/* Container của meta-bar cũng full width, không bó hẹp 1280px nữa */
.meta-bar .container{
  width:100%;
  max-width:none;
  margin:0;
  padding:8px 18px;
  box-sizing:border-box;
}

/* ===================== LAYOUT & CARDS ===================== */
.page{
  /* bỏ padding ngang để nội dung bám sát khung, chỉ giữ padding trên/dưới */
  padding:18px 0 18px;
}

/* Pane chính — FULL chiều ngang, không còn cột giữa 1280px nữa
   (khoảng cách từ thanh menu đến nội dung giống AI Custom) */
   .pane{
    width:100%;            /* luôn full width */
    max-width:none;        /* bỏ max-width:var(--container) */
    margin:0;              /* không canh giữa */
    padding:18px 18px 18px;/* TOP 18px giống .custom-pane → mọi tab cách menu như AI Custom */
    box-sizing:border-box; /* width 100% tính luôn padding */
  }

/* card giữ nguyên như cũ */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card-sub{
  background:var(--card-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-top:16px;
  padding:14px;
}

/* ===================== DROPZONE ===================== */
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:26px;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.dropzone.over{border-color:var(--primary);background:rgba(59,130,246,.10)}
.dz-label strong{color:var(--primary)}

/* ===================== OPTIONS ===================== */
.opts-row{display:grid;gap:14px;grid-template-columns:repeat(5,minmax(220px,1fr));margin-top:16px}
@media (max-width:1200px){.opts-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media (max-width:520px){.opts-row{grid-template-columns:1fr}}
.opt{display:flex;flex-direction:column;gap:10px;background:var(--card-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.opt label{font-size:13px;color:var(--muted)}
.opt input[type="number"], .opt input[type="text"], .opt select{
  width:100%; background:#0b1323; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; outline:none;
}
@media (prefers-color-scheme: light){
  .opt input[type="number"], .opt input[type="text"], .opt select{ background:#fff }
}
.span-full{grid-column:1 / -1}

/* ===== Hints (tooltips) ===== */
.hint{
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  cursor:help;
  position:relative;
}

/* Tooltip bubble – bám cạnh phải icon, nở sang bên trái, luôn đủ rộng để đọc */
.hint::after{
  content:attr(data-tip);
  position:absolute;
  right:0;                      /* bám cạnh phải của icon ? */
  top:calc(100% + 8px);

  /* QUAN TRỌNG: ép tooltip có bề ngang đủ rộng, không bị co theo width 22px của .hint */
  min-width:180px;              /* tối thiểu ~2–3 từ mới phải xuống dòng */
  max-width:min(320px,80vw);    /* không tràn khỏi màn hình */
  width:max-content;            /* cho phép nở theo nội dung tới khi đụng max-width */

  background:#0b1323;
  color:#e6ebff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.45;
  white-space:normal;           /* cho phép xuống dòng bình thường */
  text-align:left;
  word-break:break-word;

  opacity:0;
  pointer-events:none;
  box-shadow:var(--shadow-soft);
  transition:opacity .15s ease, transform .15s ease;
  z-index:120;
}

/* Hover: hiện tooltip, trượt nhẹ xuống */
.hint:hover::after{
  opacity:1;
  transform:translateY(2px);
}

/* Light mode: vẫn HIỆN icon ? và tooltip, chỉ chỉnh lại màu cho dễ đọc */
@media (prefers-color-scheme: light){
  .hint{
    display:inline-grid;
    border-color:rgba(148,163,184,.60);
    background:rgba(248,250,252,.96);
    color:#020617;
  }

  .hint::after{
    background:#ffffff;
    color:#020617;
    border-color:rgba(148,163,184,.80);
    box-shadow:0 8px 18px rgba(15,23,42,.16);
  }
}

/* Dark / no-preference: giữ như cũ, luôn hiển thị icon ? */
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: dark){
  .hint{
    display:inline-grid;
  }
}

/* ===================== RAW LIST ===================== */
.raw-list{display:flex;flex-direction:column;gap:8px;max-height:32vh;overflow:auto;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:10px;background:rgba(255,255,255,.02)}
.raw-item{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px}
.raw-item:hover{background:rgba(255,255,255,.04)}
.raw-item .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raw-item .size{color:var(--muted);font-size:12px}

/* ===================== BUTTONS & PROGRESS ===================== */
.btn{
  background:var(--ghost);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 16px;
  cursor:pointer;
  transition:transform .03s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-hero{
  padding:18px 28px;
  font-weight:800;
  font-size:16px;
  letter-spacing:.2px;
}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:var(--primary-ink);
  border-color:transparent;
  box-shadow:var(--shadow-soft);
}
.btn.ghost{background:transparent}
.btn.danger,.btn.cancel{
  background:var(--danger);
  color:#fff;
  border-color:transparent;
}
.btn.sm{
  padding:8px 12px;
  border-radius:12px;
  font-size:13px;
}
.btn.md{
  padding:10px 16px;
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  line-height:20px;
}
.btn.disabled,.btn.disabled:hover{
  opacity:.5;
  pointer-events:none;
  filter:grayscale(.2);
}

/* Ripple for .dl-btn */
.dl-btn{position:relative; overflow:hidden}
.dl-btn .ripple{
  position:absolute; width:200px; height:200px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); opacity:.18; background:#fff; pointer-events:none;
  animation:ripple .5s ease-out forwards;
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1); opacity:0}}

.stack-controls{width:min(720px,100%); margin:8px auto 0; display:flex; flex-direction:column; gap:12px; align-items:center}
.stack-controls .btn{width:100%}

.progress{
  position:relative;
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  overflow:hidden;
}
.progress .bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--ok),var(--ok-2));
  transition:width .25s ease;
}
.progress.err .bar{background:linear-gradient(90deg,var(--err),var(--err-2))}
.progress .label{
  position:absolute;
  left:50%;
  top:-28px;
  transform:translateX(-50%);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

/* Spinner cũ cho progress – tắt hẳn, không còn hiển thị */
.spin{
  display:none !important;
}
.spin.err{
  display:none !important;
}
/* Giữ lại keyframes nếu sau này muốn tái dùng ở nơi khác, nhưng hiện tại không dùng */
@keyframes spin{to{transform:rotate(1turn)}}

/* ===================== SFT (RESULTS) — CLEAN ===================== */
.sft-card{ padding:18px; position:relative; z-index:1; }

/* ==== HERO HEAD ==== */
.sft-head{
  position:sticky; top:8px; z-index:5;
  margin:-18px -18px 14px; padding:18px 18px 12px;
  color:#ffffff;
  background:
    radial-gradient(900px 520px at 90% -20%, rgba(168,85,247,.28), transparent),
    radial-gradient(720px 420px at -10% 40%, rgba(96,165,250,.28), transparent),
    linear-gradient(135deg, var(--sft-hero-1), var(--sft-hero-2));
  border:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.30);
  border-radius:20px 20px 14px 14px;
  box-shadow:0 16px 36px rgba(16,24,40,.35), inset 0 1px 0 rgba(255,255,255,.20);
  overflow:hidden;
}

/* 🔽 Thu nhỏ cụm head + tab cho màn Kết quả train */
body.sft-theme .sft-head{
  margin:-10px -10px 6px;          /* header ngắn lại, ít “chiếm chỗ” hơn */
  padding:10px 12px 6px;
  border-radius:16px 16px 12px 12px;
}

/* Tiêu đề + nút hành động gọn hơn */
body.sft-theme .sft-toolbar{
  margin-bottom:8px;               /* trước là 12px */
}
body.sft-theme .sft-title{
  margin:0;
  font-size:17px;                  /* nhỏ hơn nữa so với 18px */
}

/* Nút Cập nhật / Tải train.jsonl nhỏ gọn */
body.sft-theme .sft-actions .btn{
  padding:8px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:18px;
}

/* Tabs Train / Val / Q&A thấp hơn */
body.sft-theme .sft-subnav{
  padding:6px;
}
body.sft-theme .sft-tab{
  height:34px;
  padding:8px 10px;
  font-size:13px;
}
body.sft-theme .sft-indicator{
  height:34px;
}

/* Meta + filter bớt khoảng trống và padding bên trong */
body.sft-theme .sft-meta{
  margin-top:6px;
}
body.sft-theme .sft-meta .sm-box{
  padding:8px 10px;
}
body.sft-theme .sft-meta .sm-value{
  font-size:14px;
}

body.sft-theme .sft-filter{
  margin-top:6px;
}
body.sft-theme .sft-filter.only-mode .chips{
  padding:6px 8px;
}
body.sft-theme .sft-filter.only-mode .chip{
  padding:9px 14px;
  font-size:13px;
}

.sft-head::before{
  content:""; position:absolute; inset:-1px;
  background:
    repeating-linear-gradient(0deg, var(--sft-grid), var(--sft-grid) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, var(--sft-grid), var(--sft-grid) 1px, transparent 1px, transparent 18px);
  opacity:.18; pointer-events:none;
}

/* Toolbar */
.sft-toolbar{
  display:flex;
  align-items:flex-start;       /* cho phép cao thấp khác nhau khi wrap */
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
  flex-wrap:wrap;               /* 👈 thu hẹp màn hình thì tự xuống hàng */
}

.sft-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

.sft-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;               /* 👈 tránh nút dính/đè nhau */
  justify-content:flex-end;     /* cụm nút vẫn canh phải khi đủ chỗ */
}

.sft-actions .btn{
  background: linear-gradient(180deg,#ffffff,#f7faff);
  color: #0f172a;
  border: 1px solid rgba(2,21,80,.15);
  box-shadow: 0 10px 24px rgba(2,21,80,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.sft-actions .btn:hover{ transform: translateY(-1px); }
.sft-actions .btn:active{ transform: translateY(0); }
.sft-actions .btn.primary{ background: linear-gradient(180deg,#ffffff,#eef3ff); }

/* ==== Mega Tabs ==== */
.sft-subnav{
  position:relative; display:flex; gap:10px; padding:8px;
  border-radius:14px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  overflow:auto hidden;
}
.sft-subnav::-webkit-scrollbar{height:8px}
.sft-subnav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}
.sft-subnav.sft-subnav-xl .sft-tab{min-width:160px;}
.sft-tab{
  position:relative; isolation:isolate; z-index:1;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  padding:10px 14px; height:40px;
  appearance:none; border:1px solid transparent; border-radius:12px;
  background:transparent; color:#f7fbff; cursor:pointer; user-select:none;
  transition:transform .05s ease, filter .15s ease, color .15s ease;
  font-weight:900; font-size:14px; letter-spacing:.1px;
}
.sft-tab:hover{ filter:brightness(1.05) }
.sft-tab:active{ transform:translateY(1px) }
.sft-tab.active{ color:#111827; }
.sft-indicator{
  position:absolute; top:0; left:0; height:40px; width:160px; border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f3f7ff);
  border:1px solid rgba(2,21,80,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 0 6px rgba(255,255,255,.06);
  transform:translate(0,0);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), width .25s ease, height .25s ease;
  z-index:0;
}

/* ==== COMPACT MODE ==== */
.sft-head.is-compact{
  top:6px;
  padding:10px 12px 8px;
  border-radius:14px;
}
.sft-head.at-bottom .sft-subnav{ display:none; }
.sft-head.at-bottom{ padding-bottom:8px; }
.sft-head.at-bottom + #sftGrid{ max-height: calc(100vh - var(--sft-head-h-bottom)); }
.sft-head.is-compact.at-bottom + #sftGrid{ max-height: calc(100vh - var(--sft-head-h-bottom)); }
.sft-head.is-compact .sft-title{ font-size:16px; }
.sft-head.is-compact .sft-subnav{ padding:4px; }
.sft-head.is-compact .sft-tab{ height:34px; padding:8px 12px; font-size:13px; }
.sft-head.is-compact .sft-indicator{ height:34px; }
.sft-head.is-compact .sft-meta,
.sft-head.is-compact .sft-filter{ display:none; }

/* ==== Meta chips ==== */
.sft-meta{
  margin-top:10px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px;
}
.sft-meta .sm-box{
  display:flex; flex-direction:column; gap:6px;
  padding:12px; border-radius:12px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:#fff; box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.sft-meta .sm-label{ font-size:12px; opacity:.9 }
.sft-meta .sm-value{
  font-weight:900; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}

/* ==== Bộ lọc chế độ hiển thị ==== */
.sft-filter{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sft-filter .chips{
  display:flex; gap:8px; padding:6px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
}
.sft-filter .chip{
  appearance:none; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
  padding:9px 12px; border-radius:999px; font-size:13px; cursor:pointer; transition:filter .15s ease, transform .03s ease;
}
.sft-filter .chip:hover{ filter:brightness(1.05) }
.sft-filter .chip:active{ transform:translateY(1px) }
.sft-filter .chip.active{
  background:linear-gradient(135deg, #fff, #f3f7ff); color:#111827; border-color:rgba(2,21,80,.1);
}
.sft-filter.only-mode{ margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; }
.sft-filter.only-mode .chips{
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.sft-filter.only-mode .chip{ padding:12px 18px; font-size:15px; font-weight:800; }
@media (min-width:1024px){ .sft-filter.only-mode .chip{ padding:14px 22px; font-size:15.5px; } }

/* ==== Lưới nội dung SFT ==== */
#sftGrid{
  display:grid;
  grid-template-columns:52px 1fr;  /* cột index nhỏ lại */
  gap:8px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
  padding:8px 8px 10px;
  /* Dùng scroll của toàn trang, KHÔNG scroll riêng trong grid */
  max-height:none;
  overflow:visible;
}

/* Không cần giới hạn chiều cao theo header nữa */
.sft-head + #sftGrid{ max-height:none; }
.sft-head.is-compact + #sftGrid{ max-height:none; }
/* Index cột bên trái */
.row-idx{
  font-family:var(--mono);
  color:var(--muted);
  text-align:right;
  padding:6px 4px;
  font-size:12px;
}

/* Ô dữ liệu hội thoại / JSONL (có vùng text + cụm nút edit/save) */
.row-data{
  background:var(--elev);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  white-space:pre-wrap;
  word-break:break-word;
  /* Gọn hơn nhưng vẫn dễ đọc */
  line-height:1.5;
  font-size:13.5px;
  position:relative;
}

/* Bên trong row-data: text + cụm nút + meta "Đã sửa" */
/* Grid 3 cột:
   - Cột 1: cụm nút Sửa / Lưu / Huỷ
   - Cột 2: pill "Đã sửa"
   - Cột 3: khoảng trống co giãn để hai phần bên trái không dính mép phải */
   .row-data-inner{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    grid-auto-rows:auto;
    column-gap:8px;
    row-gap:8px;
    align-items:center;
  }
  
  /* Vùng text (editable) – luôn chiếm full width hàng trên */
  .row-text{
    grid-column:1 / -1;
    font-family:inherit;
    font-size:inherit;
    white-space:pre-wrap;
    word-break:break-word;
  }
  
  /* Cụm nút Sửa / Lưu / Huỷ – hàng dưới, nằm bên trái pill */
  .row-actions{
    grid-column:1 / 2;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:6px;
  }
  
  /* Nút nhỏ gọn cho inline-editor */
  .row-actions .btn-inline{
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    line-height:1.2;
  }
  
  /* Dòng meta "Đã sửa" – hàng dưới, ngay cạnh cụm nút (bên phải) */
  .row-edit-meta{
    grid-column:2 / 3;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-top:0;
    font-size:12px;
    color:var(--muted);
  }
  
  /* Mobile / màn hẹp: xếp dọc cho dễ đọc */
  @media (max-width: 720px){
    .row-data-inner{
      grid-template-columns:1fr;
    }
    .row-actions{
      grid-column:1 / -1;
      justify-content:flex-start;
    }
    .row-edit-meta{
      grid-column:1 / -1;
      margin-top:2px;
    }
  }

/* Pill "Đã sửa • dd/MM/yyyy • HH:mm" – to hơn, cân tỷ lệ với row-data */
.row-edit-meta .pill-edited{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 14px;                         /* dày & rộng hơn */
  border-radius:999px;
  font-weight:700;
  letter-spacing:.03em;
  font-size:inherit;                         /* dùng font-size 12px từ .row-edit-meta */
  background:rgba(59,130,246,.20);          /* primary soft hơn một chút */
  border:1px solid rgba(59,130,246,.65);
  box-shadow:0 4px 10px rgba(15,23,42,.45); /* tạo cảm giác nổi nhẹ */
}

/* Chấm nhỏ phía trước cho cảm giác "status" */
.row-edit-meta .pill-edited-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(129,140,248,.98);
}

/* Text trong pill */
.row-edit-meta .pill-edited-text{
  white-space:nowrap;
}

/* Light mode: pill sáng hơn, chữ mực tối */
@media (prefers-color-scheme: light){
  .row-edit-meta{
    color:#334155;
  }
  .row-edit-meta .pill-edited{
    background:rgba(59,130,246,.08);
    border-color:rgba(59,130,246,.70);
    box-shadow:none;
    color:#0f172a;
  }
  .row-edit-meta .pill-edited-dot{
    background:rgba(59,130,246,.95);
  }
}

/* Khi đang edit → nhấn mạnh khung */
.row-data.editing{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.65),
    0 0 0 4px rgba(37,99,235,.35);
  border-color:rgba(59,130,246,.85);
}

/* Khi đang gọi API lưu → mờ và khoá tương tác */
.row-data.saving{
  opacity:.75;
  pointer-events:none;
}

/* Trạng thái contenteditable */
.row-text[contenteditable="true"]{
  cursor:text;
  outline:none;
}

/* ==== Pager ==== */
.pager{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center; gap:10px; margin-top:12px;
}
.pager #sftPageInfo{ justify-self:center; font-size:13px; }
.pager > .btn:first-child{ justify-self:start; }
.pager > .btn:last-child{ justify-self:end; }

/* ===================== LOG ===================== */
.log .log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

/* Cụm tiêu đề bên trái giữ kích thước auto */
.log-head-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 auto;
}
/* Progress bar đặt giữa header Nhật ký */
.log-progress-wrap{
  flex:1 1 260px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:220px;
}

/* Vỏ progress: luôn thu gọn, căn giữa theo chiều ngang */
.log-progress-shell{
  width:min(440px, 100%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}

/* Đảm bảo runSpin bám ngay trên thanh progress */
.log-progress-shell .progress{
  position:relative;
}

.log-progress-shell #runSpin{
  top:50%;
  right:8px;
  transform:translateY(-50%);
}

/* Dòng text dưới progress: label + ETA */
.log-progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

/* Label progress (ví dụ: "Tiến trình: 30% - Chunking…") */
.log-progress-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ETA luôn bám bên phải – nhấp nháy nhẹ để thay cho spinner */
.log-progress-eta{
  font-family:var(--mono);
  font-size:12px;
  opacity:.95;
  animation:etaBlink 1s ease-in-out infinite;
}

@keyframes etaBlink{
  0%,100%{ opacity:.95; }
  50%{ opacity:.35; }
}

/* Responsive: màn hẹp thì cho progress xuống dưới nút toggle */
@media (max-width: 920px){
  .log .log-head{
    align-items:flex-start;
  }
  .log-progress-wrap{
    order:3;
    flex-basis:100%;
    justify-content:flex-start;
  }
  .log-view-toggle{
    order:2;
  }
}
/* Cụm tiêu đề + mô tả "Nhật ký (theo thời gian thực)" */
.log-head-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* PILL chung cho các tiêu đề section (Nhật ký, Tệp đã tải lên, ...) */
.section-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:
    radial-gradient(circle at 0 0, rgba(96,165,250,.30), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(129,140,248,.35), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,.9), rgba(30,64,175,.95));
  color:#e5edff;
  border:1px solid rgba(191,219,254,.85);
  box-shadow:
    0 8px 20px rgba(15,23,42,.75),
    0 0 0 1px rgba(15,23,42,.85) inset;
}

/* Riêng pill trong log: sát dòng mô tả phía dưới */
.log-head-main .section-pill{
  margin-bottom:2px;
}

/* Dòng mô tả dưới (ví dụ: "(theo thời gian thực)") */
.log-head-main > :nth-child(2){
  font-size:12px;
  color:var(--muted);
}

/* Cụm nút chuyển Tổng quan / Kỹ thuật */
.log-view-toggle{
  display:inline-flex;
  gap:6px;
  align-items:center;
}

/* Nút chuyển Tổng quan / Kỹ thuật */
.log-toggle{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  padding:4px 10px;
  font-size:12px;
  cursor:pointer;
  background:rgba(15,23,42,.72);
  color:var(--text);
  white-space:nowrap;
  transition:
    background .15s ease,
    color .15s ease,
    transform .03s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.log-toggle:hover{
  filter:brightness(1.05);
  box-shadow:0 4px 10px rgba(15,23,42,.55);
}

.log-toggle:active{
  transform:translateY(1px);
}

.log-toggle.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:var(--primary-ink);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(15,23,42,.60);
}

/* Light mode: pill & nút sáng hơn */
@media (prefers-color-scheme: light){
  .section-pill{
    background:
      radial-gradient(circle at 0 0, rgba(129,140,248,.30), transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(59,130,246,.26), transparent 60%),
      linear-gradient(135deg,#eef2ff,#e0f2fe);
    color:#0f172a;
    border-color:rgba(148,163,184,.75);
    box-shadow:0 8px 18px rgba(15,23,42,.18);
  }

  .log-toggle{
    background:linear-gradient(180deg,#ffffff,#f9fafb);
    color:#020617;
    border-color:rgba(148,163,184,.70);
    box-shadow:0 4px 10px rgba(15,23,42,.14);
  }
  .log-toggle.active{
    background:linear-gradient(135deg,#1d4ed8,#3b82f6);
    color:#eff6ff;
    border-color:transparent;
    box-shadow:0 8px 18px rgba(37,99,235,.55);
  }
}

/* Khung log – vẫn tối để dễ đọc log kỹ thuật */
#runLogs{
  max-height:26vh;
  overflow:auto;
  background:#0a1430;
  color:#d8e1ff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
  font-family:var(--mono);
}

@media (prefers-color-scheme: light){
  #runLogs{
    background:#0b1120;
    color:#e5edff;
  }
}
/* ===================== EXTRACT PANE LAYOUT (Tạo dữ liệu train) ===================== */
/* Bố cục:
   - Cột trái: Dropzone + Tệp RAW đã tải lên
   - Cột phải: Cấu hình tham số + nút Tạo dữ liệu huấn luyện
   - Dưới cùng: Nhật ký (log) full-width
*/


#extractPane{
  /* Không cho xuất hiện scroll ngang riêng trong tab này */
  overflow-x:hidden;
}

#extractPane .card{
  display:grid;
  grid-template-columns:minmax(380px,1.45fr) minmax(320px,1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "upload config"
    "raw    config"
    "log    log";
  gap:18px;
  align-items:flex-start;

  /* Đảm bảo không vượt quá chiều ngang pane → tránh gây scroll ngang */
  max-width:100%;
  box-sizing:border-box;
}

/* Bước 1: Dropzone – trên cùng bên trái */
#extractPane .dropzone{
  grid-area:upload;
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ===================== RAW FILE CARD ===================== */
/* Card Tệp RAW đã tải lên – style giống tp-section trắng của Train Platform */

#extractPane .raw{
  grid-area:raw;
  margin-top:0;
  padding:12px 14px 10px;
  border-radius:18px;
  border:1px solid var(--border-soft,rgba(148,163,184,.35));
  background:#ffffff;
  box-shadow:0 12px 30px rgba(15,23,42,.18);
  color:#0f172a;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Header: dòng "📎 Tệp RAW đã tải lên" + cụm nút */
#extractPane .raw > :first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* Title trong header: in hoa nhẹ, có icon kẹp giấy nếu dùng */
#extractPane .raw > :first-child strong,
#extractPane .raw > :first-child span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Cụm nút trong header – reload / chọn / xoá… */
#extractPane .raw > :first-child .btn,
#extractPane .raw > :first-child button{
  margin-bottom:4px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;

  /* Nền sáng, chữ đen – dùng được cả light & dark */
  background:linear-gradient(180deg,#ffffff,#f9fafb);
  color:#111827;
  border:1px solid rgba(148,163,184,.80);
  box-shadow:0 4px 10px rgba(15,23,42,.18);
}

/* Hover/active nhẹ cho các nút này */
#extractPane .raw > :first-child .btn:hover,
#extractPane .raw > :first-child button:hover{
  filter:none;
  transform:translateY(-1px);
}
#extractPane .raw > :first-child .btn:active,
#extractPane .raw > :first-child button:active{
  transform:translateY(0);
}

/* Giữ nút "Xoá tệp đã chọn" là nút đỏ nổi bật */
#extractPane .raw > :first-child .btn.cancel,
#extractPane .raw > :first-child .btn.danger{
  background:var(--danger);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 4px 10px rgba(127,29,29,.55);
}
#extractPane .raw > :first-child .btn.cancel:hover,
#extractPane .raw > :first-child .btn.danger:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
#extractPane .raw > :first-child .btn.cancel:active,
#extractPane .raw > :first-child .btn.danger:active{
  transform:translateY(0);
}

/* Dark mode: giữ palette nút nền sáng, chữ tối, nổi trên nền đậm xung quanh */
@media (prefers-color-scheme: dark){
  #extractPane .raw > :first-child .btn,
  #extractPane .raw > :first-child button{
    background:#f9fafb;
    color:#020617;
    border-color:rgba(148,163,184,.95);
    box-shadow:0 4px 12px rgba(15,23,42,.85);
  }

  /* Nút xoá vẫn đỏ như global .btn.danger */
  #extractPane .raw > :first-child .btn.cancel,
  #extractPane .raw > :first-child .btn.danger{
    background:var(--danger);
    color:#ffffff;
    border-color:transparent;
    box-shadow:0 4px 12px rgba(127,29,29,.75);
  }
}

/* Dòng ghi chú "Mặc định pipeline chạy tất cả tệp…" ngay dưới header */
#extractPane .raw > :nth-child(2),
#extractPane .raw > p,
#extractPane .raw > small{
  font-size:12px;
  color:#4b5563;
  line-height:1.6;
}

/* Danh sách file RAW giữ nguyên nhưng đặt trên nền trắng mềm hơn */
#extractPane .raw-list{
  margin-top:4px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.9);
  background:#f9fafb;
}

/* State "(Chưa có tệp)" – chữ xám đậm, căn giữa dễ đọc */
#extractPane .raw-list-empty,
#extractPane .raw-list .empty,
#extractPane .raw .empty{
  text-align:center;
  font-size:12px;
  color:#6b7280;
}

/* ===================== DARK MODE TUNING – EXTRACT PANE ===================== */
@media (prefers-color-scheme: dark){
  /* 1. Card ngoài cùng giữ tone var(--card) */
  #extractPane .card{
    background:var(--card);
    border-color:var(--border);
  }

  /* 2. Card "Tệp đã tải lên" đồng bộ với card chính */
  #extractPane .raw{
    background:var(--card-soft);
    color:var(--text);
    box-shadow:var(--shadow-soft);
    border-color:var(--border);
  }

  #extractPane .raw > :nth-child(2),
  #extractPane .raw > p,
  #extractPane .raw > small{
    color:var(--muted);
  }

  #extractPane .raw-list{
    background:rgba(15,23,42,.92);
    border-color:var(--border);
  }

  /* 3. Dropzone cùng tone, không bị lệch màu với các card xung quanh */
  #extractPane .dropzone{
    background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(15,23,42,.86));
    border-color:var(--border);
  }
}
/* ===== hết: DARK MODE TUNING – EXTRACT PANE ===== */
/* ===================== CONFIG CARD (tham số + nút chạy) ===================== */
/* Card cấu hình tham số – mặc định tone tối như toàn bộ tab.
   Light mode sẽ override sang card trắng pastel. */

   #extractPane .opts-row{
    grid-area:config;
    margin-top:0;
    border-radius:18px;
    padding:14px 14px 16px;
  
    /* Layout */
    display:grid;
    grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "model   examples tokens"
      "model   overlap  dedupe"
      "run     run      run";
    gap:12px 10px;
    align-items:flex-start;
  
    /* Theme – DARK / default */
    border:1px solid var(--border);
    background:linear-gradient(180deg,var(--card-soft),var(--card));
    box-shadow:var(--shadow-soft);
  }
  
  /* Light mode: chuyển sang card trắng pastel giống Train Platform */
  @media (prefers-color-scheme: light){
    #extractPane .opts-row{
      border-color:var(--border-soft,rgba(148,163,184,.35));
      background:linear-gradient(180deg,#ffffff,#f5f7ff);
      box-shadow:0 12px 30px rgba(15,23,42,.18);
    }
  }
  
  /* Làm phẳng từng ô .opt để nhìn như 1 form lớn */
  #extractPane .opts-row .opt{
    background:transparent;
    border:none;
    padding:0;
    box-shadow:none;
  }
  
  /* Gán từng ô vào grid-area */
  #extractPane .opts-row .opt:nth-child(1){ grid-area:model; }
  #extractPane .opts-row .opt:nth-child(2){ grid-area:examples; }
  #extractPane .opts-row .opt:nth-child(3){ grid-area:tokens; }
  #extractPane .opts-row .opt:nth-child(4){ grid-area:overlap; }
  #extractPane .opts-row .opt:nth-child(5){ grid-area:dedupe; }
  
  /* Hàng cuối: nút chạy + progress – chiếm full chiều ngang, nhưng nội dung căn giữa */
  #extractPane .opts-row .span-full{
    grid-area:run;
  }



/* ===================== LOG ===================== */
/* Nhật ký – luôn full width hàng dưới cùng */

#extractPane .log{
  grid-area:log;
}

/* ===================== RESPONSIVE ===================== */

/* Tablet: xếp dọc 4 block nhưng vẫn rõ từng phần */
@media (max-width:1024px){
  #extractPane .card{
    grid-template-columns:minmax(0,1.1fr);
    grid-template-areas:
      "upload"
      "config"
      "raw"
      "log";
  }

  #extractPane .dropzone{
    min-height:170px;
  }
}

/* Mobile: layout 1 cột, nút Run full-width dễ bấm */
@media (max-width:768px){
  #extractPane .card{
    display:block;
  }

  #extractPane .dropzone{
    margin-bottom:16px;
  }

  #extractPane .opts-row{
    margin-top:16px;
    grid-template-columns:1fr;
    grid-template-areas:none;
  }

  #extractPane .opts-row .opt,
  #extractPane .opts-row .span-full{
    grid-column:1 / -1;
  }

  /* Mobile: xếp dọc, 2 nút full-width, progress nằm dưới cùng */
  #extractPane .stack-controls{
    max-width:none;
    grid-template-columns:1fr;
    grid-template-areas:
      "run"
      "cancel"
      "prog";
    justify-content:stretch;
    justify-items:stretch;
  }

  #extractPane .stack-controls .btn:nth-of-type(1),
  #extractPane .stack-controls .btn:nth-of-type(2){
    width:100%;
  }


}

/* ===================== HISTORY ===================== */
.history-card{
  padding:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  z-index:1;
}

/* Header cũ (giờ cho phép wrap) */
.history-head{
  display:flex;
  align-items:flex-start;       /* cho phép cao thấp khác nhau khi wrap */
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;               /* 👈 thu hẹp màn hình thì title + nút xuống hàng */
}

.history-title{
  margin:0;
  font-weight:800;
  font-size:18px;
  letter-spacing:.2px;
}

.history-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;               /* 👈 các nút không bị đè nhau khi thiếu chỗ */
  justify-content:flex-end;
}

/* Dropdown generic (dùng cho lịch sử & các nơi khác) */
.dd{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.dd-toggle{
  appearance:none;
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  border:1px solid var(--border);
  background:rgba(15,23,42,.35);
  color:var(--text);
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
  transition:
    background .15s ease,
    filter .15s ease,
    transform .03s ease,
    box-shadow .15s ease;
}
.dd-toggle:hover{
  filter:brightness(1.05);
  box-shadow:0 4px 10px rgba(15,23,42,.45);
}
.dd-toggle:active{
  transform:translateY(1px);
}

/* Menu chung */
.dd-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  border-radius:14px;
  padding:6px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:80; /* luôn nổi trên hero + grid */
}
.dd.open .dd-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.menu-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  border-radius:10px;
  font-size:13px;
  transition:
    background .15s ease,
    color .15s ease,
    transform .03s ease;
}
.menu-item + .menu-item{
  margin-top:4px;
}
.menu-item:hover{
  background:rgba(255,255,255,.06);
}
.menu-item:active{
  transform:translateY(1px);
}

/* Item nguy hiểm (xoá lịch sử) */
.menu-item.danger{
  color:#fff;
  font-weight:700;
  background:linear-gradient(
    135deg,
    rgba(248,113,113,1),
    rgba(220,38,38,1)
  );
  box-shadow:0 8px 18px rgba(127,29,29,.45);
}
.menu-item.danger:hover{
  background:linear-gradient(
    135deg,
    rgba(252,165,165,1),
    rgba(239,68,68,1)
  );
}
/* Biến thể dropdown khi nằm trong header Lịch sử train */
.history-hero .dd-toggle{
  border-radius:999px;
  padding:8px 12px;
  background:linear-gradient(180deg,#ffffff,#f3f7ff);
  color:#111827;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:
    0 8px 18px rgba(15,23,42,.30),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.history-hero .dd-toggle:hover{
  filter:none;
  transform:translateY(-1px);
  box-shadow:
    0 10px 24px rgba(15,23,42,.35),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.history-hero .dd-toggle:active{
  transform:translateY(0);
  box-shadow:
    0 6px 16px rgba(15,23,42,.28),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* Menu nổi kiểu glassy, sáng hơn trên nền gradient */
.history-hero .dd-menu{
  background:linear-gradient(180deg,#f9fafb,#eef2ff);
  border:1px solid rgba(148,163,184,.55);
  box-shadow:
    0 16px 36px rgba(15,23,42,.38),
    inset 0 1px 0 rgba(255,255,255,.8);
  padding:6px;
}

/* Item thường: chữ đậm, màu mực tối */
.history-hero .menu-item{
  color:#0f172a;
  background:transparent;
}
.history-hero .menu-item:hover{
  background:rgba(15,23,42,.05);
}

/* Item nguy hiểm: tách nhẹ phía dưới, full-width đỏ */
.history-hero .menu-item.danger{
  margin-top:6px;
  background:linear-gradient(135deg,#f97373,#ef4444);
  color:#fff;
  box-shadow:
    0 10px 22px rgba(127,29,29,.45),
    inset 0 1px 0 rgba(254,242,242,.7);
}
.history-hero .menu-item.danger:hover{
  background:linear-gradient(135deg,#fecaca,#f97373);
}

/* Hero header mới cho Lịch sử train – dùng chung palette với .sft-head
   nhưng KHÔNG sticky và KHÔNG compact theo scroll */
   .history-hero,
   .history-hero.is-compact{
     /* Bỏ sticky của .sft-head → header là 1 phần nội dung bình thường,
        scroll xuống thì tự nhiên trôi lên trên và khuất khỏi màn hình */
     position:relative;
     top:auto;
   
     /* Giữ layout full-width giống header SFT ban đầu */
     margin:-18px -18px 14px;
     padding:18px 18px 12px;
     border-radius:20px 20px 14px 14px;
   
     /* Cho dropdown (menu, picker) vươn ra ngoài không bị cắt */
     overflow:visible;
   }
   
   /* Vô hiệu hoá hiệu ứng "at-bottom" riêng cho history-hero
      (nếu JS có gắn class .at-bottom thì vẫn giữ padding bình thường) */
   .history-hero.at-bottom{
     padding-bottom:12px;
   }

/* Ghi chú dưới tiêu đề */
.history-note{
  color:var(--muted);
  font-size:13px;
  margin:4px 0 12px;
}
.history-hero .history-note{
  color:rgba(241,245,249,.96);
}

/* Khối controls trong header Lịch sử: Picker phiên + Tabs Train/Val/Q&A */
.h-controls{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) auto; /* picker rộng, tab gọn bên phải */
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

/* Tabs Train / Val / Q&A đặt về bên phải */
.h-controls .hist-subnav{
  justify-self:flex-end;
}

@media (max-width: 920px){
  .h-controls{
    grid-template-columns: 1fr;   /* mobile: xếp dọc */
  }
  .h-controls .hist-subnav{
    justify-self:stretch;         /* mobile: tabs full width */
  }
}

/* ===== PICKER PHIÊN (dropdown chọn phiên train) ===== */
.h-picker.dd{
  width:100%;
}

/* Nút toggle của picker – hiển thị label phiên đang chọn */
.h-picker.dd .dd-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background:var(--card);          /* DARK: dùng màu card */
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(15,23,42,.35);
}

/* Khi đã chọn 1 phiên → chỉ nhấn mạnh viền, KHÔNG đổi màu nền (giữ trắng ở light) */
.h-picker.dd.has-selection .dd-toggle{
  border-color:rgba(59,130,246,.95);
  box-shadow:
    0 10px 24px rgba(15,23,42,.45),
    0 0 0 1px rgba(59,130,246,.35);
}

/* Light mode: thanh chọn phiên nền TRẮNG, chữ đen */
@media (prefers-color-scheme: light){
  .h-picker.dd .dd-toggle{
    background:#ffffff;                       /* luôn trắng */
    color:#020617;
    border:1px solid rgba(148,163,184,.6);
    box-shadow:0 8px 20px rgba(15,23,42,.10);
  }

  .h-picker.dd.has-selection .dd-toggle{
    border-color:rgba(59,130,246,.95);
    box-shadow:
      0 10px 24px rgba(15,23,42,.25),
      0 0 0 1px rgba(59,130,246,.35);
  }
}

/* Dark mode: tối, không còn mảng vàng */
@media (prefers-color-scheme: dark){
  .h-picker.dd .dd-toggle{
    background:rgba(15,23,42,.92);
    color:#e5edff;
    border:1px solid rgba(30,64,175,.9);
    box-shadow:0 10px 26px rgba(15,23,42,.80);
  }

  .h-picker.dd.has-selection .dd-toggle{
    border-color:rgba(129,140,248,.95);
    box-shadow:
      0 12px 30px rgba(15,23,42,.90),
      0 0 0 1px rgba(37,99,235,.70);
  }
}

/* Label trên nút chọn phiên: 2 dòng (tên + ngày giờ) */
#historyPickerLabel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  max-width:100%;
  overflow:hidden;
}
#historyPickerLabel .hp-title{
  font-weight:800;
  font-size:13px;
  letter-spacing:.15px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
#historyPickerLabel .hp-meta{
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  opacity:.9;
}

/* Icon mũi tên bên phải (nếu có) giữ nguyên layout */
.h-picker .dd-toggle > svg,
.h-picker .dd-toggle > span:last-child{
  flex-shrink:0;
}

/* Menu dropdown của picker */
.h-picker .dd-menu{
  left:0;
  right:auto;
  width:min(680px, 96vw);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

/* Header trong dropdown: ô search + meta */
.menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 6px;
}
.menu-head input{
  flex:1;
  background:#0b1323;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
@media (prefers-color-scheme: light){
  .menu-head input{
    background:#fff;
  }
}
.menu-meta{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

/* Menu-head riêng cho dropdown Lịch sử train – cho phép 2 hàng (search + filter) */
#historyPicker .menu-head{
  flex-wrap:wrap;
  align-items:flex-start;
}

/* Hàng filter trong dropdown (lọc ngày + nút sắp xếp) */
.menu-filters{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:4px 2px 6px;
}

.menu-filters .mf-dates{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
}

.mf-date{
  min-width:0;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0b1323;
  color:var(--text);
  font-size:12px;
}

@media (prefers-color-scheme: light){
  .mf-date{
    background:#ffffff;
  }
}

.mf-sep{
  opacity:.6;
}

/* Nút sắp xếp Mới → Cũ / Cũ → Mới */
.mf-sort-btn{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.40);
  color:var(--text);
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:background .15s ease,
             transform .03s ease,
             box-shadow .15s ease,
             filter .15s ease;
}
.mf-sort-btn:hover{
  /* nhẹ hơn, không còn “bọc” đậm */
  background:rgba(15,23,42,.55);
  box-shadow:0 2px 6px rgba(15,23,42,.28);
  filter:brightness(1.03);
}
.mf-sort-btn:active{
  transform:translateY(1px);
  /* nhấn xuống: shadow gần như tắt */
  box-shadow:0 1px 3px rgba(15,23,42,.20);
}

@media (prefers-color-scheme: light){
  .mf-sort-btn{
    background:linear-gradient(180deg,#ffffff,#f3f7ff);
    color:#111827;
    border-color:rgba(148,163,184,.7);

    /* giảm shadow mặc định */
    box-shadow:0 3px 8px rgba(15,23,42,.12);
  }

  .mf-sort-btn:hover{
    /* hover chỉ “nhích” nhẹ, không bọc đậm */
    filter:none;
    box-shadow:0 4px 10px rgba(15,23,42,.16);
    transform:translateY(-1px);
  }

  .mf-sort-btn:active{
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(15,23,42,.12);
  }
}
/* Danh sách phiên trong dropdown – full width với chiều ngang menu */
.menu-list{
  max-height:56vh;
  overflow:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid var(--border);
  background:var(--card-soft);
  border-radius:0 0 12px 12px;
}

/* Group theo ngày */
.t-day{
  padding:2px 4px 6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.t-day-h{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  padding:4px 8px 0;
  opacity:.9;
}

/* Card phiên (dùng chung cho panel bên trái & dropdown) */
.t-item{
  width:100%; /* đảm bảo full chiều ngang khung */
  display:grid;
  grid-template-columns: 1fr auto; /* nội dung bên trái, nút xoá bên phải */
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  transition:
    filter .15s ease,
    transform .03s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.menu-list .t-item{
  width:100%;
}

.t-item:hover{
  filter:brightness(1.03);
  background:var(--card-soft);
  box-shadow:0 6px 16px rgba(15,23,42,.28);
}

/* Card phiên đang được chọn – dùng palette xanh tím giống thanh menu */
.t-item.is-active{
  background:
    radial-gradient(circle at 0 0, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(129,140,248,.25), transparent 60%),
    linear-gradient(135deg,#eff6ff,#eef2ff);
  color:#020617;
  border-color:rgba(59,130,246,.85);
  box-shadow:
    0 10px 24px rgba(15,23,42,.30),
    0 0 0 1px rgba(255,255,255,.85) inset;
}

.t-item.is-active .t-title{
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

.t-item.is-active .t-meta .t-dt{
  font-weight:700;
}

/* Dark mode: active card xanh tím sâu, không còn vàng */
@media (prefers-color-scheme: dark){
  .t-item.is-active{
    background:
      radial-gradient(circle at 0 0, rgba(59,130,246,.32), transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(168,85,247,.32), transparent 60%),
      linear-gradient(135deg,#020617,#0b1220);
    color:#e5edff;
    border-color:rgba(129,140,248,.95);
    box-shadow:
      0 12px 30px rgba(15,23,42,.88),
      0 0 0 1px rgba(15,23,42,.90) inset;
  }
}

/* Bố cục bên trong card */
.t-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.t-header{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.t-title{
  font-weight:800;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* meta: ngày giờ + model */
.t-meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.t-meta .t-dt{
  font-weight:600;
}
.t-meta .t-model{
  opacity:.9;
  font-family:var(--mono);
}

/* Nút xoá màu đỏ trong từng item lịch sử */
.t-del{
  justify-self:flex-end;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:var(--danger);
  color:#ffffff;
  border:1px solid rgba(248,113,113,.9);
  box-shadow:0 4px 10px rgba(127,29,29,.45);
  cursor:pointer;
  text-transform:none;
  letter-spacing:.02em;
}
.t-item.is-active .t-del{
  background:var(--err);
}
.t-del:hover{
  filter:brightness(1.05);
}
.t-del:active{
  transform:translateY(1px);
}

/* Dãy badge số dòng train/val/qa trong card */
.t-badges{
  display:flex;
  gap:6px;
  align-items:center;
}
.badge{
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}
.badge.ok{
  color:#0b3b25;
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.45);
}
.badge.warn{
  color:#3a2507;
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.45);
}
.badge.err{
  color:#3a0b0b;
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.45);
}

/* Màu chữ ngày tháng năm: đen cho light, trắng cho dark */
@media (prefers-color-scheme: light){
  .t-meta .t-dt,
  .t-day-h,
  #historyPickerLabel .hp-meta{
    color:#020617; /* gần như đen */
  }
}
@media (prefers-color-scheme: dark){
  /* Toàn bộ text khu vực phiên (panel bên trái + dropdown chọn phiên) dùng trắng mềm */
  .history-card,
  .history-card .t-item,
  .history-card .t-main,
  .history-card .t-title,
  .history-card .t-meta,
  .history-card .t-meta .t-dt,
  .history-card .t-meta .t-model,
  .history-card .t-day-h,
  .menu-list .t-item,
  .menu-list .t-main,
  .menu-list .t-title,
  .menu-list .t-meta,
  .menu-list .t-meta .t-dt,
  .menu-list .t-meta .t-model,
  .menu-list .t-day-h,
  #historyPickerLabel .hp-title,
  #historyPickerLabel .hp-meta{
    color:#e5edff; /* trắng mềm, tương phản tốt trên nền tối */
  }
}

/* Nút xoá màu đỏ trong từng item lịch sử */
.t-del{
  justify-self:flex-end;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:var(--danger);
  color:#ffffff;
  border:1px solid rgba(248,113,113,.9);
  box-shadow:0 4px 10px rgba(127,29,29,.45);
  cursor:pointer;
  text-transform:none;
  letter-spacing:.02em;
}
.t-item.is-active .t-del{
  background:var(--err);
}
.t-del:hover{
  filter:brightness(1.05);
}
.t-del:active{
  transform:translateY(1px);
}
/* Dãy badge số dòng train/val/qa trong card */
.t-badges{
  display:flex;
  gap:6px;
  align-items:center;
}

.badge{
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}

/* LIGHT MODE: giữ nguyên palette cũ */
.badge.ok{
  color:#0b3b25;
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.45);
}
.badge.warn{
  color:#3a2507;
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.45);
}
.badge.err{
  color:#3a0b0b;
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.45);
}

/* DARK MODE: pill Train / Val / Q&A tương phản rõ ở cả panel + dropdown */
@media (prefers-color-scheme: dark){
  .badge{
    border-color:rgba(148,163,184,.70);
    background:rgba(15,23,42,.95);
    color:#e5edff;
    box-shadow:0 4px 10px rgba(15,23,42,.85);
  }

  .badge.ok{
    background:rgba(34,197,94,.32);
    border-color:rgba(34,197,94,.85);
    color:#ecfdf5;
  }

  .badge.warn{
    background:rgba(245,158,11,.32);
    border-color:rgba(245,158,11,.85);
    color:#fffbeb;
  }

  .badge.err{
    background:rgba(239,68,68,.34);
    border-color:rgba(239,68,68,.90);
    color:#fef2f2;
  }
}

/* Tabs Train / Val / Q&A ngay trong header */
.hist-subnav{
  position:relative;
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  overflow:auto hidden;
}
.hist-tab{
  appearance:none;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  transition:filter .15s ease, transform .03s ease, color .15s ease, background .15s ease;
}
.hist-tab:hover{
  filter:brightness(1.05);
}
.hist-tab:active{
  transform:translateY(1px);
}
.hist-tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
}
#histTabIndicator{
  display:none;
}

/* Khi nằm trong hero .sft-head → dùng palette giống header Kết quả train */
.history-hero .hist-subnav{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.30);
}
.history-hero .hist-tab{
  border-color:transparent;
  color:#f9fbff;
}
.history-hero .hist-tab.active{
  background:linear-gradient(180deg,#ffffff,#f3f7ff);
  color:#111827;
  border-color:rgba(2,21,80,.12);
}

/* Bộ chọn số dòng — ẩn khỏi UI nhưng vẫn giữ DOM để không vỡ JS */
.h-take{
  display:none;           /* Ẩn hoàn toàn cụm chips + info */
}

.h-take .chips{
  padding:6px;
}

/* Các style cho .h-take khi nằm trong hero vẫn giữ để không lỗi nếu tái dùng */
.history-hero .h-take .chips{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.history-hero .histTake{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.36);
  background:transparent;
  color:#f9fbff;
}
.history-hero .histTake.active{
  background:linear-gradient(135deg,#ffffff,#f3f7ff);
  color:#111827;
  border-color:rgba(2,21,80,.12);
}

#histPageInfo{
  font-size:13px;
  color:var(--muted);
}

/* Info + grid bên dưới header */
#historyInfo{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  margin-top:10px;
  margin-bottom:12px;
}
.hi-box{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.hi-label{
  font-size:12px;
  color:var(--muted);
}
.hi-value{
  font-weight:800;
}
#historyGrid{
  display:grid;
  grid-template-columns:52px 1fr;  /* index bớt rộng để dành chỗ cho nội dung */
  gap:8px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
  padding:8px 8px 10px;
  /* Dùng scroll của toàn trang, không còn scroll bên trong grid */
  max-height:none;
  overflow:visible;
}

/* Footer (pager + info) */
.history-foot{
  margin-top:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
#dlHistCurrent.btn{
  padding:10px 16px;
  border-radius:14px;
  font-weight:800;
}

@media (max-width:560px){
  .menu-head{
    flex-direction:column;
    align-items:stretch;
  }
  .menu-meta{
    align-self:flex-end;
  }
}

/* ===================== UTIL ===================== */
.hidden{display:none!important}
input::placeholder{color:#8b9bb6}
select,input{color-scheme:dark}
@media (prefers-color-scheme: light){select,input{color-scheme:light}}

/* ===================== NOTICES (center overlay) ===================== */
#notices{
  position:fixed; inset:0;
  /* Mặc định không chặn chuột khi không có notice */
  pointer-events:none;
  z-index:120;
}
/* Khi có overlay đang mở → cho phép nhận tương tác */
#notices.open{ pointer-events:auto; }

.notice-overlay{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .18s ease;
  /* Quan trọng: chính overlay nhận pointer-events */
  pointer-events:auto;
}
.notice-overlay.open{ opacity:1; }

.notice{
  width:min(540px,94vw);
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:16px; padding:16px 16px 12px;
  box-shadow:0 18px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(6px) scale(.98);
  transition:transform .18s ease, opacity .18s ease;
  opacity:.98;
}
.notice-overlay.open .notice{ transform:none; opacity:1; }
.n-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.n-ic{ font-size:22px; }
.n-title{ font-weight:900; font-size:16px; }
.n-msg{ color:var(--muted); margin:6px 0 10px; }
.n-actions{ display:flex; gap:8px; justify-content:flex-end; }
.notice.ok   { border-color:rgba(34,197,94,.45); background:linear-gradient(180deg,rgba(34,197,94,.10),transparent),var(--card); }
.notice.warn { border-color:rgba(245,158,11,.45); background:linear-gradient(180deg,rgba(245,158,11,.12),transparent),var(--card); }
.notice.err  { border-color:rgba(239,68,68,.55); background:linear-gradient(180deg,rgba(239,68,68,.12),transparent),var(--card); }
.notice.info { border-color:rgba(59,130,246,.45); background:linear-gradient(180deg,rgba(59,130,246,.12),transparent),var(--card); }

/* NEW: khi mở notice khoá cuộn nền (đặt ở UTIL nếu muốn) */
body.no-scroll{ overflow:hidden; }

/* =========================
   TOPBAR: left actions (toggle + Quik AI + New chat) — GROUP PILL
   ========================= */
   .topbar-left{
    display:flex;
    align-items:center;
  }
  
  .topbar-left-actions{
    display:flex;
    align-items:center;
    pointer-events:auto;
  }
  
  /* ✅ NEW: 1 pill chung bọc 3 nút */
  .topbar-pill{
    display:flex;
    align-items:center;
    height: var(--tb-ctl-h);
    border-radius: 999px;
    background: var(--tb-group-bg);
    border: 1px solid var(--tb-group-border);
    box-shadow: var(--tb-group-shadow);
    overflow:hidden; /* để “liền mạch” và cắt góc đẹp */
  }
  
  /* separator giữa các nút (liền mạch như ChatGPT) */
  .topbar-pill > button + button{
    border-left: 1px solid var(--tb-group-sep);
  }
  
  /* ✅ RESET style 3 nút khi nằm trong pill: bỏ bg/border/shadow riêng lẻ */
  .topbar-pill .side-nav-toggle,
  .topbar-pill #topbarQuikAiBtn.topbar-quik-ai-btn,
  .topbar-pill #chatNew.topbar-new-chat-btn{
    height:100%;
    border-radius:0;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
  
    display:inline-flex;
    align-items:center;
    justify-content:center;
  
    color:#0f172a; /* chữ/icon mực tối trên pill trắng */
  }
  
  /* icon-only buttons (menu + new chat) */
  .topbar-pill .side-nav-toggle,
  .topbar-pill #chatNew.topbar-new-chat-btn{
    width: var(--tb-ctl-h);
    min-width: var(--tb-ctl-h);
    padding:0;
  }
  
  /* Quik AI ở giữa: có padding ngang, vẫn giữ weight */
  .topbar-pill #topbarQuikAiBtn.topbar-quik-ai-btn{
    padding: 0 12px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .1px;
  
    /* giữ tầng nổi cho dropdown */
    position: relative;
    z-index: 10050;
    isolation: isolate;
    pointer-events:auto;
  }
  
  /* Hover / Press cho nút bên trong pill */
  .topbar-pill .side-nav-toggle:hover,
  .topbar-pill #topbarQuikAiBtn:hover,
  .topbar-pill #chatNew:hover{
    background: var(--tb-group-hover) !important;
  }
  
  .topbar-pill .side-nav-toggle:active,
  .topbar-pill #topbarQuikAiBtn:active,
  .topbar-pill #chatNew:active{
    background: var(--tb-group-press) !important;
  }
  
  /* Focus: viền nằm “trong” pill để không bị overflow cắt */
  .topbar-pill .side-nav-toggle:focus-visible,
  .topbar-pill #topbarQuikAiBtn:focus-visible,
  .topbar-pill #chatNew:focus-visible{
    outline: 2px solid rgba(59,130,246,.95);
    outline-offset: -2px;
  }
  
  /* Active/open state cho Quik AI trong pill */
  .topbar-pill #topbarQuikAiBtn[aria-expanded="true"]{
    background: rgba(59,130,246,.10) !important;
  }
  
  /* ✅ Icon stroke theo currentColor, hợp pill trắng */
  .topbar-pill .topbar-ic rect,
  .topbar-pill .topbar-ic path,
  .topbar-pill .topbar-ic line,
  .topbar-pill .topbar-ic circle{
    stroke: currentColor;
    opacity:.92;
  }
  
/* Dark mode: pill trắng + chữ/icon mực tối (ChatGPT-like) */
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: dark){
  .topbar-pill{
    background: var(--tb-group-bg);
    border-color: var(--tb-group-border);
    box-shadow: var(--tb-group-shadow);
  }

  .topbar-pill > button + button{
    border-left-color: var(--tb-group-sep);
  }

  .topbar-pill .side-nav-toggle,
  .topbar-pill #topbarQuikAiBtn.topbar-quik-ai-btn,
  .topbar-pill #chatNew.topbar-new-chat-btn{
    color:#0f172a;
  }
}
  
/* ===================== TOPBAR: Quik AI (PILL đồng bộ với mọi nút) ===================== */
/* Quik AI kế thừa style pill từ TOPBAR CONTROLS; thêm tầng nổi để không bị view nào che */
#topbarQuikAiBtn.topbar-quik-ai-btn{
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .1px;

  /* ✅ KEY: tạo tầng nổi riêng + không bị các view khác đè */
  position: relative;
  z-index: 10050;          /* cao hơn các panel thông thường */
  isolation: isolate;      /* khóa stacking context cho dropdown/popup con */
}

/* caret gọn */
#topbarQuikAiBtn .topbar-quik-ai-caret{
  font-size: 11px;
  opacity: .8;
  transform: translateY(-.5px);
}

/* trạng thái open: nhấn nhẹ + nhô lên trên các view */
#topbarQuikAiBtn[aria-expanded="true"]{
  border-color: color-mix(in srgb, var(--tb-ctl-border) 60%, rgba(59,130,246,.35));
  background: color-mix(in srgb, var(--tb-ctl-press) 70%, rgba(59,130,246,.08));

  /* ✅ tăng độ nổi khi mở để không bị “lọt dưới” layer khác */
  box-shadow:
    0 18px 44px rgba(15,23,42,.35),
    0 0 0 1px rgba(59,130,246,.18);
}

/* ===================== Sidebar Chat History (ChatGPT-like) ===================== */
.side-chat-history{
  margin-top: 10px;
  padding: 10px 10px 12px;
  border-top: 0;
}

.side-chat-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
}

.side-chat-history-title{
  font-weight: 700;
  font-size: 12.5px;
  opacity: .9;
}

/* Render history menu as an inline list in sidebar (not absolute dropdown) */
#sideNav .side-chat-history-menu{
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100%;
  max-height: calc(100vh - 220px);
  overflow: auto;
  display:block !important;
}

#sideNav .side-chat-history-menu.hidden{
  display:block !important; /* ✅ luôn hiển thị trong sidebar */
  visibility: visible !important;
  opacity: 1 !important;
}

#sideNav .side-chat-history-menu .chat-history-empty{
  opacity: .7;
  font-size: 12.5px;
  padding: 8px 6px;
}

/* ===================== SIDENAV — PUSH MODE (ChatGPT-like) ===================== */
body.use-side-nav{
  overflow-x: hidden; /* tránh phát sinh scroll ngang khi push */
}

/* SideNav dạng off-canvas bên trái */
body.use-side-nav #sideNav{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  height: calc(100vh - var(--topbar-h));
  width: var(--wi-side-nav-w, 380px);

  /* đóng: trượt ra ngoài */
  transform: translateX(calc(-1 * var(--wi-side-nav-w, 380px)));
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);

  z-index: 10000;
}

/* mở: trượt vào */
body.use-side-nav.nav-open #sideNav{
  transform: translateX(0);
}

/* ĐẨY toàn bộ vùng nội dung sang phải khi nav mở (mượt + đồng nhất mọi tab, kể cả Quik AI) */
body.use-side-nav main.page{
  overflow-x: hidden;
  /* Dùng layout shift (margin/width) thay vì transform để không phá position:fixed bên trong (chat composer). */
  transition:
    margin-left .28s cubic-bezier(0.22, 1, 0.36, 1),
    width .28s cubic-bezier(0.22, 1, 0.36, 1);
  margin-left: 0;
  width: 100%;
  transform: none !important;
  will-change: auto;
}
body.use-side-nav:not(.nav-open) main.page{
  margin-left: 0;
  width: 100%;
}
body.use-side-nav.nav-open main.page{
  margin-left: var(--wi-side-nav-w, 380px);
  width: calc(100% - var(--wi-side-nav-w, 380px));
  transform: none !important;
}

/* ===================== SIDENAV WHITE THEME (Unified ChatGPT-like) ===================== */
body.use-side-nav #sideNav{
  background:#ffffff;
  border-right:1px solid #e5e7eb;
  box-shadow:none;
  color:#111827;
  scrollbar-color: rgba(148,163,184,.72) transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.use-side-nav #sideNav .side-nav-header .new-chat-btn,
body.use-side-nav #sideNav .side-nav-header .close-btn{
  color:#111827;
  border:1px solid rgba(15,23,42,.14);
  background:#ffffff;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body.use-side-nav #sideNav .side-nav-header .new-chat-btn:hover,
body.use-side-nav #sideNav .side-nav-header .close-btn:hover{
  background:#f3f4f6;
  border-color:rgba(15,23,42,.20);
}
body.use-side-nav #sideNav .side-nav-header .new-chat-btn:active,
body.use-side-nav #sideNav .side-nav-header .close-btn:active{
  background:#eceff3;
}

body.use-side-nav #sideNav .tab{
  color:#111827;
}
body.use-side-nav #sideNav .tab:hover{
  background:#f3f4f6;
}
body.use-side-nav #sideNav .tab.active{
  color:#111827;
  background:#eceff3;
}
body.use-side-nav #sideNav .tab.active::before{
  content:none;
  display:none;
}
body.use-side-nav #sideNav .tab.tab-sub:hover{
  color:#111827;
  background:#f3f4f6;
}

body.use-side-nav #sideNav .side-chat-history{
  border-top:0;
}
body.use-side-nav #sideNav .side-chat-history-menu .chat-history-empty{
  color:rgba(15,23,42,.62);
}

body.use-side-nav #sideNav .wi-hist__search{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  padding:8px 12px;
  box-shadow:none;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.use-side-nav #sideNav .wi-hist__sort-btn{
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,.14);
  background:#ffffff;
  color:#1f2937;
  box-shadow:none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body.use-side-nav #sideNav .wi-hist__sort-btn:hover{
  background:#f3f4f6;
  border-color:rgba(15,23,42,.22);
  color:#111827;
  box-shadow:none;
}
body.use-side-nav #sideNav .wi-hist__sort-btn:active{
  background:#eceff3;
  border-color:rgba(15,23,42,.24);
  box-shadow:none;
}
body.use-side-nav #sideNav .wi-hist__sort-btn[aria-expanded="true"]{
  background:#eceff3;
  border-color:rgba(15,23,42,.24);
  color:#111827;
  box-shadow:none;
}
body.use-side-nav #sideNav .wi-hist__sort-btn:focus-visible{
  outline:2px solid rgba(59,130,246,.45);
  outline-offset:2px;
}
body.use-side-nav #sideNav .wi-hist__sort-btn svg{
  width:18px;
  height:18px;
  stroke-width:2.1 !important;
}

body.use-side-nav #sideNav .wi-hist__menu{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.16);
  border-radius:8px;
  color:#111827;
  box-shadow:none;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.use-side-nav #sideNav .wi-hist__menu-item:hover{
  background:#f3f4f6;
  box-shadow:none;
}
body.use-side-nav #sideNav .wi-hist__menu-item.is-active{
  background:#eceff3;
  box-shadow:none;
}

body.use-side-nav #sideNav .wi-hist__group-label{
  color:#6b7280;
  opacity:1;
}

body.use-side-nav #sideNav .wi-hist__list{
  gap:10px;
  padding:6px 8px 12px;
}

body.use-side-nav #sideNav .wi-hist__group{
  gap:4px;
}

body.use-side-nav #sideNav .wi-hist__group-items{
  border:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

body.use-side-nav #sideNav .wi-hist__group-items .wi-hist__item + .wi-hist__item{
  border-top:0;
  margin-top:2px;
}

body.use-side-nav #sideNav .wi-hist__item{
  min-height:42px;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  transition: background-color .16s ease, border-color .16s ease;
}
body.use-side-nav #sideNav .wi-hist__item:hover{
  background:#f3f4f6;
  border-color:transparent;
  box-shadow:none;
}
body.use-side-nav #sideNav .wi-hist__item.is-active{
  background:#eceff3;
  border-color:transparent;
  box-shadow:none;
}
body.use-side-nav #sideNav .wi-hist__item.is-loading{
  background:linear-gradient(90deg, #f3f4f6 0%, #eef2f7 45%, #f3f4f6 100%);
  box-shadow:none;
}

body.use-side-nav #sideNav .wi-hist__item::before{
  content:none;
  display:none;
}

body.use-side-nav #sideNav .wi-hist__open{
  padding:9px 72px 9px 12px;
}

body.use-side-nav #sideNav .wi-hist__actions{
  right:8px;
}

body.use-side-nav #sideNav .wi-hist__title{
  display:block;
  font-size:13.2px;
  line-height:1.35;
  max-height:calc(1.38em * 2);
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:break-word;
  word-break:normal;
}

body.use-side-nav #sideNav .side-chat-history-menu{
  border:0;
  background:transparent;
}
body.use-side-nav #sideNav .wi-hist__action{
  color:#334155;
  border-color:rgba(15,23,42,.16);
  background:#ffffff;
  border-radius:6px;
}
body.use-side-nav #sideNav .wi-hist__action:hover{
  background:#f3f4f6;
  border-color:rgba(15,23,42,.24);
}