/* =====================================================================
   GOOGLE STITCH DESIGN THEME — CompanyAI
   Override layer: applied last, keeps all JS class/ID contracts intact.
   ===================================================================== */

/* ===================== DESIGN TOKENS — LIGHT (default) ===================== */
:root,
html[data-theme="light"],
html.theme-light {
  --st-bg:            #f6f8fb;
  --st-card:          #ffffff;
  --st-card-soft:     #f8fbff;
  --st-border:        #e6ebf3;
  --st-text:          #0f172a;
  --st-muted:         #64748b;
  --st-ghost:         #e9eef8;
  --st-primary:       #3b82f6;
  --st-primary-2:     #60a5fa;
  --st-primary-ink:   #ffffff;
  --st-primary-cont:  #e0e7ff;
  --st-on-primary-cont: #3b82f6;
  --st-secondary:     #22c55e;

  /* Chat bubbles */
  --st-user-bg:       #dcfce7;
  --st-user-border:   #86efac;
  --st-user-text:     #14532d;
  --st-assist-bg:     #f0f4ff;
  --st-assist-border: #c7d7fd;
  --st-assist-text:   #1e3a8a;

  /* Sidebar */
  --st-nav-bg:          #ffffff;
  --st-nav-border:      #e6ebf3;
  --st-nav-text:        #475569;
  --st-nav-active-text: #3b82f6;
  --st-nav-active-bg:   rgba(59,130,246,.08);
  --st-nav-active-bar:  #3b82f6;
  --st-nav-hover-bg:    #f1f5f9;
  --st-nav-section:     #94a3b8;

  /* Topbar */
  --st-topbar-bg:       rgba(255,255,255,.85);
  --st-topbar-border:   #e6ebf3;

  /* Composer */
  --st-cmp-bg:          #ffffff;
  --st-cmp-border:      #e2e8f0;
  --st-cmp-focus-ring:  rgba(59,130,246,.12);
  --st-cmp-focus-border:#3b82f6;
  --st-input-text:      #0f172a;
  --st-input-ph:        #94a3b8;

  /* Send button */
  --st-send-bg:         #3b82f6;
  --st-send-hover:      #2563eb;
  --st-send-icon:       #ffffff;
}

/* ===================== DESIGN TOKENS — DARK ===================== */
@media (prefers-color-scheme: dark) {
  :root {
    --st-bg:            #0b1220;
    --st-card:          #0f172a;
    --st-card-soft:     #0b1530;
    --st-border:        #1f2a40;
    --st-text:          #e1e2ec;
    --st-muted:         #8ea2c8;
    --st-ghost:         #253149;
    --st-primary:       #adc6ff;
    --st-primary-2:     #60a5fa;
    --st-primary-ink:   #002e6a;
    --st-primary-cont:  #4d8eff;
    --st-on-primary-cont: #e0e7ff;
    --st-secondary:     #4ae176;

    --st-user-bg:       #0f5132;
    --st-user-border:   #1fa86b;
    --st-user-text:     #dcfce7;
    --st-assist-bg:     #0f152a;
    --st-assist-border: #22304d;
    --st-assist-text:   #e1e2ec;

    --st-nav-bg:          #0a0f1c;
    --st-nav-border:      rgba(255,255,255,.07);
    --st-nav-text:        #94a3b8;
    --st-nav-active-text: #adc6ff;
    --st-nav-active-bg:   rgba(173,198,255,.08);
    --st-nav-active-bar:  #adc6ff;
    --st-nav-hover-bg:    rgba(255,255,255,.05);
    --st-nav-section:     #475569;

    --st-topbar-bg:       rgba(11,18,32,.88);
    --st-topbar-border:   rgba(255,255,255,.08);

    --st-cmp-bg:          #0f172a;
    --st-cmp-border:      #1f2a40;
    --st-cmp-focus-ring:  rgba(173,198,255,.10);
    --st-cmp-focus-border:#adc6ff;
    --st-input-text:      #e1e2ec;
    --st-input-ph:        #8ea2c8;

    --st-send-bg:         #4d8eff;
    --st-send-hover:      #3b82f6;
    --st-send-icon:       #ffffff;
  }
}

