/* =====================================================================
   SHIGAIA · Phòng thử Chatbot — Giao diện v2.1
   Agent: Claude | 2026-08-09
   Design system: ui-ux-pro-max → "Soft UI Evolution" (enterprise console)
   Palette: navy #0F172A · blue CTA #0369A1 · nền trắng #F8FAFC
   Font thương hiệu Shigaia: Be Vietnam Pro (cả tiêu đề lẫn nội dung)
   Nguyên tắc: giữ 100% class/ID (app.js không đổi). Trọng tâm lần này là
   BỐ CỤC — gom cụm, khối thu gọn, phân cấp rõ, mật độ gọn; gradient nhẹ ở
   các mảng lớn (header, hero, nút chính, bong bóng khách).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap");

:root {
  /* --- Navy / blue / white (đúng brief) --- */
  --navy: #0F172A;
  --navy-2: #1E293B;
  --slate: #334155;
  --blue: #0369A1;
  --blue-2: #0284C7;
  --blue-soft: #E0F2FE;
  --blue-tint: #F0F7FC;

  /* --- Gradient cho mảng lớn (nhẹ) --- */
  --grad-navy: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
  --grad-blue: linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  --grad-hero: linear-gradient(135deg, #F0F7FC 0%, #E7EEF6 100%);

  /* --- Nền & mực --- */
  --bg: #F4F7FB;
  --canvas: #F4F7FB;
  --paper: #FFFFFF;
  --surface-2: #F5F8FC;
  --surface-3: #EDF2F8;
  --cream: #F5F8FC;
  --ink: #0F172A;
  --muted: #64748B;

  /* --- Đường nét --- */
  --line: #E2E8F0;
  --line-strong: #CBD5E1;

  /* --- Ngữ nghĩa --- */
  --green: #059669; --green-bg: #ECFDF5;
  --red: #DC2626;   --red-bg: #FEF2F2;
  --warn: #B45309;  --warn-bg: #FEF3E2;

  /* --- Typography (thương hiệu) --- */
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;

  /* --- Bo góc & bóng (Soft UI: bóng mềm, chồng lớp) --- */
  --r-sm: 9px; --r: 13px; --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -6px rgba(15,23,42,.10);
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -14px rgba(15,23,42,.16);
  --shadow-lg: 0 24px 60px -28px rgba(15,23,42,.28);
  --ring: 0 0 0 3px rgba(3,105,161,.18);

  /* --- Spacing scale (density cao — console) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 400 14px/1.55 var(--font-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, legend, .brand strong, .button, .eyebrow, .sum-title { font-family: var(--font-heading); }
button { cursor: pointer; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* Agent: Codex | 2026-08-27 | Google OIDC entry and fail-closed pending state. */
.login-card { width: min(430px, calc(100% - 32px)); margin: 10vh auto; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-brand .mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad-navy); font-size: 23px; font-weight: 800; }
.login-brand h1, .login-brand p { margin: 0; }
.login-copy { color: var(--slate); margin: 0 0 18px; }
.google-login-button { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--navy); font-weight: 600; text-decoration: none; }
.google-login-button:hover { border-color: var(--blue); box-shadow: var(--ring); }
.google-g { color: #4285f4; font-size: 20px; font-weight: 800; }
.legacy-login { display: grid; gap: 12px; }
.legacy-login[hidden], .google-login-button[hidden] { display: none; }
.legacy-login label { display: grid; gap: 6px; }
.legacy-login input { padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px; }
.legacy-login button { border: 0; border-radius: 9px; padding: 11px; color: #fff; background: var(--grad-blue); font-weight: 700; }
.login-note { min-height: 22px; color: var(--red); margin: 14px 0 0; }
.login-security { color: var(--muted); font-size: 12px; margin: 14px 0 0; }
.pending-card h2 { margin: 16px 0 8px; }
.pending-badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: var(--warn); background: var(--warn-bg); font-size: 11px; font-weight: 800; }
.secondary-login { margin-top: 20px; background: var(--surface-2); }

/* ============================ TOPBAR (gradient navy) ============================ */
.topbar {
  height: 62px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--grad-navy); color: #fff; position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px -12px rgba(15,23,42,.6);
}
.brand, .brand > div, .top-actions, .chat-head > div, .integration-panel > div { display: flex; align-items: center; }
.topbar-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.brand { gap: 11px; color: #fff; letter-spacing: .1em; }
.brand-mark {
  width: 48px; height: 36px; padding: 6px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px;
  background: #fff; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.brand > div { align-items: flex-start; flex-direction: column; line-height: 1.15; }
.brand strong { font-weight: 700; font-size: 14px; }
.brand small { color: rgba(255,255,255,.66); letter-spacing: .02em; font-size: 11px; margin-top: 2px; text-transform: none; }
.top-actions { gap: 10px; }

/* ============================ LAYOUT ============================ */
.workspace {
  height: calc(100vh - 62px); min-height: 640px; display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(400px, 1fr) minmax(280px, 330px);
  gap: var(--sp-3); padding: var(--sp-3); max-width: 1580px; margin: 0 auto;
}
.side { min-width: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--sp-3); }
.panel, .chat-shell {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.panel { padding: var(--sp-4); margin: 0; }
.panel h2 { margin: 0 0 var(--sp-2); font: 700 18px/1.25 var(--font-heading); color: var(--navy); }
.panel h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--navy); text-transform: none; letter-spacing: 0; }
.panel p { margin: var(--sp-2) 0; }
.eyebrow { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--blue); text-transform: uppercase; }
.muted, label span { color: var(--muted); font-size: 12px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }

/* Hero/intro — gradient nhẹ, gọn */
.intro-panel { background: var(--grad-hero); border-color: #DCE6F1; }
.intro-panel h2 { font-size: 17px; margin-bottom: 4px; }
.intro-panel p { margin: 4px 0 0; font-size: 12.5px; color: var(--slate); }
.seed-ad-box { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); display: grid; gap: 6px; }
.seed-ad-box > label { color: var(--navy); font-size: 12px; font-weight: 600; }
.seed-ad-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.seed-ad-row input { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; background: var(--paper); color: var(--ink); outline: none; }
.seed-ad-row input:focus { border-color: var(--blue); box-shadow: var(--ring); }
.seed-ad-box small { color: var(--muted); font-size: 11px; line-height: 1.4; }

/* ============================ COLLAPSIBLE (details) ============================ */
.collapsible { padding: 0; overflow: hidden; }
.collapsible > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: var(--sp-3) var(--sp-4); font-family: var(--font-heading); font-weight: 700;
  font-size: 13px; color: var(--navy); user-select: none; transition: background .16s ease;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::after {
  content: "⌄"; margin-left: auto; font-size: 15px; color: var(--muted);
  transition: transform .2s ease; line-height: 1;
}
.collapsible[open] > summary::after { transform: rotate(180deg); }
.collapsible > summary:hover { background: var(--surface-2); }
.collapsible > summary .sum-title { font-family: var(--font-heading); font-weight: 700; }
.collapsible > *:not(summary) { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.collapsible > *:last-child { margin-bottom: var(--sp-4); }
.collapsible[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3); }
.integration-summary { gap: 10px; }
.integration-summary .sum-stack { display: flex; flex-direction: column; line-height: 1.25; }
.integration-summary .sum-stack small { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: 11px; }
.integration-summary .mini-chip { margin-left: auto; }
.integration-summary::after { margin-left: 6px; }