html[data-theme="dark"],
html.theme-dark {
  --st-bg:            #0b1220;
  --st-card:          #0f172a;
  --st-card-soft:     #0b1530;
  --st-border:        #1f2a40;
  --st-text:          #e1e2ec;
  --st-muted:         #8ea2c8;
  --st-ghost:         #253149;
  --st-primary:       #adc6ff;
  --st-primary-2:     #60a5fa;
  --st-primary-ink:   #002e6a;
  --st-primary-cont:  #4d8eff;
  --st-on-primary-cont: #e0e7ff;
  --st-secondary:     #4ae176;

  --st-user-bg:       #0f5132;
  --st-user-border:   #1fa86b;
  --st-user-text:     #dcfce7;
  --st-assist-bg:     #0f152a;
  --st-assist-border: #22304d;
  --st-assist-text:   #e1e2ec;

  --st-nav-bg:          #0a0f1c;
  --st-nav-border:      rgba(255,255,255,.07);
  --st-nav-text:        #94a3b8;
  --st-nav-active-text: #adc6ff;
  --st-nav-active-bg:   rgba(173,198,255,.08);
  --st-nav-active-bar:  #adc6ff;
  --st-nav-hover-bg:    rgba(255,255,255,.05);
  --st-nav-section:     #475569;

  --st-topbar-bg:       rgba(11,18,32,.88);
  --st-topbar-border:   rgba(255,255,255,.08);

  --st-cmp-bg:          #0f172a;
  --st-cmp-border:      #1f2a40;
  --st-cmp-focus-ring:  rgba(173,198,255,.10);
  --st-cmp-focus-border:#adc6ff;
  --st-input-text:      #e1e2ec;
  --st-input-ph:        #8ea2c8;

  --st-send-bg:         #4d8eff;
  --st-send-hover:      #3b82f6;
  --st-send-icon:       #ffffff;
}

/* ===================== BASE ===================== */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  background: var(--st-bg) !important;
  color: var(--st-text) !important;
}

/* ===================== TOPBAR — STITCH FLAT ===================== */
.topbar {
  background: var(--st-topbar-bg) !important;
  border-bottom: 1px solid var(--st-topbar-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.topbar::after {
  display: none !important;
}

.topbar.is-scrolled {
  box-shadow: 0 1px 0 var(--st-topbar-border) !important;
}

/* Topbar pill group — Stitch style */
.topbar-pill {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}

/* (Legacy .topbar-mode-pill rules đã bỏ — switch mới nằm ở namespace .mei-mode-switch ở cuối file) */

#topbarQuikAiBtn.topbar-model-btn {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  color: var(--st-text) !important;
}

#topbarQuikAiBtn.topbar-model-btn:hover {
  background: var(--st-ghost) !important;
}

/* ===================== SIDEBAR — STITCH DESIGN ===================== */
.side-nav {
  width: 260px !important;
  background: var(--st-nav-bg) !important;
  border-right: 1px solid var(--st-nav-border) !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--st-border) transparent;
}

/* override light theme block (already white, but ensure token usage) */
html[data-theme="light"] body.use-side-nav #sideNav,
html.theme-light body.use-side-nav #sideNav {
  background: var(--st-nav-bg) !important;
  border-right: 1px solid var(--st-nav-border) !important;
  box-shadow: none !important;
  color: var(--st-text) !important;
}