/* ============================ BUTTONS ============================ */
.button {
  border: 0; border-radius: var(--r-sm); padding: 10px 14px; font-weight: 600; font-size: 13px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  color: #fff; background: var(--grad-blue); box-shadow: 0 6px 16px -10px rgba(3,105,161,.8);
}
.button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px -12px rgba(3,105,161,.9); }
.button:active { transform: translateY(0); }
.button.secondary { background: var(--surface-2); color: var(--navy); box-shadow: none; border: 1px solid var(--line-strong); }
.button.secondary:hover { background: var(--surface-3); border-color: var(--blue); }
.button.primary { color: #fff; background: var(--grad-blue); }
.button.full { width: 100%; }

.status-chip, .stage-chip, .mini-chip {
  display: inline-flex; align-items: center; white-space: nowrap; border-radius: 99px;
  background: var(--green-bg); color: var(--green); padding: 4px 9px; font-size: 11px; font-weight: 600;
}
.status-chip::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(5,150,105,.18); }
.mini-chip { background: var(--surface-3); color: var(--slate); }
.warning { background: var(--warn-bg); color: var(--warn); }
.top-actions .status-chip { background: rgba(255,255,255,.14); color: #fff; }
.top-actions .status-chip::before { box-shadow: 0 0 0 3px rgba(255,255,255,.16); }

/* ============================ PROGRESS / DRAFT ============================ */
.progress-list { display: grid; gap: 6px; }
.progress-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); font-size: 12.5px; transition: .16s ease; }
.progress-item.done { color: var(--navy); background: var(--green-bg); border-color: transparent; }
.check { width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 50%; font-size: 11px; color: transparent; }
.done .check { background: var(--green); color: #fff; border-color: var(--green); }
.empty-state { color: var(--muted); font-size: 12px; padding: 12px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.draft-grid { display: grid; grid-template-columns: 78px 1fr; gap: 6px 8px; font-size: 12px; }
.draft-grid dt { color: var(--muted); }
.draft-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ============================ CHAT (hero) ============================ */
.chat-shell { min-width: 0; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; box-shadow: var(--shadow); }
.chat-head { padding: 14px 18px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.chat-head > div { flex-wrap: wrap; gap: 8px; }
.chat-head strong { color: var(--navy); font-family: var(--font-heading); font-weight: 700; }
.chat-head small { width: 100%; margin-left: 18px; color: var(--muted); font-size: 11px; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
.stage-chip { background: var(--blue-soft); color: var(--blue); }
.messages { padding: 22px; overflow-y: auto; background: linear-gradient(180deg, #FBFDFF 0, #F5F8FC 100%); }
.message { display: flex; flex-direction: column; margin: 0 0 14px; max-width: 78%; animation: msg-in .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.message.bot { align-items: flex-start; }
.message.customer { align-items: flex-end; margin-left: auto; }
.bubble { padding: 11px 14px; border-radius: 15px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; box-shadow: var(--shadow-sm); }
.bot .bubble { background: var(--paper); border: 1px solid var(--line); border-top-left-radius: 4px; }
.customer .bubble { background: var(--grad-blue); color: #fff; border-top-right-radius: 4px; box-shadow: 0 10px 20px -14px rgba(3,105,161,.8); }
.message-meta { margin: 4px 5px 0; color: #94A3B8; font-size: 10px; }
.message-feedback { color: var(--green); font-size: 10px; font-weight: 600; }
.typing .bubble { display: flex; align-items: center; gap: 9px; }
.typing-label { color: var(--muted); font-size: 12px; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: typing-pulse 1.1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .16s; }
.typing-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes typing-pulse { 0%, 70%, 100% { transform: translateY(0); opacity: .3; } 35% { transform: translateY(-4px); opacity: 1; } }
.send-button:disabled, .composer textarea:disabled, .chat-image-button:has(input:disabled) { opacity: .55; cursor: wait; }
.status-chip.ai-not-ready { color: var(--warn); background: var(--warn-bg); }

/* Quick replies / starters */
.quick-replies { padding: 10px 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; background: var(--paper); }
.quick-replies:empty { display: none; }
.quick-replies .starter-label { width: 100%; color: var(--muted); font-size: 11px; font-weight: 600; }
.quick-replies button { white-space: nowrap; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface-2); color: var(--navy); padding: 7px 11px; font-size: 11px; font-weight: 500; transition: .16s ease; }
.quick-replies button:hover { background: var(--blue-soft); border-color: var(--blue); }
.conversation-starter-note { margin: auto; max-width: 380px; text-align: center; color: var(--muted); }

/* Composer */
.composer { padding: 12px 16px 16px; display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; background: var(--paper); border-top: 1px solid var(--line); }
.selected-chat-image { width: 100%; display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.selected-chat-image img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.selected-chat-image span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.selected-chat-image button { border: 0; background: transparent; color: var(--red); font-size: 21px; line-height: 1; }
.chat-image-button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: 18px; transition: .16s ease; }
.chat-image-button input { display: none; }
.chat-image-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.composer textarea { flex: 1; min-height: 46px; max-height: 124px; resize: none; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 13px; outline: none; background: var(--surface-2); transition: .16s ease; }
.composer textarea:focus, select:focus, .feedback-panel textarea:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.confirmation-actions { padding: 0 16px 14px; background: var(--paper); }
.confirmation-actions small { display: block; margin-top: 6px; color: var(--muted); text-align: center; font-size: 10px; }
.send-button { min-width: 84px; height: 46px; border: 0; border-radius: 12px; background: var(--grad-blue); color: #fff; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 8px 18px -12px rgba(3,105,161,.8); transition: .18s ease; }
.send-button:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ============================ FEEDBACK / LEARNING ============================ */
.rating-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.rating { border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-sm); padding: 9px; font-weight: 500; transition: .16s ease; }
.rating:hover { border-color: var(--blue); }
.rating.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.feedback-panel label { display: block; margin-top: 10px; color: var(--slate); font-weight: 600; font-size: 12px; }
.feedback-panel select, .feedback-panel textarea { width: 100%; margin-top: 5px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px; color: var(--ink); background: var(--surface-2); outline: none; resize: vertical; font-weight: 400; }
.feedback-panel .button { margin-top: 12px; }
.notice { min-height: 16px; color: var(--green); font-size: 11px; font-weight: 600; }
.feedback-list { max-height: 520px; overflow-y: auto; display: grid; gap: 9px; }
.feedback-card { border-left: 3px solid var(--line-strong); padding: 8px 10px; background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 11px; }
.feedback-card.down { border-color: var(--red); }
.feedback-card strong { color: var(--navy); }
.feedback-card.is-applied { border-color: var(--green); }
.feedback-review-editor { display: grid; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.feedback-review-editor label { display: grid; gap: 4px; color: var(--slate); font-size: 10px; font-weight: 700; }
.feedback-review-editor select, .feedback-review-editor textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 8px; background: var(--paper); color: var(--ink); font: inherit; resize: vertical; }
.feedback-review-editor .button { margin: 0; justify-self: start; }
.feedback-applied-meta { display: grid; gap: 3px; margin-top: 7px; padding: 7px 8px; border-radius: 8px; background: var(--green-bg); color: var(--green); }

/* ============================ INTEGRATION / PANCAKE ============================ */
.integration-panel { display: flex; align-items: center; justify-content: space-between; }
.integration-panel > div { gap: 10px; }
.integration-panel > div > div { display: flex; flex-direction: column; }
.integration-panel small { color: var(--muted); }
.integration-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--grad-navy); border-radius: 9px; font-weight: 800; }
.pancake-config-panel { display: block; }
.pancake-config-form { display: grid; gap: 9px; }
.pancake-config-form label { color: var(--slate); font-size: 12px; font-weight: 600; }
.pancake-config-form input, .pancake-config-form select { width: 100%; margin-top: 5px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px; color: var(--ink); background: var(--surface-2); outline: none; font-weight: 400; }
.pancake-config-form input:focus, .pancake-config-form select:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.credential-note, .integration-warning { display: block; line-height: 1.45; color: var(--muted); font-size: 11px; margin-top: 6px; }
.integration-warning { color: var(--warn); }

/* ============================ TOAST ============================ */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: var(--navy); color: #fff; padding: 11px 16px; border-radius: var(--r-sm); transition: .22s ease; pointer-events: none; box-shadow: var(--shadow-lg); z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hidden { display: none !important; }

/* ============================ MODE TABS ============================ */
.mode-tabs { display: flex; padding: 3px; background: rgba(255,255,255,.14); border-radius: 11px; gap: 2px; }
.mode-tab { border: 0; border-radius: 8px; padding: 7px 12px; background: transparent; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600; transition: .16s ease; }
.mode-tab:hover { color: #fff; background: rgba(255,255,255,.1); }
.mode-tab.active { color: var(--navy); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* ============================ MESSAGE ATTACHMENTS ============================ */
.message-attachments { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 7px; margin-top: 8px; }
.message-attachments figure { margin: 0; }
.message-attachments img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-3); }
.message-attachments figcaption { margin-top: 4px; color: var(--muted); font-size: 10px; }

/* ============================ CATALOG WORKSPACE ============================ */
.catalog-workspace { min-height: calc(100vh - 62px); padding: var(--sp-5); max-width: 1580px; margin: 0 auto; }
.catalog-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--grad-navy); color: #fff; box-shadow: var(--shadow); }
.catalog-hero .eyebrow { color: var(--blue-soft); }
.catalog-hero h1 { margin: 3px 0 5px; color: #fff; font: 700 26px/1.15 var(--font-heading); }
.catalog-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.catalog-stats { display: grid; grid-template-columns: repeat(5, minmax(88px, 1fr)); gap: 8px; }
.stat-card { min-width: 100px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); background: rgba(255,255,255,.08); }
.stat-card strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.stat-card span { color: rgba(255,255,255,.7); font-size: 10px; }
.catalog-grid { display: grid; grid-template-columns: minmax(250px, 300px) minmax(320px, .85fr) minmax(390px, 1.15fr); gap: var(--sp-3); align-items: start; }
.catalog-tools { display: flex; flex-direction: column; gap: var(--sp-3); }
.catalog-tools .panel, .catalog-grid > .panel { margin: 0; }
.catalog-tools h2, .catalog-list-panel h2, .product-detail-panel h2 { margin: 0 0 var(--sp-2); color: var(--navy); font: 700 17px/1.25 var(--font-heading); }
.step-number { width: 24px; height: 24px; display: grid; place-items: center; float: right; color: #fff; background: var(--grad-blue); border-radius: 50%; font-weight: 800; }
.file-drop { min-height: 100px; margin: 12px 0 8px; display: grid; place-items: center; align-content: center; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); color: var(--navy); cursor: pointer; transition: .16s ease; }
.file-drop:hover { border-color: var(--blue); background: var(--blue-soft); }
.file-drop input, .upload-media-button input { display: none; }
.file-drop span { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.selected-file { margin-bottom: 10px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

/* Promotion form/list */
.promotion-form { display: grid; gap: 8px; margin-top: 10px; }
.promotion-form label { display: grid; gap: 4px; color: var(--slate); font-size: 11px; font-weight: 600; }
.promotion-form input, .promotion-form select, .promotion-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; outline: none; background: var(--surface-2); color: var(--ink); font: inherit; }
.promotion-form input:focus, .promotion-form select:focus, .promotion-form textarea:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.promotion-form textarea { resize: vertical; min-height: 58px; }
.promotion-form label small { color: var(--muted); font-size: 9px; font-weight: 500; }
.promotion-form .checkbox-label { display: flex; align-items: center; gap: 7px; }
.promotion-form .checkbox-label input { width: auto; accent-color: var(--blue); }
.promotion-options { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.editor-state { margin-top: 10px; padding: 7px 9px; border-left: 3px solid var(--blue); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--blue-soft); color: var(--blue-deep); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.promotion-list-heading { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin-top: 16px; color: var(--navy); }
.promotion-list-heading small { color: var(--muted); font-size: 9px; font-weight: 500; text-align: right; }
.promotion-list { display: grid; gap: 7px; margin-top: 12px; }
.promotion-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); text-align: left; transition: .16s ease; }
.promotion-item.active { border-color: var(--green); background: var(--green-bg); }
.promotion-item:hover { border-color: var(--blue); }
.promotion-item-copy { min-width: 0; }
.promotion-item strong, .promotion-item small { display: block; overflow-wrap: anywhere; }
.promotion-item strong { color: var(--navy); font-size: 11px; }
.promotion-item small { color: var(--muted); font-size: 9px; }
.promotion-duplicate { display: inline-block; margin: 3px 0; padding: 2px 6px; border-radius: 999px; background: #fff2d7; color: #9b5b00; font-size: 8px; font-style: normal; font-weight: 800; }
.promotion-item-actions { display: flex; align-items: center; gap: 7px; }
.promotion-item-actions .promotion-edit { min-height: 30px; padding: 5px 9px; }
.promotion-toggle { min-width: 84px; min-height: 30px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 9px; background: var(--paper); color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.promotion-toggle.on { border-color: var(--green); background: var(--green); color: white; }
.promotion-toggle.off:hover { border-color: var(--blue); color: var(--blue-deep); }
.promotion-badge { display: inline-block; margin-top: 3px; padding: 2px 7px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 9px; font-weight: 700; }

/* Product form */
.product-form { display: grid; gap: 9px; }
.product-form label { display: grid; gap: 4px; color: var(--slate); font-size: 11px; font-weight: 600; }
.product-form input, .product-form textarea, .product-form select, #productSearch, #mediaStatusFilter, .media-card select, .media-card input { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; outline: none; background: var(--surface-2); color: var(--ink); font: inherit; }
.product-form input:focus, .product-form textarea:focus, .product-form select:focus, #productSearch:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.product-form textarea { resize: vertical; min-height: 56px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inventory-matrix { margin: 3px 0; padding: 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.inventory-matrix legend { padding: 0 6px; color: var(--navy); font-family: var(--font-heading); font-size: 11px; font-weight: 700; }
.inventory-head, .inventory-row { display: grid; grid-template-columns: 42px minmax(110px, 1.35fr) minmax(74px, .7fr) minmax(110px, 1fr); gap: 9px; align-items: center; }
.inventory-head { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.inventory-row { margin-top: 6px; }
.inventory-row strong { color: var(--navy); font-family: var(--font-heading); font-size: 11px; }
.inventory-row input { min-width: 0; }
.inventory-matrix small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* Catalog list */
.catalog-list-panel { max-height: calc(100vh - 118px); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.catalog-list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 11px; }
.catalog-list-head .eyebrow { margin: 0; }
#productSearch { max-width: 200px; }
/* [Agent: Claude] Danh sách SP nay là <table> (rule .catalog-products-table bên dưới).
   Bỏ rule .product-row dạng thẻ/grid cũ vì nó đè lên <tr> làm bảng vỡ thành ô vuông. */
.product-list.catalog-products-table-wrap { min-height: 480px; display: block; overflow: auto; }
.product-row-meta { color: var(--muted); font-size: 10px; }
.product-row .pending-dot { color: var(--warn); }

/* Product detail */
.product-detail-panel { min-height: 600px; max-height: calc(100vh - 118px); overflow-y: auto; }
.detail-empty { min-height: 480px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.detail-empty span { font-size: 36px; color: var(--line-strong); }
.detail-empty p { max-width: 290px; }
.detail-description { padding: 11px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--slate); white-space: pre-wrap; }
.variant-list { display: grid; gap: 10px; margin: 9px 0 20px; }
.variant-group { padding: 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.variant-group header { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 8px; }
.variant-group header div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.variant-group header strong { color: var(--navy); font-family: var(--font-heading); font-size: 12px; }
.variant-group header span { color: var(--muted); font-size: 10px; }
.edit-variant-group { border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 9px; background: var(--paper); color: var(--blue); font-size: 9px; font-weight: 700; transition: .16s ease; }
.edit-variant-group:hover { background: var(--blue-soft); border-color: var(--blue); }
.stock-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stock-size-cell { min-width: 0; padding: 7px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.stock-size-cell strong, .stock-size-cell span, .stock-size-cell b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-size-cell strong { color: var(--navy); font-family: var(--font-heading); font-size: 11px; }
.stock-size-cell span { margin: 2px 0; color: var(--muted); font-size: 8px; }
.stock-size-cell b { font-size: 10px; }
.stock-size-cell.ready { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.stock-size-cell.missing { color: var(--warn); }
.stock-ready { color: var(--green); }
.stock-missing { color: var(--warn); }

/* Media */
.media-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.media-heading h3, .media-heading p { margin: 0; }
.media-toolbar { display: flex; align-items: center; gap: 7px; }
#mediaStatusFilter { min-width: 114px; padding: 7px; font-size: 10px; }
.upload-media-button { display: inline-flex; white-space: nowrap; cursor: pointer; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.media-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); transition: .16s ease; }
.media-card:hover { box-shadow: var(--shadow-sm); }
.media-card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface-3); }
.media-preview { position: relative; display: block; color: #fff; }
.media-preview span { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(15,23,42,.78); font-size: 9px; }
.media-card-body { padding: 8px; }
.media-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); font-size: 11px; font-weight: 700; }
.media-suggestion { min-height: 16px; color: var(--muted); font-size: 10px; }
.media-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0; }
.media-fields select, .media-fields input { padding: 6px; font-size: 10px; }
.media-actions { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.media-actions button { border: 0; border-radius: 7px; padding: 6px; font-size: 10px; font-weight: 700; }
.approve-media { color: #fff; background: var(--green); }
.reject-media { color: var(--red); background: var(--red-bg); }
.media-card.approved { border-color: var(--green); }
.media-card.rejected { opacity: .55; }

/* Inventory sync */
.inventory-sync-card { display: block; }
.sync-status { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.sync-status strong { color: var(--navy); font-family: var(--font-heading); font-size: 12px; }
.sync-status span { color: var(--muted); font-size: 10px; line-height: 1.45; }
#importNotice { white-space: pre-wrap; line-height: 1.5; }

/* ============================ BOT CONTROL / ACCESS ============================ */
.bot-control-panel { display: block; }
.bot-control-panel .section-heading { align-items: flex-start; }
.bot-control-panel h3, .bot-control-panel .eyebrow { margin: 0; }
.bot-control-panel .button { margin: 4px 0 8px; }
.bot-control-panel.is-off { border-color: var(--red); background: #FFFBFB; }
#botControlBadge.warning { color: var(--red); background: var(--red-bg); }
.customer-access-box { display: grid; gap: 7px; margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.customer-access-box strong { color: var(--navy); font: 700 12px/1.2 var(--font-heading); }
.customer-access-box small { color: var(--muted); line-height: 1.45; }
.customer-access-box input, .profile-selector-box select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; color: var(--ink); background: var(--paper); }
.customer-access-box.human-only { border-color: var(--warn); background: var(--warn-bg); }
#toggleCustomerAccessBtn.human-only { color: #fff; background: var(--warn); }
.manual-takeover-control { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.manual-takeover-control summary { cursor: pointer; color: var(--slate); font-size: 11px; font-weight: 700; line-height: 1.45; }
.manual-takeover-control[open] summary { color: var(--navy); }
.manual-takeover-explanation { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* ============================ BOT PROFILES ============================ */
.bot-profiles-workspace { padding: var(--sp-5); min-height: calc(100vh - 62px); max-width: 1580px; margin: 0 auto; }
.bot-profile-layout { display: grid; grid-template-columns: minmax(340px, 520px) 1fr; gap: var(--sp-4); align-items: start; }
.bot-profile-form-panel, .bot-profile-list-panel { min-width: 0; }
.bot-profile-form { display: grid; gap: 12px; }
.bot-profile-form label { display: grid; gap: 6px; color: var(--slate); font-size: 12px; font-weight: 600; }
.bot-profile-form input, .bot-profile-form select, .bot-profile-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px; color: var(--ink); background: var(--surface-2); font: inherit; font-weight: 400; }
.bot-profile-form input:focus, .bot-profile-form select:focus, .bot-profile-form textarea:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); outline: none; }
.profile-source-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid rgba(5,150,105,.28); border-radius: var(--r); background: linear-gradient(145deg, var(--green-bg), var(--paper)); }
.profile-source-card strong, .profile-source-card small { display: block; }
.profile-source-card strong { color: var(--green); font: 800 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .05em; }
.profile-source-card small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.profile-source-meta { display: grid; flex: 0 0 auto; gap: 5px; text-align: right; }
.profile-source-meta span { padding: 5px 8px; border-radius: 999px; background: var(--paper); color: var(--green); font-size: 9px; font-weight: 800; box-shadow: var(--shadow-sm); }
.training-package-card { display: grid; gap: 9px; padding: 12px 13px; border: 1px solid rgba(37,99,235,.24); border-radius: var(--r); background: linear-gradient(145deg, var(--blue-soft), var(--paper)); }
.training-package-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.training-package-head strong, .training-package-head small, .training-package-card > small { display: block; }
.training-package-head strong { color: var(--navy); font: 800 12px/1.3 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
.training-package-head small, .training-package-card > small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.training-package-card code { overflow: hidden; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--blue); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.training-package-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-learning-history-card { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.profile-learning-history-card strong, .profile-learning-history-card small { display: block; }
.profile-learning-history-card strong { color: var(--navy); font: 700 12px/1.3 var(--font-heading); }
.profile-learning-history-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.profile-learning-history { display: grid; gap: 7px; max-height: 240px; overflow-y: auto; }
.profile-learning-item { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.profile-learning-item strong { font-size: 11px; }
.profile-learning-item span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.typing-settings-card { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(37,99,235,.18); border-radius: var(--r); background: linear-gradient(145deg, var(--blue-tint), var(--surface-2)); }
.typing-settings-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.typing-settings-head strong, .typing-settings-head small { display: block; }
.typing-settings-head strong { color: var(--navy); font: 700 13px/1.25 var(--font-heading); }
.typing-settings-head small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.typing-settings-head > span { padding: 5px 8px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 8px; font-weight: 800; }
.typing-flow-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.typing-flow-preview span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--navy); font-size: 9px; font-weight: 700; }
.typing-flow-preview b { color: var(--blue); font-size: 10px; }
.typing-settings-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.timing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; padding: 0; background: transparent; }
/* [Agent: Codex] 2026-08-12: Khóa cùng hàng nhãn/input/chú thích để ba cột không cao thấp. */
.timing-grid .timing-field {
  min-width: 0; display: grid; grid-template-rows: minmax(42px, auto) 54px minmax(34px, auto);
  align-content: start; gap: 8px;
}
.timing-field .timing-field-label {
  display: flex; align-items: flex-end; color: var(--navy); font: 700 12px/1.35 var(--font-heading);
}
.timing-field input { width: 100%; height: 54px; margin: 0; }
.timing-grid .timing-field > small { margin: 0; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.45; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { accent-color: var(--blue); }
.bot-profile-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.bot-profile-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); transition: .16s ease; }
.bot-profile-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bot-profile-card.is-off { opacity: .62; background: var(--surface-3); }
.bot-profile-card h3, .bot-profile-card p { margin: 0; }
.learning-control-panel { margin-top: var(--sp-4); display: grid; gap: 18px; }
.learning-control-panel h3 { margin: 0; }
.learning-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; }
.learning-metric-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); display: grid; gap: 5px; }
.learning-metric-card span { color: var(--slate); font-size: 12px; }
.learning-metric-card strong { font-size: 24px; color: var(--ink); }
.learning-dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.learning-dashboard-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.learning-list { display: grid; gap: 8px; }
.learning-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.learning-row-main { min-width: 0; display: grid; gap: 3px; }
.learning-row-main strong, .learning-row-main span { overflow-wrap: anywhere; }
.learning-row-main span, .learning-row-meta { color: var(--slate); font-size: 12px; }
.learning-row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.policy-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.policy-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); display: grid; gap: 6px; }
.policy-card h4, .policy-card p { margin: 0; }
.policy-card p { color: var(--slate); font-size: 12px; }
.after-sales-policy-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.after-sales-policy-details summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.policy-dialog { width: min(680px, 94vw); max-height: 90vh; border: 0; border-radius: var(--r); padding: 20px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-lg); overflow: auto; }
.policy-dialog::backdrop { background: rgb(15 30 52 / .55); backdrop-filter: blur(2px); }
.profile-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-metrics span { padding: 5px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 600; }
.bot-architecture-note { display: grid; gap: 5px; max-width: 460px; padding: 15px; border-radius: var(--r); background: var(--grad-navy); color: #fff; box-shadow: var(--shadow); }
.bot-architecture-note span { opacity: .8; font-size: 12px; line-height: 1.45; }
.profile-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================ SETTINGS / CHANNEL ROUTING ============================ */
.settings-workspace { padding: var(--sp-5); min-height: calc(100vh - 62px); max-width: 1580px; margin: 0 auto; }
.settings-hero { align-items: stretch; }
.settings-health-summary { min-width: 290px; display: grid; align-content: center; gap: 8px; }
.settings-health-summary span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: rgba(255,255,255,.76); font-size: 12px; }
.settings-health-summary span.is-ready { color: #D1FAE5; border-color: rgba(52,211,153,.35); background: rgba(5,150,105,.18); }
.settings-tab-panel { margin-top: var(--sp-4); }
.connection-workflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: var(--sp-4); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); }
.connection-workflow span { display: flex; align-items: center; gap: 9px; color: var(--slate); font-size: 12px; font-weight: 600; }
.connection-workflow b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 10px; }
.connection-workflow i { color: var(--line-strong); font-style: normal; }
.settings-connections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.integration-card { min-height: 330px; display: grid; align-content: start; gap: 12px; }
.integration-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.integration-card-head h2, .integration-card-head p { margin: 0; }
.integration-card-head .integration-icon { width: 44px; height: 44px; border-radius: 12px; }
.integration-card-head .openai-icon { background: var(--grad-blue); font-size: 11px; }
.api-config-form, .page-assignment-form { display: grid; gap: 11px; }
.api-config-form label, .page-assignment-form label { display: grid; gap: 6px; color: var(--slate); font-size: 12px; font-weight: 600; }
.api-config-form input, .api-config-form select, .page-assignment-form input, .page-assignment-form select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px; color: var(--ink); background: var(--surface-2); outline: none; font-weight: 400; }
.api-config-form input:focus, .api-config-form select:focus, .page-assignment-form input:focus, .page-assignment-form select:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.page-routing-layout { display: grid; grid-template-columns: minmax(310px, 390px) 1fr; gap: var(--sp-4); align-items: start; }
.page-assignment-form-card, .page-routing-table-card { min-width: 0; }
.page-routing-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.page-routing-table { width: 100%; min-width: 780px; border-collapse: collapse; background: var(--paper); font-size: 12px; }
.page-routing-table th { padding: 10px 12px; text-align: left; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.page-routing-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.page-routing-table tr:last-child td { border-bottom: 0; }
.page-routing-table td:first-child strong, .page-routing-table td:first-child small { display: block; }
.page-routing-table td:first-child small { margin-top: 3px; color: var(--muted); }
.page-routing-table td:nth-child(3) strong, .page-routing-table td:nth-child(3) small { display: block; }
.page-routing-table td:nth-child(3) small { margin-top: 3px; color: var(--muted); }
.page-learning-box { display: grid; gap: 10px; padding: 12px; border: 1px solid #a9c9e8; border-radius: var(--r-sm); background: #f2f8fe; }
.page-learning-box > small { color: var(--muted); line-height: 1.5; }
.collector-allowed-pages { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.collector-allowed-pages > span { color: var(--muted); }
.collector-allowed-pages > div { display: flex; flex-wrap: wrap; gap: 7px; }
.learning-metrics span { border-color: #a9c9e8; background: #f2f8fe; }
.warning-text { color: var(--warn); font-weight: 700; }
.button.compact { padding: 7px 10px; font-size: 11px; }
.button.text-button { border: 0; background: transparent; color: var(--blue); box-shadow: none; }
.stacked-actions { display: grid; gap: 6px; }
.compact-sync-status { margin-top: 2px; }
.settings-integration-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.settings-integration-actions .button { min-height: 40px; }

/* [Agent: Codex] 2026-08-12 — Pancake COLLECT_ONLY setup + event monitor */
.pancake-collector-card { grid-column: 1 / -1; min-height: 0; }
.collector-icon { background: linear-gradient(145deg, #0b6b50, #20a475); color: #fff; }
.collector-safety-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid #a8ddca; border-radius: var(--r-sm); background: #eefbf6; color: #0b6b50; font-size: 10px; }
.collector-safety-strip strong { margin-right: 5px; font-family: var(--font-heading); }
.collector-safety-strip span { padding: 4px 8px; border-radius: 999px; background: #d9f5e9; font-weight: 700; }
.collector-steps { display: grid; gap: 8px; }
.collector-steps > section { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.collector-steps > section > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--navy); color: #fff; font: 700 10px/1 var(--font-heading); }
.collector-steps strong, .collector-steps small { display: block; }
.collector-steps strong { color: var(--navy); font: 700 11px/1.3 var(--font-heading); }
.collector-steps small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.collector-copy-field { min-width: 0; }
.collector-copy-field code { display: block; margin-top: 5px; padding: 8px 10px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 7px; background: #fff; color: var(--slate); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.collector-header-fields { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.2fr); gap: 8px; }
.collector-header-fields label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.collector-header-fields input { width: 100%; padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--slate); }
.collector-inline-actions { display: grid; gap: 2px; }
.collector-summary { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 8px; }
.collector-summary span { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.collector-summary b { display: block; margin-bottom: 3px; color: var(--navy); font: 700 18px/1 var(--font-heading); }
.collector-events-head { margin: 4px 0 0; }
.collector-events-head h3 { margin: 2px 0 0; color: var(--navy); font: 700 15px/1.25 var(--font-heading); }
.collector-events-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.collector-events-table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; font-size: 10px; }
.collector-events-table th { padding: 9px 11px; background: var(--surface-2); color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: .05em; font-size: 9px; }
.collector-events-table td { padding: 10px 11px; border-top: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.collector-events-table td strong, .collector-events-table td small { display: block; }
.collector-events-table td small { margin-top: 3px; color: var(--muted); }
.collector-direction, .collector-normalize { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.collector-direction.inbound { background: var(--blue-soft); color: var(--blue); }
.collector-direction.outbound { background: #eefbf6; color: #0b6b50; }
.collector-direction.unknown, .collector-normalize.raw_only { background: #fff3df; color: var(--warn); }
.collector-normalize.normalized { background: #e8f8ef; color: var(--green); }
.empty-row { padding: 22px !important; color: var(--muted) !important; text-align: center; }

/* [Agent: Codex] 2026-08-09 — Catalog tabs + large product detail dialog */
.catalog-subnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--sp-4); padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255,255,255,.84); box-shadow: var(--shadow-sm); }
.catalog-subtab { min-width: 0; display: grid; gap: 3px; padding: 12px 15px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--slate); text-align: left; transition: .16s ease; }
.catalog-subtab span { color: var(--navy); font: 700 13px/1.25 var(--font-heading); }
.catalog-subtab small { color: var(--muted); font-size: 10px; }
.catalog-subtab:hover { background: var(--blue-tint); }
.catalog-subtab.active { border-color: rgba(37,99,235,.25); background: var(--navy); box-shadow: var(--shadow-sm); }
.catalog-subtab.active span { color: #fff; }
.catalog-subtab.active small { color: rgba(255,255,255,.7); }
.catalog-tab-panel { animation: catalog-panel-in .18s ease; }
@keyframes catalog-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.catalog-products-panel { min-height: 580px; margin: 0; padding: 20px; }
.catalog-products-head { align-items: center; margin-bottom: 14px; }
.catalog-products-head h2 { margin: 2px 0 5px; color: var(--navy); font: 700 21px/1.2 var(--font-heading); }
.catalog-products-head p { margin: 0; }
.catalog-list-actions { display: flex; align-items: flex-end; gap: 9px; }
.catalog-search-field { display: grid; gap: 4px; min-width: min(360px, 38vw); color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.catalog-search-field #productSearch { max-width: none; height: 40px; background: var(--paper); }
.catalog-result-bar { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: 10px; }
.catalog-result-bar span:first-child { color: var(--navy); font-weight: 800; }
.catalog-products-table-wrap {
  min-height: 360px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-top: 12px;
}
.catalog-products-table { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.catalog-products-table th { position: sticky; top: 0; z-index: 5; padding: 10px 11px; border-bottom: 1px solid var(--line-strong); background: var(--surface-3); box-shadow: 0 2px 0 rgba(15,23,42,.06); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.catalog-products-table td { height: 56px; padding: 8px 11px; border-bottom: 1px solid var(--line); color: var(--slate); font-size: 10px; vertical-align: middle; }
.catalog-products-table tbody tr:last-child td { border-bottom: 0; }
.product-row { cursor: pointer; transition: background .14s ease, box-shadow .14s ease; }
.product-row:hover, .product-row.active { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
.product-row:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.product-row td:nth-child(2) { max-width: 310px; }
.product-row td:nth-child(2) strong, .product-row td:nth-child(2) small { display: block; }
.product-row td:nth-child(2) strong { overflow: hidden; color: var(--navy); font: 700 11px/1.35 var(--font-heading); text-overflow: ellipsis; white-space: nowrap; }
.product-row td:nth-child(2) small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-products-table .num { text-align: center; }
.catalog-products-table td.attention { color: var(--warn); font-weight: 800; background: #fff7ed; }
.product-table-category { color: var(--blue); font-size: 9px; font-weight: 700; white-space: nowrap; }
.product-code-badge { display: inline-flex; min-height: 25px; align-items: center; padding: 4px 8px; border-radius: 7px; background: var(--navy); color: #fff; font: 700 10px/1 var(--font-heading); white-space: nowrap; }
.product-status { padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.product-status.ready { color: var(--green); background: var(--green-bg); }
.product-status.partial, .product-status.provisional { color: var(--warn); background: #fff7ed; }
.product-status.not-ready, .product-status.missing { color: var(--red); background: var(--red-bg); }
.open-product-detail { border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 8px; background: var(--paper); color: var(--blue); font-size: 9px; font-weight: 800; white-space: nowrap; }
.open-product-detail:hover { border-color: var(--blue); background: var(--blue-soft); }
/* [Agent: Claude] Bảng theo mã POS: cột tồn S/M/L/XL */
.pos-table { min-width: 900px; }
.pos-table td.num, .pos-table th.num { text-align: center; width: 46px; }
.pos-table .stock-ok { color: var(--green); font-weight: 700; }
.pos-table .stock-none { color: var(--line-strong); }
.pos-table .stock-disabled { color: var(--red); font-size: 8px; font-weight: 800; white-space: nowrap; }
.catalog-products-table td.attention { color: var(--warn); font-weight: 700; }

/* [Agent: Claude] Editor sửa thông tin + giá/tồn theo màu — dùng trong dialog chi tiết (1 view duy nhất). */
.inline-detail > .muted { margin: 0 0 10px; }
.inline-shared { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.inline-shared > label, .inline-shared .inline-shared-row label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: var(--slate); }
.inline-shared-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.inline-save-info { justify-self: start; margin-top: 2px; }
.inline-shared label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: var(--slate); }
.inline-shared input, .inline-shared textarea, .inline-shared select { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; background: var(--paper); color: var(--ink); font: inherit; outline: none; resize: vertical; }
.inline-detail, .inline-shared, .inline-shared-row, .inline-shared-row > label, .inline-add-pos-panel, .inline-add-pos-form { min-width: 0; max-width: 100%; }
.inline-shared input:focus, .inline-shared textarea:focus, .inline-shared select:focus { border-color: var(--blue); box-shadow: var(--ring); }
.inline-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.inline-color { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 12px; display: grid; gap: 9px; }
.inline-color-head { display: flex; align-items: baseline; gap: 8px; }
.inline-color-head strong { font-family: var(--font-heading); color: var(--navy); }
.inline-color-head span { color: var(--muted); font-size: 12px; }
.inline-price { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: var(--slate); }
.inline-price input { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; background: var(--surface-2); color: var(--ink); font: inherit; outline: none; }
.inline-price input:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.inline-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.inline-size { display: grid; gap: 3px; text-align: center; }
.inline-size > span { font: 700 11px/1 var(--font-heading); color: var(--navy); }
.inline-size input, .inline-size select { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 4px; text-align: center; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 9px; outline: none; }
.inline-size input:focus { border-color: var(--blue); box-shadow: var(--ring); background: var(--paper); }
.inline-save { width: 100%; }
.inline-color-actions { display: grid; gap: 6px; }
.design-code-manager { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px 10px; align-items: end; padding: 11px; border: 1px solid #9fc8ee; border-radius: var(--r); background: var(--blue-soft); }
.design-code-manager label { display: grid; gap: 4px; color: var(--navy); font-size: 11px; font-weight: 750; }
.design-code-manager input { background: var(--paper); font-weight: 800; text-transform: uppercase; }
.design-code-manager small { grid-column: 1 / -1; color: var(--slate); line-height: 1.45; }
.inline-add-pos-panel { margin-bottom: 12px; padding: 11px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); }
.inline-add-pos-form { display: grid; gap: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.inline-add-pos-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.inline-add-pos-head strong { color: var(--navy); }
.inline-add-pos-head span { color: var(--muted); font-size: 10px; }
.inline-add-pos-fields { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px; }
.inline-add-pos-fields label, .inline-add-pos-sizes label { display: grid; gap: 4px; color: var(--slate); font-size: 10px; font-weight: 700; }
.inline-add-pos-fields input, .inline-add-pos-sizes input, .inline-add-pos-sizes select { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; background: var(--paper); color: var(--ink); font: inherit; }
.inline-add-pos-sizes { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; }
.inline-add-pos-sizes label { grid-template-columns: 28px minmax(54px, 1fr); }
.inline-add-pos-sizes label b { grid-row: 1 / 3; align-self: center; color: var(--navy); font-family: var(--font-heading); }

.product-merge-dialog { width: min(1080px, 94vw); max-width: none; max-height: 90vh; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--paper); box-shadow: 0 28px 90px rgba(15,35,64,.32); }
.product-merge-dialog::backdrop { background: rgba(15,35,64,.7); backdrop-filter: blur(5px); }
.product-merge-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 90vh; }
.product-merge-shell > header, .product-merge-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.product-merge-shell > header p, .product-merge-shell > header h2 { margin: 0; }
.product-merge-shell > header h2 { color: var(--navy); font: 700 20px/1.25 var(--font-heading); }
.product-merge-shell > footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.product-merge-preview { min-height: 180px; padding: 16px 18px; overflow-y: auto; }
.merge-callout, .merge-blockers { padding: 13px 14px; border-radius: var(--r); }
.merge-callout p, .merge-callout span, .merge-blockers p { margin: 5px 0 0; }
.merge-callout span, .merge-blockers p { color: var(--slate); font-size: 11px; line-height: 1.5; }
.merge-callout.safe { border: 1px solid #9dd5bb; background: #ecfbf4; }
.merge-callout.warning { border: 1px solid #f0c97f; background: #fff8e8; }
.merge-blockers { margin-top: 10px; border: 1px solid #efaaa7; background: #fff0ef; color: #8b2523; }
.merge-field-list { display: grid; gap: 8px; margin-top: 12px; }
.merge-field-row { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr) minmax(150px, .6fr); gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.merge-field-row.conflict { border-color: #e4b04f; background: #fffaf0; }
.merge-field-row header { display: grid; gap: 3px; }
.merge-field-row header strong { color: var(--navy); }
.merge-field-row header span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.merge-field-row > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-width: 0; }
.merge-field-row p { min-width: 0; margin: 0; padding: 7px; border-radius: 7px; background: var(--paper); color: var(--slate); font-size: 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.merge-field-row p b { display: block; margin-bottom: 3px; color: var(--blue); font-size: 9px; }
.merge-field-row select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; background: var(--paper); color: var(--ink); }
.merge-auto-choice { color: var(--muted); font-size: 10px; font-weight: 700; }
.inline-add-media { text-align: center; cursor: pointer; font-size: 11px; }
.inline-add-media input { display: none; }
.media-fields-role label { display: grid; gap: 3px; font-size: 10px; color: var(--muted); font-weight: 600; }
/* [Agent: Claude] Editor tràn full-width (trước bị .variant-list ép 2 cột → dồn trái) */
.product-detail-section .variant-list:has(.inline-detail) { display: block; }
.inline-detail { grid-column: 1 / -1; width: 100%; }
.inline-shared-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.inline-colors { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Bỏ mũi tên tăng/giảm ở ô số (giá, tồn) — không ai chỉnh giá bằng mũi tên */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Thumbnail kho ảnh nhỏ hơn để thấy nhiều ảnh cùng lúc */
.product-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.product-media-grid .media-card img { aspect-ratio: 1 / 1; }
.product-media-grid .media-suggestion { font-size: 9px; }
.product-media-grid .media-actions button { padding: 6px 4px; font-size: 9px; }
/* [Agent: Claude] Thẻ ảnh: chọn loại + tick màu (biến thể của chính sản phẩm) */
.media-role-field { display: grid; gap: 3px; font-size: 10px; color: var(--muted); font-weight: 600; margin: 6px 0; }
.media-colors { margin: 6px 0; }
.media-colors-label { display: block; font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.media-color-ticks { display: flex; flex-wrap: wrap; gap: 5px; }
.media-color-tick { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px; background: var(--surface-2); cursor: pointer; }
.media-color-tick input { accent-color: var(--blue); margin: 0; }
.media-origin { margin: 6px 0; }
.media-origin-ticks { display: flex; flex-wrap: wrap; gap: 5px; }
.media-origin-tick { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 8px; background: #fff; cursor: pointer; }
.media-origin-tick input { accent-color: var(--blue); margin: 0; }
.media-shared-note { margin: 6px 0; font-size: 10px; color: var(--green); background: var(--green-bg); border-radius: var(--r-sm); padding: 6px 8px; }
.catalog-empty-state { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 5px; }
.catalog-empty-state strong { color: var(--navy); }

.catalog-input-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.catalog-input-side { display: grid; gap: var(--sp-3); }
.catalog-input-layout > .panel, .catalog-input-side > .panel { margin: 0; }
.input-guide-card h2, .product-editor-panel h2, .catalog-operations-grid h2 { margin: 2px 0 8px; color: var(--navy); font: 700 18px/1.25 var(--font-heading); }
.input-guide-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--slate); font-size: 11px; line-height: 1.8; }
.product-editor-panel { max-width: 1040px; padding: 20px; }
.product-editor-heading { margin-bottom: 4px; }
.product-form { gap: 12px; margin-top: 14px; }
.form-section { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.form-section-title { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.form-section-title > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--navy); color: #fff; font: 700 10px/1 var(--font-heading); }
.form-section-title strong, .form-section-title small { display: block; }
.form-section-title strong { color: var(--navy); font: 700 12px/1.25 var(--font-heading); }
.form-section-title small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.form-section .inventory-matrix { background: var(--paper); }
.product-form-actions { position: sticky; bottom: 10px; z-index: 3; justify-content: flex-end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.catalog-operations-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr); gap: var(--sp-3); align-items: start; }
.catalog-operations-grid > .panel { margin: 0; }
.size-advisor-card { grid-column: 1 / -1; }
.size-scope-label { display: grid; gap: 5px; color: var(--slate); font-size: 11px; font-weight: 650; }
.size-scope-label select, .size-rule-row input { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px; background: var(--surface-2); color: var(--ink); font: inherit; }
.size-analog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 10px; }
.size-analog-grid label { display: grid; gap: 7px; color: var(--slate); font-size: 11px; font-weight: 650; }
.size-analog-grid label span { display: flex; justify-content: space-between; }
.size-analog-grid input[type="range"] { width: 100%; accent-color: var(--blue); }
.size-advice-result { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--blue); border-radius: var(--r); background: var(--blue-soft); }
.size-advice-result strong { color: var(--navy); font: 700 16px/1.2 var(--font-heading); }
.size-advice-result span { color: var(--slate); font-size: 11px; }
.size-rule-table { margin: 12px 0; overflow-x: auto; }
.size-rule-head, .size-rule-row { min-width: 610px; display: grid; grid-template-columns: 52px repeat(4, minmax(90px, 1fr)) 52px; gap: 8px; align-items: center; }
.size-rule-head { padding: 0 8px 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.size-rule-row { margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.size-rule-row strong { color: var(--navy); font-family: var(--font-heading); }
.size-rule-row input[type="checkbox"] { width: 18px; height: 18px; justify-self: center; accent-color: var(--blue); }

body.product-dialog-open { overflow: hidden; }
.product-detail-dialog { width: min(1480px, 95vw); max-width: none; height: min(900px, 92vh); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--paper); box-shadow: 0 28px 90px rgba(15,35,64,.28); }
.product-detail-dialog::backdrop { background: rgba(15,35,64,.62); backdrop-filter: blur(4px); }
.product-detail-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.product-detail-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
.product-detail-header .eyebrow, .product-detail-header h2, .product-detail-header p { margin: 0; }
.product-detail-header h2 { margin: 3px 0; color: var(--navy); font: 700 23px/1.18 var(--font-heading); }
.product-detail-header-actions { display: flex; align-items: center; gap: 10px; }
.dialog-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--navy); font-size: 25px; line-height: 1; transition: .16s ease; }
.dialog-close:hover { border-color: var(--blue); background: var(--blue-soft); }
.product-detail-nav { display: flex; gap: 5px; padding: 8px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.product-detail-nav a { padding: 7px 11px; border-radius: 8px; color: var(--slate); font-size: 10px; font-weight: 700; text-decoration: none; }
.product-detail-nav a:hover { color: var(--blue); background: var(--blue-soft); }
.product-detail-body { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px 28px; scroll-behavior: smooth; }
.product-detail-section { min-width: 0; scroll-margin-top: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.product-detail-section + .product-detail-section { margin-top: 14px; }
.measurement-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.measurement-controls label, .measurement-note-field { display: grid; gap: 6px; color: var(--slate); font-size: 10px; font-weight: 700; }
.measurement-controls select, .measurement-controls input, .measurement-note-field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); padding: 10px 12px; color: var(--navy); font: inherit; }
.measurement-matrix { overflow-x: auto; margin-bottom: 12px; }
.measurement-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.measurement-table th, .measurement-table td { padding: 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.measurement-table th:last-child, .measurement-table td:last-child { border-right: 0; }
.measurement-table tr:last-child td { border-bottom: 0; }
.measurement-table th { background: var(--surface-2); color: var(--slate); font-size: 10px; }
.measurement-table td:first-child { color: var(--navy); font-weight: 800; }
.measurement-table input { width: 100%; min-width: 90px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px; background: var(--paper); }
.measurement-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.image-unavailable { min-height: 110px; display: grid; place-items: center; padding: 14px; border-radius: 10px; background: var(--surface-2); color: var(--muted); text-align: center; }
.image-unavailable img { display: none !important; }
.detail-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.detail-section-heading .eyebrow, .detail-section-heading h3 { margin: 0; }
.detail-section-heading h3, .product-media-section h3 { margin-top: 2px; color: var(--navy); font: 700 17px/1.25 var(--font-heading); }
.product-info-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 12px; }
.product-description-card, .product-facts-grid article, .product-knowledge-grid article { padding: 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.product-description-card > span, .product-facts-grid span, .product-knowledge-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.product-description-card p, .product-knowledge-grid p { margin: 0; color: var(--slate); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.product-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.product-facts-grid strong { display: block; color: var(--navy); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.product-knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.product-knowledge-grid p { font-size: 10px; }
.product-detail-section .variant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.product-detail-section .variant-group { padding: 13px; }
.product-detail-section .variant-group header div { flex-wrap: wrap; }
.product-detail-section .variant-group header small { flex-basis: 100%; color: var(--muted); font-size: 9px; }
.product-detail-section .stock-size-cell { min-height: 68px; padding: 8px; }
.product-detail-section .stock-size-cell b { margin-top: 4px; }
/* [Agent: Claude] Đồng bộ cỡ chữ giá trị trong dialog (trước đây mô tả 14 / facts 11 / knowledge 10 → lệch). */
.product-description-card p, .product-facts-grid strong, .product-knowledge-grid p { font-size: 12px; line-height: 1.55; }
.product-facts-grid article, .product-knowledge-grid article { display: flex; flex-direction: column; gap: 3px; }
.product-media-section .media-heading { margin-top: 0; }
.product-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-media-grid .media-card img { aspect-ratio: 4/3; }

@media (max-width: 1120px) {
  .product-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-section .variant-list, .product-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .catalog-input-layout, .catalog-operations-grid, .product-info-layout { grid-template-columns: 1fr; }
  .catalog-input-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-dialog { width: 97vw; height: 94vh; }
}
@media (max-width: 680px) {
  .catalog-subnav { grid-template-columns: 1fr; }
  .catalog-subtab small { display: none; }
  .catalog-products-head, .catalog-list-actions, .catalog-result-bar, .product-detail-header, .media-heading { align-items: stretch; flex-direction: column; }
  .catalog-list-actions { display: grid; grid-template-columns: 1fr; }
  .catalog-search-field { min-width: 0; }
  .catalog-input-side, .product-facts-grid, .product-knowledge-grid, .product-detail-section .variant-list, .product-media-grid { grid-template-columns: 1fr; }
  .product-detail-dialog { width: 100vw; height: 100vh; border-radius: 0; }
  .measurement-controls { grid-template-columns: 1fr; }
  .measurement-actions { align-items: stretch; flex-direction: column; }
  .product-detail-header, .product-detail-body { padding-left: 14px; padding-right: 14px; }
  .product-detail-nav { padding-left: 14px; overflow-x: auto; }
  .product-detail-nav a { white-space: nowrap; }
  .size-analog-grid { grid-template-columns: 1fr; }
  .product-detail-header-actions { justify-content: space-between; }
  .form-section { padding: 12px; }
  .design-code-manager, .inline-add-pos-fields, .inline-add-pos-sizes, .merge-field-row { grid-template-columns: 1fr; }
  .design-code-manager small { grid-column: 1; }
  .inline-add-pos-head { align-items: flex-start; flex-direction: column; }
  .inline-add-pos-sizes label { grid-template-columns: 28px 1fr; }
  .product-merge-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }
  .product-merge-shell { max-height: 100vh; }
  .merge-field-row > div { grid-template-columns: 1fr; }
}
/* ============================ RESPONSIVE ============================ */
@media (max-width: 1150px) {
  .catalog-grid { grid-template-columns: 280px 1fr; }
  .product-detail-panel { grid-column: 1 / -1; max-height: none; }
  .catalog-list-panel { max-height: 760px; }
}
@media (max-width: 1050px) {
  .workspace { grid-template-columns: 240px 1fr; height: auto; }
  .right-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-3); overflow: visible; }
  .integration-panel { grid-column: 1 / -1; }
  .chat-shell { height: 740px; }
}
@media (max-width: 860px) {
  .bot-profile-layout { grid-template-columns: 1fr; }
  .learning-metric-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .learning-dashboard-grid { grid-template-columns: 1fr; }
  .timing-grid { grid-template-columns: 1fr; }
  .timing-grid .timing-field { grid-template-rows: auto 50px auto; }
  .timing-field .timing-field-label { align-items: center; }
  .timing-field input { height: 50px; }
  .settings-connections-grid, .page-routing-layout { grid-template-columns: 1fr; }
  .connection-workflow { grid-template-columns: 1fr 1fr; }
  .connection-workflow i { display: none; }
  .collector-steps > section { grid-template-columns: 34px minmax(0, 1fr); }
  .collector-steps > section > .button, .collector-inline-actions { grid-column: 2; justify-self: start; }
  .collector-header-fields { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mode-tabs { position: fixed; left: 50%; bottom: 12px; z-index: 40; transform: translateX(-50%); box-shadow: var(--shadow-lg); background: var(--navy); }
  .catalog-workspace, .settings-workspace { padding: 12px 8px 74px; }
  .catalog-hero { display: block; }
  .settings-health-summary { min-width: 0; margin-top: 14px; }
  .catalog-stats { grid-template-columns: repeat(2, 1fr); margin-top: 14px; }
  .catalog-grid { display: block; }
  .catalog-tools { gap: var(--sp-3); margin-bottom: var(--sp-3); }
  .catalog-list-panel, .product-detail-panel { max-height: none; }
  .product-list { min-height: 300px; max-height: 500px; }
  .media-grid { grid-template-columns: 1fr; }
  .catalog-hero h1 { font-size: 22px; }
  .inventory-head, .inventory-row { grid-template-columns: 32px minmax(96px, 1fr) 78px; }
  .stock-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collector-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Agent: Codex | 2026-08-15 | Control plane v2: knowledge + skill graph. */
.agent-section-tabs { display:flex; gap:8px; padding:10px; margin:0 18px 18px; background:#e9eef6; border-radius:16px; overflow:auto; }
.agent-section-tab { border:0; background:transparent; color:#526079; padding:12px 18px; border-radius:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
.agent-section-tab.active { color:#17335f; background:#fff; box-shadow:0 6px 18px rgba(23,51,95,.10); }
.agent-section-panel { margin:0 18px 20px; }
.control-plane-toolbar { display:flex; gap:12px; align-items:center; margin:18px 0; }
.control-plane-toolbar input { flex:1; min-width:220px; padding:12px 14px; border:1px solid #cad5e5; border-radius:12px; background:#fff; }
.knowledge-folder-grid { display:grid; gap:14px; }
.knowledge-folder { border:1px solid #d8e1ef; border-radius:16px; background:#f9fbfe; overflow:hidden; }
.knowledge-folder > header { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 18px; border-bottom:1px solid #e2e8f2; }
.knowledge-folder > header div { display:grid; gap:4px; }
.knowledge-document-list { display:grid; }
.knowledge-document { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid #e7edf5; }
.knowledge-document:first-child { border-top:0; }
.knowledge-document-main { display:grid; gap:4px; min-width:0; }
.knowledge-document-main strong,.knowledge-document-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.knowledge-document code { font-size:11px; color:#65738b; }
.agent-release-strip { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; border:1px solid #cbd8eb; border-radius:16px; background:linear-gradient(135deg,#f5f8ff,#eefbf6); margin:16px 0; }
.agent-release-strip > div:first-child { display:grid; gap:4px; }
.agent-release-actions { display:flex; gap:10px; flex-wrap:wrap; }
.agent-gate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.agent-gate { display:flex; justify-content:space-between; gap:8px; padding:11px 13px; border-radius:12px; background:#f2f5fa; color:#536079; font-size:13px; }
.agent-gate b.ok { color:#087b53; }.agent-gate b.missing { color:#b14b37; }
.agent-skill-list { display:grid; gap:14px; }
.agent-skill-card { border:1px solid #d8e1ef; border-radius:18px; background:#fff; padding:18px; box-shadow:0 8px 26px rgba(37,55,86,.06); }
.agent-skill-card.is-off { background:#f4f5f7; color:#7a8496; }
.agent-skill-card > header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.agent-skill-title { display:flex; gap:13px; align-items:flex-start; }
.agent-skill-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#e9f4ff; font-size:22px; flex:none; }
.agent-skill-title > div { display:grid; gap:4px; }
.agent-skill-title p { margin:0; color:#66758d; }
.agent-skill-meta,.agent-skill-tools { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.agent-skill-meta span,.agent-skill-tools span { border-radius:999px; padding:5px 9px; background:#eef2f8; font-size:12px; }
.agent-skill-tools span.not-ready { color:#a74637; background:#fff0ec; }
.skill-switch { display:flex; gap:10px; align-items:center; }
.skill-switch input { width:42px; height:22px; accent-color:#3568ed; }
.skill-route-details { margin-top:18px; border-top:1px solid #dbe3ef; padding-top:14px; }
.skill-route-details summary { font-weight:800; cursor:pointer; }
.skill-route-list { display:grid; gap:8px; margin-top:12px; }
.skill-route { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; padding:10px 12px; background:#f5f7fb; border-radius:10px; }
.control-plane-dialog { border:0; padding:0; border-radius:20px; width:min(920px,calc(100vw - 32px)); max-height:92vh; box-shadow:0 30px 90px rgba(12,25,50,.35); }
.control-plane-dialog::backdrop { background:rgba(10,20,40,.58); }
.control-plane-form { display:grid; gap:15px; padding:22px; max-height:88vh; overflow:auto; }
.control-plane-form > header,.control-plane-form > footer { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.control-plane-form > footer { position:sticky; bottom:-22px; padding:14px 0 2px; background:#fff; justify-content:flex-end; }
.control-plane-form label { display:grid; gap:7px; font-weight:750; }
.control-plane-form input,.control-plane-form select,.control-plane-form textarea { width:100%; border:1px solid #cad5e5; border-radius:11px; padding:11px 12px; background:#fff; font:inherit; }
.skill-tool-editor { display:grid; gap:10px; }
.skill-tool-edit-row { display:grid; grid-template-columns:minmax(140px,1.2fr) 100px 110px 90px; gap:10px; align-items:center; padding:12px; background:#f4f7fb; border-radius:12px; }
.skill-tool-edit-row label { font-size:12px; }
.skill-tool-edit-row .tool-fields { grid-column:1/-1; }
.skill-tool-edit-row input[type="checkbox"] { width:auto; }

@media (max-width: 900px) {
  .agent-gate-grid { grid-template-columns:1fr 1fr; }
  .agent-release-strip { align-items:flex-start; flex-direction:column; }
  .skill-tool-edit-row { grid-template-columns:1fr 1fr; }
  .knowledge-document { grid-template-columns:minmax(0,1fr) auto; }
  .knowledge-document code { grid-column:1/-1; }
}

@media (max-width: 620px) {
  .agent-section-tabs,.agent-section-panel { margin-left:10px; margin-right:10px; }
  .agent-gate-grid { grid-template-columns:1fr; }
  .skill-tool-edit-row { grid-template-columns:1fr; }
  .skill-route { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .topbar { height: auto; padding: 12px; align-items: flex-start; flex-wrap: wrap; }
  .brand small { display: none; }
  .workspace { display: flex; flex-direction: column; padding: 8px; }
  .chat-shell { order: 1; height: 76vh; min-height: 560px; }
  .left-panel { order: 2; }
  .right-panel { order: 3; display: block; }
  .left-panel .intro-panel { display: none; }
  .message { max-width: 90%; }
  .messages { padding: 15px; }
  .stage-chip { max-width: 125px; overflow: hidden; text-overflow: ellipsis; }
  .learning-row { grid-template-columns: 1fr; }
  .learning-row-actions { justify-content: flex-start; }
}

/* ============================ A11Y ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Agent: Codex | 2026-08-13 | Page-scoped live AI controls. */
.button.danger { background: #b42318; color: #fff; border-color: #b42318; }
.button.danger:hover { background: #8f1c13; }
.button.danger:disabled { background: #e7eaf0; border-color: #d6dae2; color: #87909f; }
.test-reply-panel { margin-top: 14px; padding: 14px; border: 1px solid #f1b6b1; border-radius: 14px; background: #fff8f7; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.test-reply-panel > div { display: grid; gap: 4px; }
.test-reply-panel span, .test-reply-panel small { color: var(--muted); }
.test-reply-live { color: #b42318; font-weight: 800; }
.page-routing-table [data-toggle-test-reply] { min-width: 112px; white-space: nowrap; }

/* Agent: Codex | 2026-08-15 | v2.1 Studio: bright enterprise shell + rich training. */
:root {
  --navy: #172033;
  --navy-2: #27324a;
  --blue: #4057f2;
  --blue-2: #6073ff;
  --blue-soft: #eef1ff;
  --blue-tint: #f7f8ff;
  --bg: #f5f6f8;
  --canvas: #f5f6f8;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f4;
  --line: #e3e6ec;
  --line-strong: #cfd5df;
  --muted: #697386;
  --grad-navy: #ffffff;
  --grad-blue: linear-gradient(135deg,#4057f2,#6677ff);
  --grad-hero: linear-gradient(135deg,#ffffff,#f5f7ff);
  --r: 15px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04),0 8px 24px -18px rgba(16,24,40,.18);
  --shadow: 0 12px 34px -24px rgba(16,24,40,.28);
  --ring: 0 0 0 3px rgba(64,87,242,.16);
}
body { font-size: 15px; line-height: 1.62; background:#f5f6f8; }
.topbar {
  height:72px; padding:0 22px; color:var(--ink); background:#fff;
  border-bottom:1px solid var(--line); box-shadow:0 4px 18px -18px rgba(16,24,40,.5);
}
.brand { color:var(--ink); letter-spacing:.06em; }
.brand strong { font-size:16px; }
.brand small { color:var(--muted); font-size:12px; }
.brand-mark { width:44px; height:40px; border:1px solid var(--line); box-shadow:none; }
.topbar-left { gap:0; }
.mode-tabs {
  position:fixed; z-index:28; top:72px; bottom:0; left:0; width:224px;
  display:flex; flex-direction:column; gap:6px; padding:22px 14px;
  border-radius:0; background:#fff; border-right:1px solid var(--line); overflow:auto;
}
.mode-tab {
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px;
  border-radius:12px; color:#566075; background:transparent; text-align:left;
  font-size:14px; font-weight:650;
}
.mode-tab:hover { color:#2f43d9; background:#f5f6ff; }
.mode-tab.active { color:#3046dc; background:#eef1ff; box-shadow:none; }
.mode-icon {
  width:30px; height:30px; display:grid; place-items:center; flex:none;
  border-radius:9px; color:#4057f2; background:#f0f2ff; font-size:18px;
}
.top-context-tabs { display:flex; align-items:center; gap:6px; padding:4px; border-radius:11px; background:#f2f3f6; }
.top-context-tabs button { border:0; border-radius:8px; padding:8px 14px; background:transparent; color:#5b6578; font-weight:700; }
.top-context-tabs button:hover { background:#fff; color:#3046dc; box-shadow:var(--shadow-sm); }
.top-actions .status-chip { color:#315348; background:#ecf8f3; border-color:#ccebdd; }
body > main { width:auto; max-width:none; margin-left:224px; }
.workspace { max-width:none; margin-left:224px; height:calc(100vh - 72px); padding:18px; gap:16px; }
.catalog-workspace,.bot-profiles-workspace,.settings-workspace,.operations-workspace { max-width:none; margin-left:224px; padding:24px 28px 40px; }
.panel,.chat-shell { border-color:var(--line); box-shadow:var(--shadow-sm); }
.panel { padding:20px; }
.panel h2 { font-size:20px; }
.panel h3 { font-size:15px; }
.eyebrow { font-size:11px; }
.muted,label span { font-size:13px; }
.button { min-height:42px; padding:9px 16px; font-size:14px; }
input,select,textarea { font-size:15px; }

.bot-profiles-workspace .catalog-hero { margin-bottom:20px; border-radius:20px; background:#fff; border:1px solid var(--line); padding:24px 28px; color:var(--text); }
.bot-profiles-workspace .catalog-hero .eyebrow { color:var(--primary); }
.bot-profiles-workspace .catalog-hero h1 { color:var(--text); }
.bot-profiles-workspace .catalog-hero > div:first-child > p:not(.eyebrow) { color:var(--muted); }
.agent-config-shell { display:grid; grid-template-columns:236px minmax(0,1fr); gap:18px; align-items:start; }
.agent-config-content { min-width:0; }
.agent-section-tabs {
  position:sticky; top:92px; display:flex; flex-direction:column; gap:5px;
  margin:0; padding:12px; border-radius:18px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); overflow:visible;
}
.agent-section-tab { width:100%; padding:12px 14px; border-radius:11px; text-align:left; color:#586276; font-size:14px; }
.agent-section-tab.active { color:#3046dc; background:#eef1ff; box-shadow:none; }
.agent-section-panel { margin:0 0 20px; }
.bot-profile-layout { gap:18px; }
.bot-profile-form-panel { padding:24px; }

.rich-field { display:grid; gap:8px; }
.rich-field > label { font-weight:800; color:#252d3e; }
.rich-field > small { color:var(--muted); font-size:12px; }
.rich-editor { border:1px solid var(--line-strong); border-radius:15px; background:#fff; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.rich-editor:focus-within { border-color:#7182ff; box-shadow:var(--ring); }
.rich-toolbar {
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:5px;
  min-height:58px; padding:9px 12px; border-bottom:1px solid var(--line); background:#fbfbfc; flex-wrap:wrap;
}
.rich-toolbar select { width:auto; min-width:150px; height:38px; border:1px solid var(--line); border-radius:9px; padding:0 10px; background:#fff; }
.rich-toolbar button { min-width:38px; height:38px; border:1px solid transparent; border-radius:9px; background:transparent; color:#4d5668; }
.rich-toolbar button:hover,.rich-toolbar button.active { color:#3046dc; background:#eef1ff; border-color:#dfe3ff; }
.rich-canvas {
  min-height:340px; max-height:580px; overflow:auto; padding:28px 30px;
  color:#1e2534; font-size:16px; line-height:1.68; outline:none;
}
.rich-canvas:empty::before { content:attr(data-placeholder); color:#a0a7b3; }
.rich-canvas h2 { margin:22px 0 12px; font-size:26px; line-height:1.3; }
.rich-canvas h3 { margin:18px 0 10px; font-size:20px; line-height:1.35; }
.rich-canvas p { margin:0 0 12px; }
.rich-canvas ul,.rich-canvas ol { padding-left:28px; }
.rich-canvas blockquote { margin:16px 0; padding:12px 18px; border-left:4px solid #7d8cff; background:#f6f7ff; color:#47506a; }
.rich-canvas hr { border:0; border-top:1px solid #ccd2de; margin:22px 0; }

.knowledge-library-layout { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(420px,1.5fr); gap:16px; min-height:620px; }
.knowledge-tree { display:grid; align-content:start; gap:10px; border:1px solid var(--line); border-radius:16px; background:#fafbfc; padding:12px; overflow:auto; }
.knowledge-folder { display:grid; gap:7px; }
.knowledge-folder > header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:9px 8px; }
.knowledge-folder > header > div { display:grid; gap:2px; }.knowledge-folder > header small { color:var(--muted); }
.knowledge-document-list { display:grid; gap:5px; }
.knowledge-document { width:100%; border:0; border-radius:10px; background:transparent; padding:10px 11px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; text-align:left; color:#465064; cursor:pointer; }
.knowledge-document:hover,.knowledge-document.active { color:#3046dc; background:#eef1ff; }
.knowledge-document.is-off { opacity:.58; }
.knowledge-document-main { display:grid; gap:2px; min-width:0; }.knowledge-document-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.knowledge-tree-folder { display:grid; gap:6px; }
.knowledge-tree-folder > header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; }
.knowledge-tree-folder > header strong { font-size:14px; }
.knowledge-tree-doc { width:100%; border:0; border-radius:10px; background:transparent; padding:10px 11px 10px 34px; display:grid; gap:2px; text-align:left; color:#465064; }
.knowledge-tree-doc:hover,.knowledge-tree-doc.active { color:#3046dc; background:#eef1ff; }
.knowledge-tree-doc small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.knowledge-preview { border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; min-width:0; }
.knowledge-preview > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 12px; border-bottom:1px solid var(--line); }
.knowledge-preview > header h2 { margin:2px 0 0; font-size:22px; }
.knowledge-preview > .knowledge-preview-meta { padding:10px 22px; margin:0; border-bottom:1px solid var(--line); }
.knowledge-preview-content { min-height:470px; max-height:640px; overflow:auto; padding:28px 34px; font-size:16px; line-height:1.68; }
.knowledge-preview-content h2 { font-size:26px; }.knowledge-preview-content h3 { font-size:20px; }
.knowledge-preview > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-top:1px solid var(--line); background:#fafbfc; }
.knowledge-preview > footer > div { display:flex; gap:8px; }
.knowledge-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line); }
.knowledge-preview-head h3 { margin:3px 0; font-size:20px; }
.knowledge-preview-meta { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.knowledge-preview-body { min-height:500px; max-height:680px; overflow:auto; padding:28px 34px; font-size:16px; line-height:1.68; }
.knowledge-preview-body h2 { font-size:26px; }.knowledge-preview-body h3 { font-size:20px; }
.knowledge-preview .empty-state { min-height:600px; display:grid; place-content:center; gap:8px; text-align:center; }

.control-plane-dialog { width:min(1180px,calc(100vw - 44px)); border-radius:22px; }
.control-plane-form { padding:24px 28px; gap:18px; }
.control-plane-form > header { position:sticky; top:-24px; z-index:8; margin:-24px -28px 0; padding:20px 28px 16px; border-bottom:1px solid var(--line); background:#fff; }
.workflow-stepper { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:8px; border-radius:14px; background:#f3f4f7; }
.workflow-stepper button { border:0; border-radius:10px; background:transparent; padding:10px 12px; color:#687286; font-weight:750; }
.workflow-stepper button span { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px; border-radius:50%; background:#e3e6ed; }
.workflow-stepper button.active { color:#3046dc; background:#fff; box-shadow:var(--shadow-sm); }
.workflow-stepper button.active span { color:#fff; background:#4057f2; }
.skill-workflow-panel { display:grid; gap:16px; min-height:470px; }
.switch-field,.publish-capability { display:flex !important; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:#fafbfc; }
.switch-field > span { display:grid; gap:2px; color:inherit; }
.switch-field input,.publish-capability input,.skill-switch input { appearance:none; width:46px !important; height:26px !important; border-radius:999px !important; border:0 !important; background:#cdd3de !important; padding:3px !important; transition:.18s ease; }
.switch-field input::before,.publish-capability input::before,.skill-switch input::before { content:""; display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(16,24,40,.25); transition:.18s ease; }
.switch-field input:checked,.publish-capability input:checked,.skill-switch input:checked { background:#4057f2 !important; }
.switch-field input:checked::before,.publish-capability input:checked::before,.skill-switch input:checked::before { transform:translateX(20px); }
.skill-tool-editor,.skill-test-editor { display:grid; gap:12px; }
.skill-tool-edit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.skill-tool-edit-row > header { grid-column:1/-1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.skill-tool-edit-row > header > div { display:grid; gap:2px; }.skill-tool-edit-row > header small { color:var(--muted); }
.skill-tool-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.skill-tool-card-head > div { display:grid; gap:3px; }.skill-tool-card-head small { color:var(--muted); }
.skill-tool-controls { display:grid; grid-template-columns:180px 1fr; gap:12px; grid-column:1/-1; }
.compact-switch { display:flex !important; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:11px; background:#fafbfc; }
.compact-switch input { width:18px !important; height:18px; flex:none; }
.required-field-editor { grid-column:1/-1; display:grid; gap:8px; }
.required-field-chips { display:flex; gap:7px; flex-wrap:wrap; min-height:34px; align-items:center; }
.required-field-chips button { border:0; border-radius:999px; padding:6px 9px; color:#3046dc; background:#eef1ff; font-size:12px; font-weight:750; }
.required-field-add { display:flex; gap:8px; }.required-field-add input { flex:1; }
.tool-safety-note { grid-column:1/-1; padding:10px 12px; border-radius:10px; color:#9a3412; background:#fff7ed; font-size:12px; }
.field-chip-editor { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px; min-height:46px; border:1px solid var(--line); border-radius:11px; }
.field-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; color:#3046dc; background:#eef1ff; font-size:12px; font-weight:700; }
.field-chip button { border:0; background:transparent; color:inherit; padding:0; }
.field-chip-input { min-width:170px; flex:1; border:0 !important; padding:3px !important; outline:0; }
.skill-test-row { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(260px,1.4fr) 155px 92px auto; gap:10px; align-items:end; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fafbfc; }
.skill-test-row label { min-width:0; }.skill-test-row input,.skill-test-row textarea,.skill-test-row select { width:100%; }
.skill-test-row .switch-field { padding:9px 10px; }
.skill-review-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.skill-review-summary article { padding:16px; border:1px solid var(--line); border-radius:13px; background:#fafbfc; display:grid; gap:4px; }
.skill-review-summary article b { font-size:20px; }
.skill-review-summary strong.ok,.skill-review-summary strong.missing { font-size:16px; }.skill-review-summary strong.ok { color:#027a48; }.skill-review-summary strong.missing { color:#b42318; }
.workflow-explanation { display:grid; gap:6px; padding:18px; border-radius:14px; color:#3046dc; background:#f0f2ff; }
.page-connection-flags { display:flex; gap:7px; flex-wrap:wrap; }.page-connection-flags span { padding:5px 8px; border-radius:999px; background:#f1f3f7; color:#5b6578; font-size:12px; }

@media (max-width: 1080px) {
  .top-context-tabs { display:none; }
  .agent-config-shell { grid-template-columns:190px minmax(0,1fr); }
  .knowledge-library-layout { grid-template-columns:1fr; }
  .knowledge-preview .empty-state { min-height:280px; }
}
@media (max-width: 760px) {
  .topbar { height:64px; }
  .mode-tabs { top:auto; bottom:0; width:100%; height:68px; flex-direction:row; padding:8px; border-right:0; border-top:1px solid var(--line); overflow-x:auto; }
  .mode-tab { min-width:68px; width:auto; padding:7px; justify-content:center; }
  .mode-tab > span:last-child { display:none; }
  body > main,.workspace,.catalog-workspace,.bot-profiles-workspace,.settings-workspace,.operations-workspace { margin-left:0; padding-bottom:82px; }
  .agent-config-shell { grid-template-columns:1fr; }
  .agent-section-tabs { position:static; flex-direction:row; overflow:auto; }
  .agent-section-tab { width:auto; white-space:nowrap; }
  .workflow-stepper { grid-template-columns:1fr 1fr; }
  .skill-tool-controls,.skill-test-row,.skill-review-summary { grid-template-columns:1fr; }
  .rich-canvas { padding:20px; min-height:300px; }
}

/* Agent: Codex | 2026-08-15 | Hội thoại, báo cáo và gate phát hành Meta. */
.operations-workspace { min-height: calc(100vh - 74px); padding: 22px; background: #f4f6f9; }
.operations-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 1680px; margin: 0 auto 18px; }
.operations-hero h1 { margin: 2px 0 6px; font-size: clamp(24px, 3vw, 38px); }
.operations-hero p { margin: 0; color: var(--muted); }
.operations-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.operations-filters input { min-width: 280px; }
.operations-filters input, .operations-filters select { height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 12px; }
.conversation-ops-grid { max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(480px, 1.7fr) minmax(250px, .75fr); gap: 14px; min-height: calc(100vh - 190px); }
.conversation-inbox-panel, .operational-thread-panel, .operational-context-panel { min-height: 620px; overflow: hidden; }
.operational-conversation-list { display: grid; gap: 7px; max-height: calc(100vh - 280px); overflow: auto; padding-right: 3px; }
.operational-conversation-item { width: 100%; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 12px; text-align: left; display: grid; gap: 7px; cursor: pointer; }
.operational-conversation-item:hover, .operational-conversation-item.active { border-color: #4766ee; background: #f4f6ff; }
.operational-conversation-item header, .operational-conversation-item footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.operational-conversation-item p { margin: 0; color: #475467; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-pill, .provenance-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 800; background: #eef2ff; color: #334ed8; }
.provenance-pill.outside { background: #fff0e8; color: #b54708; }
.attention-dot { width: 8px; height: 8px; border-radius: 50%; background: #d92d20; }
.operational-thread-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; }
.operational-thread-head { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.operational-thread-head h2 { margin: 3px 0; }
.operational-messages { overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #fbfcfe; }
.operational-message { max-width: 76%; align-self: flex-start; }
.operational-message.outbound { align-self: flex-end; }
.operational-message .bubble { padding: 11px 14px; border-radius: 15px; background: #fff; border: 1px solid var(--line); white-space: pre-wrap; }
.operational-message.outbound .bubble { background: #edf2ff; border-color: #d6defe; }
.operational-message.outside .bubble { background: #fff7ed; border-color: #fed7aa; }
.operational-message footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.operational-readonly-composer { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.operational-readonly-composer input { flex: 1; background: #f2f4f7; color: #667085; }
.operational-context-list, .report-list, .publish-readiness-list, .publish-gate-list { display: grid; gap: 9px; }
.context-row, .report-row, .publish-readiness-row, .publish-gate-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.context-row span, .report-row span, .publish-readiness-row span, .publish-gate-row span { color: var(--muted); }
.activity-metric-grid { max-width: 1680px; margin: 0 auto 14px; display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 12px; }
.activity-metric-card { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; gap: 5px; }
.activity-metric-card strong { font-size: 26px; }
.activity-metric-card small { color: var(--muted); }
.metric-delta.up { color: #039855; } .metric-delta.down { color: #d92d20; }
.activity-detail-grid { max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.not-ready-callout { margin-top: 14px; padding: 12px; border-radius: 12px; background: #fffaeb; color: #93370d; border: 1px solid #fedf89; }
.publish-status { padding: 8px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; }
.publish-status.missing { background: #fff1f0; color: #b42318; }
.publish-status.ready { background: #ecfdf3; color: #027a48; }
.publish-layout { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 16px; }
.publish-page-heading { margin-top: 22px; }
.publish-page-list { display: grid; gap: 10px; }
.publish-page-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; }
.publish-page-item header { display: flex; justify-content: space-between; gap: 10px; }
.publish-settings-card { display: grid; align-content: start; gap: 14px; }
.publish-settings-card label { display: grid; gap: 6px; }
.publish-time-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.publish-capability { grid-template-columns: 1fr auto !important; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.publish-capability span { display: grid; gap: 3px; }
.publish-capability small { color: var(--muted); }
.publish-gate-row b.ok { color: #027a48; } .publish-gate-row b.missing { color: #b42318; }

/* Agent: Codex | 2026-08-16 | Guided Meta onboarding.
   Connection progress and permission to reply are deliberately separate. */
.publish-status-stack { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.publish-status.connected { background: #eef4ff; color: #3538cd; }
.publish-status.collecting { background: #fff7e8; color: #9a4b09; }
.publish-safety-status { max-width: 260px; color: var(--muted); font-size: var(--text-xs); text-align: right; }
.meta-connection-layout { align-items: start; }
.meta-setup-stepper { display: grid; gap: 8px; margin: 18px 0; }
.meta-setup-step { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.meta-setup-step.current { border-color: #a4bcfd; background: #f5f7ff; }
.meta-setup-step.done { border-color: #abefc6; background: #f6fef9; }
.meta-setup-step.locked { color: var(--muted); background: #f9fafb; }
.meta-step-index { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef2ff; color: #3538cd; font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.meta-setup-step.done .meta-step-index { background: #dcfae6; color: #067647; }
.meta-step-copy { min-width: 0; display: grid; gap: 2px; }
.meta-step-copy strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.meta-step-copy small { color: var(--muted); font-size: var(--text-xs); }
.meta-step-state { color: var(--muted); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .04em; }
.meta-next-action { display: grid; gap: 5px; margin: 16px 0; padding: 14px; border-radius: 14px; border: 1px solid #c7d7fe; background: #f5f8ff; }
.meta-next-action > div { display: grid; gap: 5px; min-width: 0; }
.meta-next-action span { color: #3538cd; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; }
.meta-next-action strong { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.meta-next-action p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.meta-technical-details { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.meta-technical-details summary { cursor: pointer; color: #344054; font-weight: var(--weight-medium); }
.meta-technical-body { display: grid; gap: 10px; padding-top: 12px; }
.meta-config-progress { color: var(--muted); font-size: var(--text-sm); }
.meta-endpoint-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.meta-test-lock { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #f5d0a9; border-radius: 12px; background: #fffaf3; }
.meta-test-lock b { color: #9a3412; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.meta-test-lock span { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.meta-test-steps { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 22px; color: #344054; font-size: var(--text-sm); line-height: 1.55; }
.meta-test-steps li { padding-left: 2px; }
.meta-test-steps li b { margin-right: 4px; font-weight: var(--weight-semibold); }
.meta-test-steps li span { color: var(--muted); }
.meta-endpoint-row > b { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.meta-endpoint-row code { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-xs); }
.meta-copy-button { min-height: 34px; padding: 6px 10px; }
.meta-test-card { display: grid; gap: 14px; }
.meta-test-prerequisites { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: #344054; }
.meta-test-prerequisites li { padding-left: 2px; }
.meta-test-evidence { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f9fafb; }
.meta-test-evidence div { display: flex; justify-content: space-between; gap: 12px; }
.meta-test-evidence span { color: var(--muted); }
.meta-test-verdict { padding: 12px; border-radius: 12px; background: #f2f4f7; color: #475467; font-weight: var(--weight-medium); }
.meta-test-verdict.pass { background: #ecfdf3; color: #067647; }
.meta-test-verdict.waiting { background: #fff7e8; color: #9a4b09; }
.meta-page-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-page-flag { padding: 4px 8px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: var(--text-2xs); }
.meta-page-flag.ok { background: #ecfdf3; color: #067647; }

@media (max-width: 1180px) {
  .conversation-ops-grid { grid-template-columns: 300px 1fr; }
  .operational-context-panel { grid-column: 1 / -1; min-height: auto; }
  .activity-metric-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .operations-workspace { padding: 12px 8px 80px; }
  .operations-hero { align-items: stretch; flex-direction: column; }
  .operations-filters { display: grid; grid-template-columns: 1fr; }
  .operations-filters input { min-width: 0; }
  .conversation-ops-grid, .activity-detail-grid, .publish-layout { grid-template-columns: 1fr; }
  .conversation-inbox-panel, .operational-thread-panel { min-height: 520px; }
  .activity-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .publish-status-stack { justify-content: flex-start; }
  .publish-safety-status { max-width: none; text-align: left; }
  .meta-setup-step { grid-template-columns: 34px minmax(0, 1fr); }
  .meta-step-state { grid-column: 2; }
  .meta-endpoint-row { grid-template-columns: 1fr auto; }
  .meta-endpoint-row > b { grid-column: 1 / -1; }
}

/* Agent: Codex | 2026-08-15 | v73 coordinated three-column workspace.
   One global top navigation, contextual left navigation only where it adds
   meaning, and never more than three simultaneous information columns. */
:root {
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text: #172033;
  --primary: #4057f2;
  --muted: #667085;
  --green: #067647;
  --green-bg: #ecfdf3;
  --warn: #9a4b09;
  --warn-bg: #fff7e8;
  --red: #b42318;
  --red-bg: #fff1f0;
}

body {
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: -.006em;
}
h1 { font-size: var(--text-xl); line-height: 1.22; }
h2 { font-size: var(--text-lg); line-height: 1.3; }
h3 { font-size: var(--text-md); line-height: 1.35; }
small,.muted,label span { font-size: var(--text-xs); line-height: 1.5; }
.eyebrow { font-size: var(--text-xs); letter-spacing: .12em; }

/* Global areas live in the header. The left column is reserved for contextual
   navigation or data, not duplicated application navigation. */
.topbar {
  height: 76px;
  padding: 0 24px;
  gap: 20px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(14px);
}
.topbar-left { flex: 1 1 auto; gap: 28px; }
.brand { flex: 0 0 auto; }
.mode-tabs {
  position: static;
  inset: auto;
  width: auto;
  max-width: 780px;
  margin: 0;
  padding: 5px;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  gap: 3px;
  overflow: visible;
  border: 0;
  border-radius: 14px;
  background: #f1f3f6;
}
.mode-tab {
  width: auto;
  min-height: 42px;
  padding: 9px 13px;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  color: #596579;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.mode-tab.active { color: #3046dc; background: #fff; box-shadow: 0 4px 14px -10px rgba(16,24,40,.38); }
.mode-icon { width: 24px; height: 24px; border-radius: 7px; font-size: 15px; }
.top-context-tabs { margin-inline: auto; }
body.employee-focus .mode-tabs { display: none; }
body.employee-focus .topbar-left { flex: 0 0 auto; }
body.employee-focus .top-context-tabs { display: flex; }

body > main,
.workspace,
.catalog-workspace,
.bot-profiles-workspace,
.settings-workspace,
.operations-workspace {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  margin-left: auto;
}
.workspace {
  height: calc(100vh - 76px);
  grid-template-columns: minmax(240px,280px) minmax(520px,1fr) minmax(290px,340px);
  gap: 16px;
  padding: 18px 22px;
}
.catalog-workspace,.bot-profiles-workspace,.settings-workspace,.operations-workspace { padding: 24px 28px 42px; }

/* Employee information: contextual navigation + content. Knowledge adds one
   document preview inside content, reaching exactly three columns total. */
.agent-config-shell { grid-template-columns: 232px minmax(0,1fr); gap: 20px; }
.agent-section-tabs { top: 98px; }
.agent-section-tab { min-height: 46px; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.agent-section-panel { min-width: 0; }
.knowledge-library-layout { grid-template-columns: minmax(250px,.68fr) minmax(460px,1.32fr); }
.bot-profile-form-panel { max-width: none; }

/* Catalog has a fixed contextual tab bar and a true sticky table header. */
.catalog-hero {
  padding: 24px 28px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.catalog-hero h1 { color: var(--text); font-size: var(--text-xl); }
.catalog-hero p { color: var(--muted); font-size: var(--text-sm); }
.catalog-stats { grid-template-columns: repeat(5,minmax(94px,1fr)); }
.stat-card { min-width: 0; padding: 11px 13px; border-color: #dfe3ff; background: #f5f7ff; }
.stat-card strong { color: #3046dc; font-size: var(--text-lg); }
.stat-card span { color: #596579; font-size: var(--text-xs); }
.catalog-subnav {
  position: sticky;
  top: 88px;
  z-index: 18;
  margin-block: 18px 16px;
  box-shadow: 0 12px 28px -24px rgba(16,24,40,.42);
}
.catalog-subtab { min-height: 58px; }
.catalog-subtab span { font-size: var(--text-base); }
.catalog-subtab small { font-size: var(--text-xs); }
.catalog-products-panel { padding: 0; overflow: hidden; }
.catalog-products-head { margin: 0; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); }
.catalog-result-bar { margin: 12px 22px 0; font-size: var(--text-xs); }
.catalog-products-table-wrap {
  min-height: 390px;
  max-height: calc(100vh - 330px);
  padding: 12px 22px 22px;
  scrollbar-gutter: stable;
}
.catalog-products-table { min-width: 960px; }
.catalog-products-table th {
  top: 0;
  z-index: 7;
  padding: 12px 13px;
  color: #596579;
  background: #f1f3f6;
  font-size: var(--text-xs);
  letter-spacing: .045em;
}
.catalog-products-table td { height: 64px; padding: 11px 13px; color: #344054; font-size: var(--text-sm); }
.product-row td:nth-child(2) strong { font-size: var(--text-base); line-height: 1.4; }
.product-row td:nth-child(2) small { font-size: var(--text-xs); }
.product-table-category { color: #344ed8; font-size: var(--text-xs); }
.product-code-badge { min-height: 30px; font-size: var(--text-sm); }
.product-status { padding: 5px 9px; font-size: var(--text-xs); }
.pos-table .stock-disabled { font-size: var(--text-xs); }
.product-row:hover,.product-row.active { background: #f4f6ff; box-shadow: inset 4px 0 0 #5065f5; }

/* Connection status uses explicit ink/background pairs instead of low-opacity
   text over pale green cards. */
.settings-health-summary span {
  border-color: #d7dce5;
  color: #344054;
  background: #f8f9fb;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.settings-health-summary span.is-ready {
  color: #05603a;
  border-color: #9fe0c1;
  background: #eafaf2;
}
.integration-card-head .mini-chip:not(.warning) { color: #05603a; background: #eafaf2; border: 1px solid #9fe0c1; }
.integration-card-head .mini-chip.warning { color: #8a3d08; background: #fff5df; border: 1px solid #f2cf8f; }
.connection-workflow span { font-size: var(--text-sm); }
.connection-workflow b { font-size: var(--text-xs); }
.settings-connections-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pancake-collector-card { grid-column: 1 / -1; }

/* Long-form training uses a single typographic scale and readable editor. */
.rich-toolbar { min-height: 56px; }
.rich-toolbar select { font-size: var(--text-sm); }
.rich-canvas,.knowledge-preview-content,.knowledge-preview-body {
  font-size: var(--text-md);
  line-height: 1.7;
}
.rich-canvas h2,.knowledge-preview-content h2,.knowledge-preview-body h2 { font-size: 25px; }
.rich-canvas h3,.knowledge-preview-content h3,.knowledge-preview-body h3 { font-size: 20px; }
.source-pill,.provenance-pill,.operational-message footer { font-size: var(--text-xs); }

@media (max-width: 1280px) {
  .brand small { display: none; }
  .mode-tab { padding-inline: 10px; }
  .mode-tab .mode-icon { display: none; }
  .workspace { grid-template-columns: 230px minmax(440px,1fr) 290px; }
  .catalog-stats { grid-template-columns: repeat(3,minmax(92px,1fr)); }
}

@media (max-width: 1040px) {
  .top-actions .status-chip { display: none; }
  .workspace { height: auto; min-height: calc(100vh - 76px); grid-template-columns: 250px minmax(0,1fr); }
  .right-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .learning-panel { grid-column: 1 / -1; }
  .agent-config-shell { grid-template-columns: 190px minmax(0,1fr); }
  .top-context-tabs { display: flex; }
  .top-context-tabs strong { display: none; }
}

@media (max-width: 820px) {
  .topbar { min-height: 68px; height: auto; padding: 10px 12px; }
  .brand > div { display: none; }
  .mode-tabs {
    position: fixed;
    z-index: 40;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 68px;
    padding: 8px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    justify-content: space-around;
    background: rgba(255,255,255,.98);
  }
  .mode-tab { flex: 1 1 0; min-width: 0; padding: 7px 4px; display: grid; gap: 2px; font-size: var(--text-2xs); }
  .mode-tab .mode-icon { display: grid; margin: auto; }
  .top-context-tabs { max-width: calc(100vw - 150px); overflow: auto; }
  .top-context-tabs button { white-space: nowrap; padding-inline: 10px; }
  body.employee-focus .top-context-tabs { display: flex !important; }
  body > main,.workspace,.catalog-workspace,.bot-profiles-workspace,.settings-workspace,.operations-workspace { margin-left: 0; padding-bottom: 84px; }
  .workspace,.conversation-ops-grid,.activity-detail-grid,.publish-layout,.settings-connections-grid { grid-template-columns: 1fr; }
  .right-panel { grid-column: auto; grid-template-columns: 1fr; }
  .agent-config-shell { grid-template-columns: 1fr; }
  .agent-section-tabs { position: static; flex-direction: row; overflow-x: auto; }
  .knowledge-library-layout { grid-template-columns: 1fr; }
  .catalog-subnav { top: 72px; }
  .catalog-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-products-head,.catalog-list-actions,.catalog-result-bar { align-items: stretch; flex-direction: column; }
}

/* Agent: Codex | 2026-08-15 | v72 workspace IA, employee directory and RBAC UI. */
.settings-workspace .catalog-hero {
  margin-bottom: 20px; padding: 24px 28px; border: 1px solid var(--line);
  border-radius: 20px; background: #fff; color: var(--text); box-shadow: var(--shadow-sm);
}
.settings-workspace .catalog-hero .eyebrow { color: var(--primary); }
.settings-workspace .catalog-hero h1 { color: var(--text); }
.settings-workspace .catalog-hero > div:first-child > p:not(.eyebrow) { color: var(--muted); }
.settings-tab-panel,.settings-connections-grid,.integration-card,.pancake-collector-card { min-width: 0; }
.pancake-collector-card { grid-template-columns: minmax(0,1fr); }
.pancake-collector-card > * { min-width: 0; }
.top-context-tabs strong {
  max-width: 180px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13px; color: #27324a;
}
.top-context-tabs button.active { color: #3046dc; background: #fff; box-shadow: var(--shadow-sm); }
.top-context-tabs .agent-context-back { min-width: 38px; padding-inline: 10px; font-size: 19px; }

.agent-directory,.agent-detail { max-width: 1680px; margin: 0 auto; }
.agent-directory-actions { display: flex; align-items: center; }
.agent-directory-toolbar {
  display: grid; grid-template-columns: minmax(260px,1fr) minmax(180px,260px) auto;
  align-items: end; gap: 12px; margin-bottom: 16px; padding: 15px 18px;
}
.agent-directory-toolbar label { display: grid; gap: 6px; font-weight: 700; color: #344054; }
.agent-directory-toolbar input,.agent-directory-toolbar select {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 11px;
  padding: 0 13px; background: #fff;
}
.agent-directory-toolbar .mini-chip { align-self: center; justify-self: end; }
.agent-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.agent-directory-card {
  display: grid; gap: 16px; min-width: 0; padding: 22px; border: 1px solid var(--line);
  border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); transition: .18s ease;
}
.agent-directory-card:hover { transform: translateY(-2px); border-color: #cdd4ff; box-shadow: 0 18px 38px -28px rgba(39,56,132,.38); }
.agent-directory-card.is-off { opacity: .68; }
.agent-directory-card > header { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 15px; align-items: center; }
.agent-card-avatar,.agent-detail-avatar,.team-avatar {
  position: relative; display: grid; place-items: center; flex: none; border-radius: 50%;
  color: #3549d4; background: linear-gradient(145deg,#dfe5ff,#f3f5ff); font-weight: 800;
}
.agent-card-avatar { width: 62px; height: 62px; font-size: 18px; }
.agent-card-avatar i { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: #12b76a; }
.agent-card-identity { min-width: 0; }
.agent-card-identity > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.agent-card-identity h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.agent-card-identity p { margin: 3px 0 1px; color: #4b5568; }
.agent-card-identity small { color: var(--muted); }
.agent-state { display: inline-flex; padding: 4px 9px; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 750; }
.agent-state.ready { color: #027a48; background: #ecfdf3; }
.agent-state.draft { color: #5d6678; background: #f0f2f5; }
.agent-card-divider { height: 1px; background: var(--line); }
.agent-card-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.agent-card-metrics span { display: grid; gap: 4px; padding: 11px 12px; border-radius: 12px; background: #f8f9fb; }
.agent-card-metrics small { color: var(--muted); }
.agent-card-metrics strong { font-size: 20px; color: #232c3f; }
.agent-directory-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.agent-directory-card > footer > div { display: flex; gap: 8px; }
.agent-directory-empty { grid-column: 1/-1; min-height: 220px; display: grid; place-content: center; gap: 6px; text-align: center; }

.agent-detail-heading {
  display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 16px;
  margin-bottom: 18px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px;
  background: #fff; box-shadow: var(--shadow-sm);
}
.agent-detail-avatar { width: 64px; height: 64px; font-size: 18px; }
.agent-detail-heading h1 { margin: 1px 0 2px; font-size: 26px; }
.agent-detail-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.agent-detail-heading-actions { display: flex; align-items: center; gap: 9px; }
.bot-profile-layout { grid-template-columns: minmax(0,1fr); }
.bot-profile-form-panel { width: 100%; max-width: 1220px; }
.bot-profile-form { max-width: none; }
.bot-profile-form > .rich-field { margin-block: 6px; }
.bot-profile-form > label > textarea[name="rules"] { min-height: 240px; font: 500 15px/1.65 var(--font-body); }

.order-status-grid {
  max-width: 1680px; margin: 0 auto 14px; display: grid;
  grid-template-columns: repeat(6,minmax(130px,1fr)); gap: 10px;
}
.order-status-grid article { display: grid; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.order-status-grid span { color: var(--muted); font-size: 12px; }
.order-status-grid strong { font-size: 24px; }
.order-desk-panel { max-width: 1680px; margin: 0 auto; }
.not-ready-callout { display: flex; align-items: flex-start; gap: 12px; }
.not-ready-callout strong { flex: none; }
.order-table-wrap { margin-top: 15px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.order-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.order-table th { padding: 12px 14px; text-align: left; color: #596579; background: #f6f7f9; font-size: 12px; }
.order-table td { padding: 14px; border-top: 1px solid var(--line); vertical-align: top; }
.order-table td strong,.order-table td small { display: block; }
.order-table td small { margin-top: 4px; color: var(--muted); }
.order-state { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #3549d4; background: #eef1ff; font-size: 11px; font-weight: 750; }

.settings-access-summary {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px;
}
.settings-access-summary article { display: grid; gap: 5px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.settings-access-summary article span,.settings-access-summary article small { color: var(--muted); }
.settings-access-summary article strong { font-size: 17px; }
.team-directory-panel { margin-bottom: 16px; }
.team-directory-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) 220px; gap: 10px; margin-bottom: 14px; }
.team-directory-toolbar input,.team-directory-toolbar select { min-height: 43px; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; background: #fff; }
.team-member-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.team-member-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.team-member-card.is-off { opacity: .68; }
.team-member-card header { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.team-avatar { width: 50px; height: 50px; }
.team-member-card h3 { margin: 0; font-size: 17px; }
.team-member-card p { margin: 2px 0 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.team-member-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.team-member-facts span { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f8f9fb; }
.team-member-facts small { color: var(--muted); }
.team-member-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.access-policy-note { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(300px,1.2fr) auto; align-items: center; gap: 20px; }
.access-policy-note h2 { margin-bottom: 0; }
.team-member-dialog { width: min(1060px,calc(100vw - 40px)); }
.team-member-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.team-member-form-grid label { display: grid; gap: 6px; font-weight: 700; }
.page-permission-editor { display: grid; gap: 10px; }
.team-page-permission-list { display: grid; gap: 10px; }
.team-page-permission { border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: #fafbfc; }
.team-page-permission header { margin-bottom: 10px; }
.team-page-permission .compact-switch { justify-content: flex-start; }
.team-page-permission .compact-switch > span { display: grid; gap: 1px; }
.team-page-permission .compact-switch small { color: var(--muted); }
.team-page-permission > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding-left: 2px; }
.team-page-permission > div label { padding: 8px 10px; border-radius: 9px; background: #fff; color: #475467; }

@media (max-width: 1180px) {
  .agent-directory-grid,.team-member-grid { grid-template-columns: 1fr; }
  .order-status-grid { grid-template-columns: repeat(3,1fr); }
  .settings-access-summary { grid-template-columns: 1fr 1fr; }
  .access-policy-note { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mode-tabs {
    left: 0; right: 0; transform: none; width: 100%; max-width: none;
    justify-content: space-around; gap: 2px; overflow-x: hidden; scrollbar-width: none;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab { flex: 1 1 0; min-width: 0; }
  .agent-directory-toolbar,.team-directory-toolbar,.team-member-form-grid { grid-template-columns: 1fr; }
  .agent-directory-toolbar .mini-chip { justify-self: start; }
  .agent-directory-card > footer,.team-member-card footer { align-items: stretch; flex-direction: column; }
  .agent-directory-card > footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-detail-heading { grid-template-columns: 50px 1fr; padding: 15px; }
  .agent-detail-avatar { width: 50px; height: 50px; }
  .agent-detail-heading-actions { grid-column: 1/-1; justify-content: space-between; }
  .order-status-grid,.settings-access-summary { grid-template-columns: repeat(2,1fr); }
  .team-member-card header { grid-template-columns: 44px 1fr; }
  .team-member-card header .agent-state { grid-column: 2; justify-self: start; }
  .team-member-facts,.team-page-permission > div { grid-template-columns: 1fr 1fr; }
  .top-context-tabs { display: none !important; }
}

/* v73 final cascade: keep the global navigation in the header after all
   earlier compatibility layers, and hide it only inside employee focus. */
@media (min-width: 821px) {
  .topbar { height: 76px; padding: 0 24px; gap: 20px; }
  .topbar-left { flex: 1 1 auto; gap: 28px; }
  .mode-tabs {
    position: static; inset: auto; width: auto; max-width: 780px; height: auto;
    margin: 0; padding: 5px; display: flex; flex: 0 1 auto; flex-direction: row;
    gap: 3px; overflow: visible; border: 0; border-radius: 14px; background: #f1f3f6;
  }
  .mode-tab {
    width: auto; min-width: 0; min-height: 42px; padding: 9px 13px;
    justify-content: center; gap: 8px; border-radius: 10px; text-align: center;
    color: #596579; font-size: var(--text-sm); white-space: nowrap;
  }
  .mode-tab.active { color: #3046dc; background: #fff; box-shadow: 0 4px 14px -10px rgba(16,24,40,.38); }
  .mode-icon { width: 24px; height: 24px; border-radius: 7px; font-size: 15px; }
  body.employee-focus .mode-tabs { display: none; }
  body.employee-focus .topbar-left { flex: 0 0 auto; }
  body.employee-focus .top-context-tabs { display: flex; margin-inline: auto; }
  body > main,
  .workspace,
  .catalog-workspace,
  .bot-profiles-workspace,
  .settings-workspace,
  .operations-workspace {
    width: 100%; max-width: 1720px; margin-inline: auto; margin-left: auto;
  }
  .workspace {
    height: calc(100vh - 76px); padding: 18px 22px; gap: 16px;
    grid-template-columns: minmax(240px,280px) minmax(520px,1fr) minmax(290px,340px);
  }
  .catalog-workspace,.bot-profiles-workspace,.settings-workspace,.operations-workspace { padding: 24px 28px 42px; }
}

@media (min-width: 821px) and (max-width: 1280px) {
  .mode-tab { padding-inline: 10px; }
  .mode-tab .mode-icon { display: none; }
  .workspace { grid-template-columns: 230px minmax(440px,1fr) 290px; }
}

@media (min-width: 821px) and (max-width: 1040px) {
  .workspace { height: auto; min-height: calc(100vh - 76px); grid-template-columns: 250px minmax(0,1fr); }
  .right-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .learning-panel { grid-column: 1 / -1; }
}

/* Agent: Codex | 2026-08-15 | v76 UI governance.
   Mot thang chu, mot quy tac do dam va mot mat do cho toan bo ung dung.
   Header/menu la dieu huong gon; chi tieu de cot kho duoc ghim trong bang. */
:root {
  --type-caption: 12px;
  --type-control: 13px;
  --type-body: 14px;
  --type-subtitle: 16px;
  --type-title: 20px;
  --type-page: 24px;
  --type-metric: 20px;
  --ui-regular: 400;
  --ui-medium: 500;
  --ui-semibold: 600;
  --ui-bold: 700;
}

/* One semantic scale across every workspace. The legacy layers contain many
   hard-coded 8-38px values, so these role-based rules intentionally win. */
body { font-size: var(--type-body); line-height: 1.5; letter-spacing: -.003em; }
body :where(input,select,textarea) { font-size: var(--type-body) !important; line-height: 1.5; }
body :where(button,.button) { font-size: var(--type-control) !important; line-height: 1.35; }
body :where(label,.feedback-panel label,.promotion-form label,.inline-shared label,.measurement-controls label,.size-scope-label,.size-analog-grid label) {
  font-size: var(--type-control) !important;
}
body :where(p,li,dt,dd,.empty-state,.progress-item,.draft-grid,.feedback-card,.context-row,.connection-workflow span) {
  font-size: var(--type-body) !important;
}
body :where(small,.muted,.notice,.selected-file,.message-meta,.typing-label,.source-pill,.provenance-pill,.operational-message footer) {
  font-size: var(--type-caption) !important;
}
body :where(.eyebrow,.status-chip,.stage-chip,.mini-chip,.agent-state,.order-state,.product-status,.product-table-category,.product-code-badge) {
  font-size: var(--type-caption) !important;
}
body :where(h1,.catalog-hero h1,.agent-detail-heading h1,.product-detail-header h2) {
  font-size: var(--type-page) !important;
  line-height: 1.24 !important;
  font-weight: var(--ui-semibold) !important;
}
body :where(h2,.panel h2,.catalog-products-head h2,.input-guide-card h2,.product-editor-panel h2,.catalog-operations-grid h2) {
  font-size: var(--type-title) !important;
  line-height: 1.3 !important;
  font-weight: var(--ui-semibold) !important;
}
body :where(h3,.panel h3,.form-section-title strong,.agent-skill-title strong) {
  font-size: var(--type-subtitle) !important;
  line-height: 1.35 !important;
  font-weight: var(--ui-semibold) !important;
}
.mode-tab,.agent-section-tab,.top-context-tabs button,.catalog-subtab span { font-size: var(--type-control) !important; }
.stat-card strong,.agent-card-metrics strong,.order-status-grid strong { font-size: var(--type-metric) !important; }
.rich-canvas,.knowledge-preview-content,.knowledge-preview-body { font-size: var(--type-body) !important; line-height: 1.72; }
.rich-canvas h2,.knowledge-preview-content h2,.knowledge-preview-body h2 { font-size: var(--type-title) !important; }
.rich-canvas h3,.knowledge-preview-content h3,.knowledge-preview-body h3 { font-size: var(--type-subtitle) !important; }

/* Do dam co chu dich: noi dung thuong 400, dieu khien 500, tieu de 600.
   Bold 700 chi danh cho noi dung nguoi dung chu dong boi dam trong editor. */
body :where(strong) { font-weight: var(--ui-semibold); }
body :where(button,.button,.mode-tab,.agent-section-tab,.top-context-tabs button,label) { font-weight: var(--ui-medium); }
.mode-tab.active,.agent-section-tab.active,.top-context-tabs button.active { font-weight: var(--ui-semibold); }
.rich-canvas :where(b,strong),.knowledge-preview-content :where(b,strong),.knowledge-preview-body :where(b,strong) { font-weight: var(--ui-bold); }

/* App shell: mat do enterprise 14px, icon 20px, header 64px. */
.topbar { height:64px !important; min-height:64px; padding:0 18px !important; gap:16px !important; }
.topbar-left { gap:20px !important; }
.brand { gap:9px; letter-spacing:.035em; }
.brand-mark { width:38px; height:36px; padding:6px; border-radius:10px; }
.brand strong { font-size:14px !important; font-weight:var(--ui-semibold); }
.brand small { font-size:11px !important; line-height:1.25 !important; }
.mode-tabs { padding:4px !important; gap:2px !important; border-radius:12px !important; }
.mode-tab { min-height:36px !important; padding:6px 10px !important; gap:7px !important; border-radius:9px !important; font-weight:var(--ui-medium) !important; }
.mode-tab.active { font-weight:var(--ui-semibold) !important; }
.mode-icon { width:21px !important; height:21px !important; border-radius:6px !important; background:transparent !important; }
.mode-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.top-context-tabs { gap:3px; padding:3px; border-radius:10px; }
.top-context-tabs button { min-height:34px; padding:6px 11px; border-radius:7px; font-weight:var(--ui-medium); }
.top-context-tabs strong { font-size:var(--type-control); font-weight:var(--ui-semibold); }
.top-actions { gap:7px; }
.top-actions .button { min-height:36px; padding:7px 12px; }
.visually-hidden {
  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;
}

/* Khu vuc lam viec va menu ngu canh. */
@media (min-width:821px) {
  .workspace { height:calc(100vh - 64px) !important; padding:16px 20px !important; gap:14px !important; }
  .catalog-workspace,.bot-profiles-workspace,.settings-workspace,.operations-workspace { padding:20px 24px 36px !important; }
}
.panel { padding:16px; }
.button { min-height:38px; padding:8px 13px; font-weight:var(--ui-semibold); }
.catalog-hero,.bot-profiles-workspace .catalog-hero { padding:20px 24px; border-radius:16px; }
.agent-config-shell { grid-template-columns:212px minmax(0,1fr); gap:16px; }
.agent-section-tabs { top:80px; gap:3px; padding:9px; border-radius:14px; }
.agent-section-tab { min-height:40px; padding:8px 10px; display:flex; align-items:center; gap:9px; border-radius:9px; font-weight:var(--ui-medium); }
.agent-section-icon { width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; color:#667085; }
.agent-section-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.agent-section-tab.active .agent-section-icon { color:#4057f2; }
.agent-detail-heading { grid-template-columns:56px minmax(0,1fr) auto; gap:13px; margin-bottom:14px; padding:15px 18px; border-radius:15px; }
.agent-detail-avatar { width:56px; height:56px; font-size:16px; }
.agent-detail-heading-actions { gap:7px; }
.bot-profile-form-panel { padding:20px; }

/* Editor va dialog ky nang: van ban dai de doc, chrome gon va nhat quan. */
.rich-field > label,.control-plane-form label { font-weight:var(--ui-semibold); }
.rich-toolbar { min-height:46px; padding:6px 9px; gap:3px; }
.rich-toolbar select { min-width:132px; height:34px; padding:0 9px; border-radius:8px; }
.rich-toolbar button { min-width:34px; height:34px; border-radius:8px; font-weight:var(--ui-medium); }
.rich-canvas { min-height:280px; max-height:520px; padding:22px 24px; line-height:1.68 !important; }
.rich-canvas h2 { margin:18px 0 9px; }
.rich-canvas h3 { margin:15px 0 8px; }
.control-plane-dialog { width:min(1060px,calc(100vw - 36px)); border-radius:18px; }
.control-plane-form { padding:20px 22px; gap:14px; }
.control-plane-form > header { top:-20px; margin:-20px -22px 0; padding:15px 22px 13px; }
.control-plane-form input,.control-plane-form select,.control-plane-form textarea { padding:9px 11px; border-radius:9px; }
.workflow-stepper { gap:5px; padding:6px; border-radius:11px; }
.workflow-stepper button { padding:8px 9px; border-radius:8px; font-weight:var(--ui-medium); }
.workflow-stepper button span { width:21px; height:21px; margin-right:5px; }
.skill-workflow-panel { gap:13px; min-height:390px; }
.switch-field,.publish-capability { padding:11px 13px; border-radius:11px; }
.switch-field input,.publish-capability input,.skill-switch input { width:40px !important; height:22px !important; padding:3px !important; }
.switch-field input::before,.publish-capability input::before,.skill-switch input::before { width:16px; height:16px; }
.switch-field input:checked::before,.publish-capability input:checked::before,.skill-switch input:checked::before { transform:translateX(18px); }
.skill-tool-edit-row,.skill-test-row { padding:12px; border-radius:11px; }

/* Chi tiet san pham: nut Dong co nhan, luon nam trong header. */
.product-detail-header { position:relative; z-index:4; padding:14px 18px; }
.product-detail-header-actions { gap:8px; }
.product-detail-close { width:auto; min-width:72px; height:34px; padding:0 11px; display:inline-flex; gap:6px; border-radius:9px; font-size:var(--type-control) !important; font-weight:var(--ui-semibold) !important; }
.product-detail-close > span:first-child { font-size:19px; font-weight:var(--ui-regular); line-height:1; }
.product-detail-nav { padding:6px 18px; }
.product-detail-nav a { padding:6px 9px; font-weight:var(--ui-medium); }
.product-detail-body { padding:15px 18px 24px; }

/* The application header and section tabs are normal document content. */
.topbar { position: relative !important; top: auto !important; }
.catalog-subnav,.settings-subnav { position: static !important; top: auto !important; }

/* The requested pinned element: warehouse data-column header. */
.catalog-products-table-wrap {
  position: relative;
  min-height: 340px;
  max-height: calc(100vh - 226px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 0 12px;
  background: #fff;
}
.catalog-products-table {
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.catalog-products-table thead { position: relative; z-index: 12; }
.catalog-products-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  padding: 10px 12px;
  border-bottom: 1px solid #d8deea;
  color: #596579;
  background: #f1f3f6;
  box-shadow: 0 5px 12px -11px rgba(16,24,40,.72);
  font-size: var(--type-caption) !important;
  line-height: 1.3;
}
.catalog-products-head { padding:16px 18px 12px; }
.catalog-result-bar { margin:9px 18px 0; }
.catalog-products-table td { height:54px; padding:8px 12px; font-size:var(--type-control) !important; }
.product-row td:nth-child(2) strong { font-size: var(--type-body) !important; }
.product-row td:nth-child(2) small,.pos-table .stock-disabled { font-size: var(--type-caption) !important; }
.product-code-badge { min-height:28px; padding:4px 8px; }
.product-status { padding:4px 8px; }

/* Fix the chat left rail shown in the reference: no child may create a second
   horizontal viewport or push the column beyond its grid track. */
.workspace > *,.left-panel > *,.right-panel > * { min-width: 0; max-width: 100%; }
.left-panel,.right-panel { overflow-x: hidden; }
.seed-ad-row { grid-template-columns: minmax(0,1fr) auto; min-width: 0; }
.seed-ad-row input { width: 100%; min-width: 0; }
.seed-ad-row .button { white-space: nowrap; }

/* Contextual help: compact icon in normal flow, one floating layer rendered
   by app.js on hover/focus so long notes are not permanently expanded. */
.context-help-trigger {
  width: 22px;
  height: 22px;
  margin: 2px 0 0 6px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #cfd6e4;
  border-radius: 50%;
  color: #596579;
  background: #fff;
  font: 750 12px/1 var(--font-body) !important;
  vertical-align: middle;
  cursor: help;
  transition: border-color .16s ease,color .16s ease,background .16s ease;
}
.context-help-trigger:hover,.context-help-trigger:focus-visible {
  color: #3046dc;
  border-color: #9aa8ff;
  background: #f2f4ff;
}
.context-help-layer {
  position: fixed;
  z-index: 120;
  width: min(360px,calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid #d7ddeb;
  border-radius: 11px;
  color: #344054;
  background: #fff;
  box-shadow: 0 18px 42px -20px rgba(16,24,40,.42);
  font-size: var(--type-caption) !important;
  line-height: 1.55;
  pointer-events: none;
}
.context-help-layer[hidden] { display: none; }

/* [Agent: Codex] Khóa cỡ chữ phụ tối thiểu để không còn chữ 8-11px rải rác. */
body :where(
  small,
  summary,
  legend,
  .promotion-duplicate,
  .editor-state,
  .selected-file,
  .sync-status,
  .runtime-proof,
  .rich-editor-note
) {
  font-size: var(--type-caption) !important;
  line-height: 1.45 !important;
}

.form-section-title > span,
.collector-steps section > span:first-child {
  font-size: 12px !important;
}

/* [Agent: Codex] Các nhãn phụ từng dùng 8-11px được gom về caption/control. */
:where(
  .starter-label,
  .file-drop span,
  .inventory-row strong,
  .product-detail-nav a,
  .product-description-card > span,
  .product-facts-grid span,
  .product-knowledge-grid span,
  .profile-source-meta span,
  .typing-flow-preview span,
  .collector-safety-strip strong,
  .collector-safety-strip span,
  .training-package-card code
) {
  font-size: var(--type-caption) !important;
  line-height: 1.4 !important;
}

.inventory-head span,
.typing-settings-head span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

table th { font-size: var(--type-caption) !important; }
table td { font-size: var(--type-control) !important; }
.typing-flow-preview b,
.collector-steps b,
.integration-icon { font-size: 12px !important; }
.collector-steps strong,
.collector-copy-field strong,
.collector-copy-field code,
.empty-row { font-size: var(--type-caption) !important; }
.catalog-subtab { position: relative; }
.catalog-subtab > .context-help-trigger { position: absolute; top: 7px; right: 8px; margin: 0; }

@media (max-width: 820px) {
  .seed-ad-row { grid-template-columns: minmax(0,1fr); }
  .seed-ad-row .button { width: 100%; }
  .catalog-products-table-wrap { max-height: calc(100vh - 190px); }
}
/* Login page: kept external so the application can enforce script-src 'self'. */
body:has(.login-card) { min-height: 100vh; display: grid; place-items: center; background: var(--grad-navy, #0F172A); }
.login-card { width: min(380px, 92vw); background: var(--paper, #fff); border-radius: 18px; padding: 28px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.5); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-brand .mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--grad-blue, #0369A1); color: #fff; font: 800 20px "Be Vietnam Pro", sans-serif; }
.login-card h1 { margin: 0; font: 700 18px "Be Vietnam Pro", sans-serif; color: var(--navy, #0F172A); }
.login-card p.sub { margin: 2px 0 0; color: var(--muted, #64748B); font-size: 12px; }
.login-card label { display: grid; gap: 6px; margin: 18px 0 12px; font-size: 12px; font-weight: 600; color: var(--slate, #334155); }
.login-card input { border: 1px solid var(--line-strong, #CBD5E1); border-radius: 12px; padding: 12px; font: inherit; outline: none; }
.login-card input:focus { border-color: var(--blue, #0369A1); box-shadow: 0 0 0 3px rgba(3,105,161,.18); }
.login-card button { width: 100%; border: 0; border-radius: 12px; padding: 12px; font: 700 14px "Be Vietnam Pro", sans-serif; color: #fff; background: var(--grad-blue, #0369A1); cursor: pointer; }
.login-note { min-height: 18px; margin-top: 10px; color: var(--red, #DC2626); font-size: 12px; text-align: center; }