/* ------ Sidebar branding header (injected via HTML) ------ */
.stitch-nav-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.stitch-nav-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--st-primary-cont);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  font-weight: 400;
  color: var(--st-on-primary-cont);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.stitch-nav-brand-name {
  font-size: 17px;
  font-weight: 900;
  color: var(--st-text);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.stitch-nav-brand-sub {
  font-size: 11px;
  color: var(--st-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* ------ Sidebar search (injected via HTML) ------ */
.stitch-nav-search {
  padding: 12px 12px 8px;
  flex-shrink: 0;
}

.stitch-nav-search-inner {
  position: relative;
}

.stitch-nav-search-ic {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Material Symbols Outlined';
  font-size: 16px;
  font-weight: 400;
  color: var(--st-muted);
  pointer-events: none;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  line-height: 1;
}

.stitch-nav-search-input {
  width: 100%;
  background: var(--st-ghost);
  border: 1px solid var(--st-border);
  color: var(--st-text);
  font-size: 12px;
  font-family: inherit;
  border-radius: 8px;
  padding: 6px 10px 6px 32px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

.stitch-nav-search-input::placeholder {
  color: var(--st-muted);
}

.stitch-nav-search-input:focus {
  border-color: var(--st-primary);
  box-shadow: 0 0 0 3px var(--st-cmp-focus-ring);
}

/* ------ Nav tabs — Stitch style ------ */
.side-nav .tabs {
  padding: 0 8px !important;
  gap: 1px !important;
  margin-bottom: 4px !important;
}

.side-nav .tab {
  padding: 8px 14px !important;
  border-radius: 0 10px 10px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--st-nav-text) !important;
  gap: 10px !important;
  background: transparent !important;

  /* Stitch: left border accent instead of left-side bar */
  border: none !important;
  border-left: 2px solid transparent !important;
  position: relative;

  transition: background .15s, color .15s, border-color .15s !important;
}

.side-nav .tab:hover {
  background: var(--st-nav-hover-bg) !important;
  color: var(--st-text) !important;
  border-left-color: transparent !important;
}

.side-nav .tab.active {
  background: var(--st-nav-active-bg) !important;
  color: var(--st-nav-active-text) !important;
  border-left-color: var(--st-nav-active-bar) !important;
  font-weight: 600 !important;
}

/* remove old pseudo-element accent bar */
.side-nav .tab.active::before {
  display: none !important;
}

/* Tab icon sizing */
.side-nav .tab .tab-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

/* ------ History section label ------ */
.stitch-hist-label {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--st-nav-section);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ===================== CHAT AREA BACKGROUND ===================== */
.chat,
#chatPanel {
  background: transparent !important;
}

/* ===================== CHAT THREAD ===================== */
.thread {
  max-width: 800px !important;
}

/* ===================== USER BUBBLE — STITCH GREEN ===================== */
.cmsg.user {
  max-width: 75% !important;
}

.cmsg.user .body {
  background: var(--st-user-bg) !important;
  border: 1px solid var(--st-user-border) !important;
  color: var(--st-user-text) !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  padding: 12px 16px !important;
}

/* ===================== ASSISTANT BUBBLE — STITCH BLUE TINT ===================== */
.cmsg.assistant .body {
  color: var(--st-text) !important;
}

/* AI name pill */
.cmsg.assistant .head span:first-child {
  background:
    radial-gradient(circle at 0 0, rgba(219,234,254,.26), transparent 62%),
    linear-gradient(135deg, rgba(59,130,246,.96), rgba(79,70,229,.90)) !important;
  color: #e0e7ff !important;
  box-shadow:
    0 0 0 1px rgba(191,219,254,.4),
    0 4px 12px rgba(37,99,235,.3) !important;
}

/* ===================== COMPOSER — STITCH CARD ===================== */
.composer {
  background: var(--st-cmp-bg) !important;
  border: 1px solid var(--st-cmp-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  max-width: min(800px, calc(100% - 24px)) !important;
}

.composer:focus-within {
  background: var(--st-cmp-bg) !important;
  border-color: var(--st-cmp-focus-border) !important;
  box-shadow: 0 0 0 3px var(--st-cmp-focus-ring), 0 2px 8px rgba(0,0,0,.06) !important;
}

.composer textarea {
  color: var(--st-input-text) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
}

.composer textarea::placeholder {
  color: var(--st-input-ph) !important;
}

/* ------ Composer toolbar buttons ------ */
.composer .composer-left :is(button.btn.ghost.icon),
.composer .chat-agent-chip,
.composer .chat-icon-btn.chat-feature-btn,
.composer .chat-template-btn,
.composer .chat-mention-btn,
.composer .chat-notif-btn {
  color: var(--st-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  transition: color .15s, background .15s !important;
}

.composer .composer-left :is(button.btn.ghost.icon):hover,
.composer .chat-agent-chip:hover,
.composer .chat-icon-btn.chat-feature-btn:hover,
.composer .chat-template-btn:hover,
.composer .chat-mention-btn:hover,
.composer .chat-notif-btn:hover {
  color: var(--st-text) !important;
  background: var(--st-ghost) !important;
}

/* ------ Send button — Stitch primary blue ------ */
#chatSend:not(:disabled) {
  background: var(--st-send-bg) !important;
  color: var(--st-send-icon) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.3) !important;
}

#chatSend:not(:disabled):hover {
  background: var(--st-send-hover) !important;
  transform: none !important;
}

/* Disabled state */
#chatSend:disabled:not(.icon-send-streaming) {
  background: var(--st-ghost) !important;
  color: var(--st-muted) !important;
  box-shadow: none !important;
}

/* ===================== CHAT FOOTER BACKGROUND ===================== */
.chat-footer {
  background: var(--st-bg) !important;
}

/* fade gradient above composer */
.chat-footer::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to top, var(--st-bg), transparent);
  pointer-events: none;
}

/* ===================== CHAT STATUS (loading) ===================== */
.chat-status-shell {
  border-radius: 16px !important;
}

/* ===================== CODE BLOCKS ===================== */
.cmsg.pre,
.cmsg pre {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: 12px !important;
}

/* ===================== PROFILE BUTTON ===================== */
.profile-btn {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  border-radius: 50% !important;
  color: var(--st-text) !important;
}

.profile-btn:hover {
  background: var(--st-ghost) !important;
}

/* ===================== TOPBAR PILL — LIGHT SURFACE ===================== */
.topbar-pill > button {
  color: var(--st-text) !important;
}
.topbar-pill > button:hover {
  background: var(--st-ghost) !important;
}

/* Legacy color rules cho .agent-toggle / .chart-toggle đã bỏ —
   thiết kế mới (.agent-switch) tự quản lý màu chữ trong từng phần tử con. */

/* ===================== SCROLL BUTTON ===================== */
.chat-scrolltop-btn {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}

/* ===================== POPOVER / MENUS ===================== */
.chat-agent-popover,
.chat-template-menu,
.profile-menu {
  background: var(--st-card) !important;
  border: 1px solid var(--st-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.chat-agent-menu-item:hover,
.profile-item:hover {
  background: var(--st-ghost) !important;
}

/* ===================== HISTORY ITEMS ===================== */
.wi-hist__item,
.chat-history-item {
  border-radius: 8px !important;
  color: var(--st-nav-text) !important;
}

.wi-hist__item:hover,
.chat-history-item:hover {
  background: var(--st-nav-hover-bg) !important;
  color: var(--st-text) !important;
}

.wi-hist__item.is-active,
.chat-history-item.active {
  background: var(--st-nav-active-bg) !important;
  color: var(--st-nav-active-text) !important;
}

/* ===================== RESPONSIVE — Sidebar width sync ===================== */
body.use-side-nav #sideNav {
  width: 260px !important;
}

body.use-side-nav.nav-open main.page {
  margin-left: 260px !important;
  width: calc(100% - 260px) !important;
}

/* ===================== SCROLLBAR STYLING ===================== */
.side-nav::-webkit-scrollbar { width: 4px; }
.side-nav::-webkit-scrollbar-thumb {
  background: var(--st-border);
  border-radius: 4px;
}
.side-nav::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   STITCH: ẨN SEARCH + FILTER TRONG CHAT HISTORY TOOLBAR
   Ẩn bằng CSS, JS vẫn render nhưng không hiện ra giao diện
   ===================================================================== */
.wi-hist__search,
.wi-hist__sort {
  display: none !important;
}

/* Thu gọn toolbar nếu không còn con nào hiện */
.wi-hist__toolbar:empty,
.wi-hist__toolbar:not(:has(:not(.wi-hist__search):not(.wi-hist__sort))) {
  display: none !important;
}

/* #quikAiHeaderOverlay — giữ nguyên thiết kế gốc, không override */

/* ===== Ẩn hoàn toàn Model AI selector — chỉ giữ RAG =====
   User yêu cầu: bỏ model selector, mặc định dùng model tốt nhất cho RAG (gpt-4.1).
   #quikAiHeaderOverlay vẫn giữ nguyên cho RAG selector. */
.qa-model-wrap,
.qa-model-group,
label.ctrl-model.qa-model-bar,
#chatModelSelect,
#chatModelCustom,
#chatModelEdit,
#chatModelHelp,
.qa-model-select,
.qa-model-bar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Loại bỏ panel chứa model selector trong header overlay nếu rỗng sau khi ẩn */
#quikAiHeaderOverlay .qa-overlay-panel:has(.qa-model-wrap):not(:has(.qa-rag-wrap, .qa-rag-bar, .qa-rag-group)) {
  display: none !important;
}




/* ===========================================================
   Mei RAG — Custom popover dropdown (portal-rendered, compact)
   Small floating window anchored under trigger with arrow.
   =========================================================== */

/* Hide model panel; keep only RAG */
.qa-model-panel { display: none !important; }
.chat-head-bar { display: block !important; width: 100% !important; }

.qa-rag-panel {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.qa-rag-panel .qa-panel-head { display: none !important; }
.qa-rag-panel .qa-panel-body,
.qa-rag-panel .qa-rag-bar,
.qa-rag-panel .chat-rag-picker { width: 100% !important; }
.qa-rag-panel .chat-rag-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Hide native <select>s (functional but visually hidden) */
.qa-rag-panel .mei-native-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;
  pointer-events: none !important;
  opacity: 0 !important;
}

.mei-rag {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Legacy trigger pill — replaced by inline panel; force-hide stale instances. */
.mei-rag-trigger,
.mei-rag-portal,
.mei-rag-popover { display: none !important; }

/* Chat Mode is contract-RAG only. Keep the source panel visible as a locked
   status, but remove all picker affordances that used to route other folders. */
.chat-rag-controls[data-chat-rag-fixed="contract"] .mei-rag-panel {
  pointer-events: none !important;
}

.chat-rag-controls[data-chat-rag-fixed="contract"] .mei-rag-panel-refresh,
.chat-rag-controls[data-chat-rag-fixed="contract"] .mei-rag-section[data-mei-section="mode"],
.chat-rag-controls[data-chat-rag-fixed="contract"] .mei-rag-section[data-mei-section="file"] {
  display: none !important;
}

.chat-rag-controls[data-chat-rag-fixed="contract"] .mei-rag-panel-title span:last-child::after {
  content: " · Hợp đồng VINATTI" !important;
}

/* ─── Inline RAG Panel (always-visible, no trigger button) ─── */
.mei-rag-panel {
  background: #ffffff !important;
  border: 1px solid var(--st-border, #e6ebf3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  width: 100% !important;
}

.mei-rag-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 9px 12px 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.mei-rag-panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.mei-rag-panel-title-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
.mei-rag-panel-refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid var(--st-border, #e6ebf3) !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.3s ease !important;
}
.mei-rag-panel-refresh:hover {
  background: var(--st-primary, #3b82f6) !important;
  border-color: var(--st-primary, #3b82f6) !important;
  color: #ffffff !important;
}
.mei-rag-panel-refresh:active { transform: rotate(180deg) !important; }

.mei-rag-panel-body {
  padding: 6px 8px 8px !important;
}

/* Dark mode — panel */
html[data-theme="dark"] .mei-rag-panel,
html.theme-dark .mei-rag-panel {
  background: #0f172a !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .mei-rag-panel-head,
html.theme-dark .mei-rag-panel-head { border-color: #1e293b !important; }
html[data-theme="dark"] .mei-rag-panel-title,
html.theme-dark .mei-rag-panel-title { color: #f1f5f9 !important; }
html[data-theme="dark"] .mei-rag-panel-refresh,
html.theme-dark .mei-rag-panel-refresh {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

.mei-rag-section {
  padding: 8px 4px !important;
}
.mei-rag-section + .mei-rag-section {
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 2px !important;
}
.mei-rag-section-eyebrow {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: #94a3b8 !important;
  padding: 0 4px 6px !important;
}

/* Mode grid (2 cards) */
.mei-rag-mode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
@media (max-width: 480px) {
  .mei-rag-mode-grid { grid-template-columns: 1fr !important; }
}
.mei-rag-mode-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.12s ease !important;
  will-change: transform !important;
  min-width: 0 !important;
}
.mei-rag-mode-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.mei-rag-mode-card:active {
  transform: scale(0.96) !important;
}
.mei-rag-mode-card.is-active {
  background: #eff6ff !important;
  border-color: var(--st-primary, #3b82f6) !important;
}
.mei-rag-mode-card-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}
.mei-rag-mode-card-ic svg { width: 14px !important; height: 14px !important; }
.mei-rag-mode-card.is-active .mei-rag-mode-card-ic {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.mei-rag-mode-card-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.3 !important;
}
.mei-rag-mode-card-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}
.mei-rag-mode-card-desc {
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mei-rag-mode-card-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--st-primary, #3b82f6) !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.mei-rag-mode-card-check svg { width: 10px !important; height: 10px !important; }
.mei-rag-mode-card.is-active .mei-rag-mode-card-check {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* List rows */
.mei-rag-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
}
.mei-rag-row {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
  width: 100% !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.1s ease !important;
  will-change: transform !important;
}
.mei-rag-row:hover {
  background: #f1f5f9 !important;
}
.mei-rag-row:active {
  transform: scale(0.98) !important;
}
.mei-rag-row.is-active {
  background: #eff6ff !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}
.mei-rag-row-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}
.mei-rag-row.is-active .mei-rag-row-ic { color: var(--st-primary, #3b82f6) !important; }
.mei-rag-row-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mei-rag-row.is-active .mei-rag-row-label {
  color: var(--st-primary, #3b82f6) !important;
  font-weight: 600 !important;
}
.mei-rag-row-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--st-primary, #3b82f6) !important;
  flex-shrink: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.12s ease !important;
}
.mei-rag-row.is-active .mei-rag-row-check { opacity: 1 !important; }

.mei-rag-empty {
  padding: 12px 10px !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  text-align: center !important;
  font-style: italic !important;
}

/* Custom scrollbar */
.mei-rag-list::-webkit-scrollbar { width: 6px !important; }
.mei-rag-list::-webkit-scrollbar-track { background: transparent !important; }
.mei-rag-list::-webkit-scrollbar-thumb {
  background: #e2e8f0 !important;
  border-radius: 999px !important;
}
.mei-rag-list::-webkit-scrollbar-thumb:hover { background: #cbd5e1 !important; }

#quikAiHeaderOverlay .qa-overlay-panel { padding: 8px 12px !important; }

/* Dark mode */
html[data-theme="dark"] .mei-rag-section + .mei-rag-section,
html.theme-dark .mei-rag-section + .mei-rag-section { border-color: #1e293b !important; }
html[data-theme="dark"] .mei-rag-mode-card,
html.theme-dark .mei-rag-mode-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .mei-rag-mode-card:hover,
html.theme-dark .mei-rag-mode-card:hover {
  background: #273548 !important;
  border-color: #475569 !important;
}
html[data-theme="dark"] .mei-rag-mode-card.is-active,
html.theme-dark .mei-rag-mode-card.is-active {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: var(--st-primary, #3b82f6) !important;
}
html[data-theme="dark"] .mei-rag-mode-card-ic,
html.theme-dark .mei-rag-mode-card-ic {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .mei-rag-mode-card-label,
html.theme-dark .mei-rag-mode-card-label { color: #f1f5f9 !important; }
html[data-theme="dark"] .mei-rag-row:hover,
html.theme-dark .mei-rag-row:hover { background: #1e293b !important; }
html[data-theme="dark"] .mei-rag-row.is-active,
html.theme-dark .mei-rag-row.is-active {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}
html[data-theme="dark"] .mei-rag-row-label,
html.theme-dark .mei-rag-row-label { color: #cbd5e1 !important; }

/* =====================================================================
   SMART SEARCH (sidebar) — thanh tìm kiếm dưới các tab + suggestions
   ===================================================================== */
.side-nav .wi-smart-search {
  position: relative;
  padding: 10px 12px 10px;
  flex-shrink: 0;
  z-index: 5;
}

.side-nav .wi-smart-search .stitch-nav-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.side-nav .wi-smart-search .stitch-nav-search-input {
  font-size: 13px;
  padding: 8px 32px 8px 32px;
  border-radius: 10px;
  background: var(--st-card, #ffffff);
  border: 1px solid var(--st-border, #e6ebf3);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.side-nav .wi-smart-search .stitch-nav-search-input:hover {
  border-color: #c7d2fe;
}

.side-nav .wi-smart-search.is-active .stitch-nav-search-input,
.side-nav .wi-smart-search .stitch-nav-search-input:focus {
  border-color: var(--st-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.side-nav .wi-smart-search .stitch-nav-search-ic {
  font-size: 18px;
  left: 9px;
}

.stitch-nav-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--st-muted, #64748b);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.stitch-nav-search-clear:hover {
  background: rgba(100, 116, 139, .12);
  color: var(--st-text, #0f172a);
}
.stitch-nav-search-clear .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* ----- Suggestions dropdown ----- */
.wi-smart-search__suggest {
  position: absolute;
  top: calc(100% - 4px);
  left: 12px;
  right: 12px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--st-card, #ffffff);
  border: 1px solid var(--st-border, #e6ebf3);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);
  padding: 6px;
  z-index: 50;
  animation: wiSmartSuggestIn .12s ease-out;
}

@keyframes wiSmartSuggestIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wi-smart-search__suggest::-webkit-scrollbar { width: 6px; }
.wi-smart-search__suggest::-webkit-scrollbar-track { background: transparent; }
.wi-smart-search__suggest::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 999px;
}
.wi-smart-search__suggest::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

.wi-smart-search__group-label {
  padding: 6px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-nav-section, #94a3b8);
}

.wi-smart-search__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--st-text, #0f172a);
  font: inherit;
  transition: background .12s;
}

.wi-smart-search__item + .wi-smart-search__item { margin-top: 1px; }

.wi-smart-search__item:hover,
.wi-smart-search__item.is-active {
  background: var(--st-nav-active-bg, rgba(59, 130, 246, .08));
}

.wi-smart-search__item-ic {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--st-ghost, #e9eef8);
  color: var(--st-primary, #3b82f6);
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

.wi-smart-search__item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.wi-smart-search__item-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--st-text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wi-smart-search__item-snippet {
  font-size: 12px;
  line-height: 1.45;
  color: var(--st-muted, #64748b);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.wi-smart-search__hl {
  background: #fef3c7;
  color: #78350f;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}

.wi-smart-search__empty {
  padding: 12px 12px;
  font-size: 12.5px;
  color: var(--st-muted, #64748b);
  text-align: center;
  font-style: italic;
}

/* ----- Dark mode ----- */
html[data-theme="dark"] .side-nav .wi-smart-search .stitch-nav-search-input,
html.theme-dark .side-nav .wi-smart-search .stitch-nav-search-input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #f1f5f9;
}
html[data-theme="dark"] .side-nav .wi-smart-search .stitch-nav-search-input:hover,
html.theme-dark .side-nav .wi-smart-search .stitch-nav-search-input:hover {
  border-color: rgba(147, 197, 253, .35);
}
html[data-theme="dark"] .side-nav .wi-smart-search.is-active .stitch-nav-search-input,
html[data-theme="dark"] .side-nav .wi-smart-search .stitch-nav-search-input:focus,
html.theme-dark .side-nav .wi-smart-search.is-active .stitch-nav-search-input,
html.theme-dark .side-nav .wi-smart-search .stitch-nav-search-input:focus {
  border-color: rgba(147, 197, 253, .9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}

html[data-theme="dark"] .wi-smart-search__suggest,
html.theme-dark .wi-smart-search__suggest {
  background: #0f172a;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .wi-smart-search__group-label,
html.theme-dark .wi-smart-search__group-label {
  color: #94a3b8;
}
html[data-theme="dark"] .wi-smart-search__item,
html.theme-dark .wi-smart-search__item { color: #e2e8f0; }
html[data-theme="dark"] .wi-smart-search__item:hover,
html[data-theme="dark"] .wi-smart-search__item.is-active,
html.theme-dark .wi-smart-search__item:hover,
html.theme-dark .wi-smart-search__item.is-active {
  background: rgba(59, 130, 246, .14);
}
html[data-theme="dark"] .wi-smart-search__item-ic,
html.theme-dark .wi-smart-search__item-ic {
  background: rgba(255, 255, 255, .06);
  color: #93c5fd;
}
html[data-theme="dark"] .wi-smart-search__item-title,
html.theme-dark .wi-smart-search__item-title { color: #f1f5f9; }
html[data-theme="dark"] .wi-smart-search__item-snippet,
html.theme-dark .wi-smart-search__item-snippet { color: #94a3b8; }
html[data-theme="dark"] .wi-smart-search__hl,
html.theme-dark .wi-smart-search__hl {
  background: rgba(252, 211, 77, .25);
  color: #fde68a;
}
html[data-theme="dark"] .wi-smart-search__empty,
html.theme-dark .wi-smart-search__empty { color: #94a3b8; }
html[data-theme="dark"] .stitch-nav-search-clear,
html.theme-dark .stitch-nav-search-clear { color: #94a3b8; }
html[data-theme="dark"] .stitch-nav-search-clear:hover,
html.theme-dark .stitch-nav-search-clear:hover {
  background: rgba(255, 255, 255, .08);
  color: #f1f5f9;
}

/* =====================================================================
   ASSISTANT BUBBLE — CENTER ALIGNED (Claude-style)
   Mei (assistant) luôn được căn giữa trong vùng đọc, max-width đồng nhất
   với composer/thread giống cách Claude trình bày tin nhắn.
   ===================================================================== */

/* Thread: cố định cột nội dung centered */
.thread {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Assistant message: căn giữa tuyệt đối, không cố định align-self khác nhau */
.cmsg.assistant {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 768px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Body của assistant: vẫn full chiều ngang container đã căn giữa */
.cmsg.assistant .body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Head/tail (tên + actions) cũng nằm trong cùng cột centered */
.cmsg.assistant .head,
.cmsg.assistant :is(.tail, .actions, .msg-actions, .cmsg-actions, .assistant-actions, .ai-actions) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* User message: giữ canh phải, nhưng ràng buộc trong CÙNG cột centered
   để bubble user và bubble assistant cùng nằm trên một trục dọc giống Claude */
.cmsg.user {
  align-self: flex-end !important;
  width: 100% !important;
  max-width: 768px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  /* canh bubble bên trong về phải */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* Composer (input) cũng đồng bộ chiều rộng để cảm giác “một cột” như Claude */
.composer {
  max-width: min(820px, calc(100% - 24px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Trên màn hình hẹp (<= 820px) huỷ giới hạn cứng để tận dụng hết bề ngang */
@media (max-width: 820px) {
  .thread,
  .cmsg.assistant,
  .cmsg.user {
    max-width: 100% !important;
  }
  .cmsg.assistant,
  .cmsg.user {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =====================================================================
   MEI MODE SWITCH — clean rebuild, isolated namespace
   HTML: <div .mei-mode-switch[data-mode]>
           <button .mei-mode-switch__btn[data-target="chat"]>Chat</button>
           <button .mei-mode-switch__btn[data-target="agent"]>Agent</button>
         </div>
   States: data-mode = "chat" | "loading" | "agent"
   ===================================================================== */

/* Wrapper — track pill chứa 2 nút */
.mei-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .07);
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
  position: relative;
  isolation: isolate;
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
  line-height: 1;
  vertical-align: middle;
}

/* Mỗi nhãn là 1 button thật, không thumb tách rời — đỡ rối z-index */
.mei-mode-switch__btn {
  /* explicit reset để không kế thừa .btn / browser default */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 56px;
  padding: 0 14px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(15, 23, 42, .55);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .12s ease;
  position: relative;
  z-index: 1;
}
.mei-mode-switch__btn:focus-visible {
  outline: 2px solid rgba(99, 102, 241, .65);
  outline-offset: 2px;
}
.mei-mode-switch__btn:active {
  transform: scale(.96);
}
.mei-mode-switch__btn::before,
.mei-mode-switch__btn::after {
  content: none !important;
  display: none !important;
}

/* ====================================================================
   ACTIVE STATE — đồng bộ 2 nút: cùng màu CAM khi được chọn.
   Dùng selectors theo aria-pressed="true" — JS đã set sẵn theo mode.
   ==================================================================== */

/* Nút đang active (bất kể là Chat hay Agent) — gradient cam đậm */
.mei-mode-switch__btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #fb923c, #f97316 55%, #ea580c);
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(124, 45, 18, .30);
  box-shadow:
    0 0 0 1px rgba(234, 88, 12, .55),
    0 2px 8px rgba(249, 115, 22, .50),
    0 0 12px rgba(251, 146, 60, .40);
}

/* Nút không active — trong suốt, chữ mờ */
.mei-mode-switch__btn[aria-pressed="false"] {
  background: transparent;
  color: rgba(15, 23, 42, .50);
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
}

/* Hover trên nút không active */
.mei-mode-switch__btn[aria-pressed="false"]:hover {
  background: rgba(249, 115, 22, .08);
  color: rgba(15, 23, 42, .85);
}

/* Wrapper: tô cam nhẹ khi có 1 nút đang active (cả "chat", "loading", "agent" đều có active) */
.mei-mode-switch[data-mode="chat"],
.mei-mode-switch[data-mode="agent"] {
  background: rgba(249, 115, 22, .08);
  border-color: rgba(249, 115, 22, .32);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .03),
    0 0 0 3px rgba(249, 115, 22, .10);
}

/* Mode loading: pulse animation lên nút Agent */
.mei-mode-switch[data-mode="loading"] {
  background: rgba(249, 115, 22, .10);
  border-color: rgba(249, 115, 22, .42);
}
.mei-mode-switch[data-mode="loading"] .mei-mode-switch__btn[data-target="agent"] {
  animation: meiModeOrangePulse 1s ease-in-out infinite;
}

/* Animation pulse cam */
@keyframes meiModeOrangePulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(234, 88, 12, .55),
      0 2px 8px rgba(249, 115, 22, .50),
      0 0 12px rgba(251, 146, 60, .40);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(234, 88, 12, .75),
      0 2px 14px rgba(249, 115, 22, .80),
      0 0 20px rgba(251, 146, 60, .60);
  }
}

/* ----- Dark mode ----- */
html[data-theme="dark"] .mei-mode-switch,
html.theme-dark .mei-mode-switch {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .mei-mode-switch[data-mode="chat"],
html[data-theme="dark"] .mei-mode-switch[data-mode="agent"],
html.theme-dark .mei-mode-switch[data-mode="chat"],
html.theme-dark .mei-mode-switch[data-mode="agent"] {
  background: rgba(249, 115, 22, .12);
  border-color: rgba(249, 115, 22, .38);
}
html[data-theme="dark"] .mei-mode-switch__btn[aria-pressed="false"],
html.theme-dark .mei-mode-switch__btn[aria-pressed="false"] {
  color: rgba(226, 232, 240, .55);
}
html[data-theme="dark"] .mei-mode-switch__btn[aria-pressed="false"]:hover,
html.theme-dark .mei-mode-switch__btn[aria-pressed="false"]:hover {
  background: rgba(249, 115, 22, .14);
  color: #f1f5f9;
}

/* prefers-reduced-motion: tắt animation */
@media (prefers-reduced-motion: reduce) {
  .mei-mode-switch[data-mode="loading"] .mei-mode-switch__btn[data-target="agent"] {
    animation: none !important;
  }
}

/* ===================== TOPBAR — TRANSPARENT + LEFT SWITCH ===================== */
.topbar,
.topbar.is-scrolled {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.topbar::after {
  display: none !important;
  content: none !important;
}

.mei-mode-switch {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  z-index: 2;
}

.topbar-left-actions .mei-mode-switch {
  margin-left: 0;
}