/* ===================== BUTTON VARIANT CHO TEST AI ===================== */
/* Chỉ .btn.new là variant dùng cho nút "Tạo mới" trong màn Test AI */

/* ✅ NOTE: --font-sans đã chuyển sang style.css để tránh trùng module */

.btn.new{
  background:linear-gradient(135deg,#a855f7,#ec4899);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(168,85,247,.25);
}
.btn.new:hover{filter:brightness(1.06)}
.btn.new:active{transform:translateY(1px) scale(.99)}


/* ===================== TEST AI — Chat panel (Transparent / No Frame) ===================== */

/* Khung ngoài: Bỏ padding để full màn hình */
.test-ai-pane{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important; /* ✅ Xóa padding bao quanh */
  box-sizing: border-box;
  height: auto !important;
}

/* Card chat: Biến thành trong suốt hoàn toàn, loại bỏ "khung" */
.test-ai-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;

  display: block;
  width: 100%;
  height: auto !important;
  min-height: 500px;
  overflow: visible !important;
  isolation: isolate;
}

/* ==== Preview file đính kèm trong Test AI ==== */
/* ==== Preview biểu mẫu đã chọn (hiển thị như attachment) ==== */
.chat-attach-item.is-template{
    border-style:solid;
    border-color:rgba(129,140,248,.85);
  }
  .chat-attach-item.is-template .chat-attach-thumb{
    background:rgba(99,102,241,.12);
    border:1px solid rgba(129,140,248,.55);
  }
  @media (prefers-color-scheme: light){
    .chat-attach-item.is-template{
      border-color:rgba(99,102,241,.55);
    }
    .chat-attach-item.is-template .chat-attach-thumb{
      background:rgba(99,102,241,.10);
      border-color:rgba(99,102,241,.35);
    }
  }

.chat-attach-preview{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 8px;
}
.chat-attach-preview.hidden{
    display:none;
}
.chat-attach-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(15,23,42,.7);
    border:1px solid rgba(148,163,184,.7);
    font-size:12px;
    max-width:100%;
}
@media (prefers-color-scheme: light){
    .chat-attach-item{
      background:rgba(255,255,255,.9);
      border-color:rgba(148,163,184,.6);
    }
}
.chat-attach-thumb{
    width:32px;
    height:32px;
    border-radius:10px;
    overflow:hidden;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}
.chat-attach-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.chat-attach-meta{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.chat-attach-name{
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:220px;
}
.chat-attach-size{
    font-size:11px;
    opacity:.8;
}
.chat-attach-remove{
    border:none;
    background:transparent;
    color:inherit;
    font-size:14px;
    cursor:pointer;
    padding:0 2px;
    margin-left:4px;
    flex:0 0 auto;
    opacity:.7;
}
.chat-attach-remove:hover{
    opacity:1;
}

/* Chat panel bên trong card: biến thành "viewport" để footer luôn nằm đáy */
#chatPanel.chat{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;

  /* ✅ quan trọng: cho phép vùng thread co giãn + scroll nội bộ */
  flex:1 1 auto;
  min-height:0;

  /* ✅ khóa overflow để thread scroll riêng, footer đứng yên */
  overflow:hidden;

  /* default (JS có thể override theo chiều cao footer) */
  --chat-footer-h: 96px;
}

.chat-agent-runtime{
  margin: 10px auto 0;
  width: min(920px, calc(100% - 24px));
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 14px;
  background: rgba(15,23,42,.58);
  color: #e2e8f0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-agent-runtime-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  flex: 0 0 auto;
}
.chat-agent-runtime-label{
  font-size: 12px;
  font-weight: 800;
}
.chat-agent-runtime-msg{
  margin-top: 2px;
  font-size: 12px;
  opacity: .9;
}
.chat-agent-runtime.is-connecting .chat-agent-runtime-dot{ background: #f59e0b; }
.chat-agent-runtime.is-ready .chat-agent-runtime-dot{ background: #22c55e; }
.chat-agent-runtime.is-error .chat-agent-runtime-dot{ background: #ef4444; }

.chatkit-compare-shell{
  margin: 12px 0 0;
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
.chatkit-compare-shell.hidden{
  display: none !important;
}
.chatkit-compare-card{
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(880px 240px at 12% 0%, rgba(16,185,129,.09), transparent 54%),
    radial-gradient(880px 240px at 88% 0%, rgba(56,189,248,.08), transparent 56%),
    rgba(15,23,42,.56);
  box-shadow: 0 24px 48px rgba(2,6,23,.22);
}
.chatkit-compare-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
}
.chatkit-compare-copy{
  min-width: 0;
}
.chatkit-compare-kicker{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(148,163,184,.88);
}
.chatkit-compare-title{
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  color: #f8fafc;
}
.chatkit-compare-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.55);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chatkit-compare-card[data-chatkit-surface="primary"] .chatkit-compare-chip,
.chatkit-compare-card[data-state="ready"] .chatkit-compare-chip{
  border-color: rgba(16,185,129,.36);
  background: rgba(5,150,105,.18);
  color: #d1fae5;
}
.chatkit-compare-card[data-state="connecting"] .chatkit-compare-chip{
  border-color: rgba(245,158,11,.34);
  background: rgba(245,158,11,.18);
  color: #fef3c7;
}
.chatkit-compare-card[data-state="error"] .chatkit-compare-chip{
  border-color: rgba(248,113,113,.34);
  background: rgba(239,68,68,.16);
  color: #fecaca;
}
.chatkit-compare-note{
  padding: 0 16px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226,232,240,.82);
}
.chatkit-compare-body{
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  padding: 0 10px 10px;
  overflow: hidden;
}

.chatkit-wrap{
  position: relative;
  transition: min-height .22s ease, opacity .22s ease, transform .22s ease, border-color .22s ease;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(16,185,129,.08), transparent 56%),
    radial-gradient(900px 260px at 90% 0%, rgba(56,189,248,.08), transparent 58%),
    rgba(2,6,23,.24);
}
.chatkit-wrap.chatkit-wrap--compact{
  min-height: 120px !important;
  height: auto !important;
}
.chatkit-wrap.chatkit-wrap--awaiting{
  min-height: 88px !important;
  height: auto !important;
  opacity: .97;
  border-color: rgba(16,185,129,.36) !important;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(16,185,129,.16), transparent 56%),
    radial-gradient(900px 260px at 90% 0%, rgba(56,189,248,.15), transparent 58%),
    rgba(2,6,23,.42);
}
.chatkit-wrap.chatkit-wrap--compare{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.16);
}

.chatkit-placeholder{
  min-height: 88px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  place-content: center;
  padding: 10px;
  background: transparent;
}
.chatkit-placeholder-orb{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(148,163,184,.35);
  border-top-color: rgba(16,185,129,.92);
  border-left-color: rgba(56,189,248,.9);
  box-shadow:
    0 0 0 5px rgba(15,23,42,.18),
    0 10px 22px rgba(2,6,23,.34);
  animation: chatkitOrbSpin .9s linear infinite;
}
@keyframes chatkitOrbSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.chat-agent-fallback{
  margin: 12px auto 0;
  width: min(920px, calc(100% - 24px));
  border-radius: 16px;
  border: 1px solid rgba(16,185,129,.35);
  background:
    radial-gradient(900px 280px at 10% 0%, rgba(16,185,129,.16), transparent 55%),
    radial-gradient(900px 280px at 90% 0%, rgba(56,189,248,.14), transparent 58%),
    rgba(2,6,23,.55);
  padding: 14px 14px 12px;
  color: #e2e8f0;
  opacity: 0;
  transform: translateY(8px) scale(.992);
  transition: opacity .2s ease, transform .2s ease;
}
.chat-agent-fallback.hidden{
  display: none !important;
}
.chat-agent-fallback.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chat-agent-fallback-title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}
.chat-agent-fallback-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .9;
}
.chat-agent-fallback-prompts{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chat-agent-fallback-btn{
  appearance: none;
  border: 1px solid rgba(148,163,184,.42);
  border-radius: 12px;
  background: rgba(15,23,42,.58);
  color: #e2e8f0;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
  opacity: .96;
}
.chat-agent-fallback-btn:hover{
  border-color: rgba(16,185,129,.55);
  background: rgba(15,23,42,.78);
}
.chat-agent-fallback-btn:active{
  transform: translateY(1px);
}

.chat-agent-fallback.is-entering .chat-agent-fallback-btn{
  animation: agentPromptIn .28s ease both;
}
.chat-agent-fallback.is-entering .chat-agent-fallback-btn:nth-child(1){ animation-delay: .02s; }
.chat-agent-fallback.is-entering .chat-agent-fallback-btn:nth-child(2){ animation-delay: .05s; }
.chat-agent-fallback.is-entering .chat-agent-fallback-btn:nth-child(3){ animation-delay: .08s; }
.chat-agent-fallback.is-entering .chat-agent-fallback-btn:nth-child(4){ animation-delay: .11s; }

.composer.is-agent-mode{
  border-color: rgba(16,185,129,.45) !important;
  box-shadow:
    0 0 0 1px rgba(16,185,129,.22) inset,
    0 12px 24px rgba(2,6,23,.24);
}

@media (prefers-color-scheme: light){
  .chat-agent-runtime{
    background: rgba(255,255,255,.92);
    color: #0f172a;
    border-color: rgba(15,23,42,.12);
  }
  .chatkit-compare-card{
    border-color: rgba(148,163,184,.22);
    background:
      radial-gradient(880px 240px at 12% 0%, rgba(16,185,129,.10), transparent 54%),
      radial-gradient(880px 240px at 88% 0%, rgba(56,189,248,.09), transparent 56%),
      rgba(255,255,255,.92);
    box-shadow: 0 20px 40px rgba(15,23,42,.10);
  }
  .chatkit-compare-kicker{
    color: rgba(71,85,105,.82);
  }
  .chatkit-compare-title{
    color: #0f172a;
  }
  .chatkit-compare-chip{
    background: rgba(255,255,255,.95);
    border-color: rgba(148,163,184,.38);
    color: #334155;
  }
  .chatkit-compare-card[data-chatkit-surface="primary"] .chatkit-compare-chip,
  .chatkit-compare-card[data-state="ready"] .chatkit-compare-chip{
    background: rgba(236,253,245,.95);
    border-color: rgba(16,185,129,.30);
    color: #166534;
  }
  .chatkit-compare-card[data-state="connecting"] .chatkit-compare-chip{
    background: rgba(255,251,235,.96);
    border-color: rgba(245,158,11,.26);
    color: #92400e;
  }
  .chatkit-compare-card[data-state="error"] .chatkit-compare-chip{
    background: rgba(254,242,242,.95);
    border-color: rgba(239,68,68,.24);
    color: #b91c1c;
  }
  .chatkit-compare-note{
    color: rgba(51,65,85,.80);
  }
  .chatkit-wrap{
    background:
      radial-gradient(900px 260px at 10% 0%, rgba(16,185,129,.10), transparent 56%),
      radial-gradient(900px 260px at 90% 0%, rgba(56,189,248,.10), transparent 58%),
      rgba(255,255,255,.78);
  }
  .chatkit-wrap.chatkit-wrap--awaiting{
    border-color: rgba(16,185,129,.34) !important;
    background:
      radial-gradient(900px 260px at 10% 0%, rgba(16,185,129,.14), transparent 56%),
      radial-gradient(900px 260px at 90% 0%, rgba(56,189,248,.12), transparent 58%),
      rgba(255,255,255,.86);
  }
  .chatkit-placeholder-orb{
    border-color: rgba(148,163,184,.52);
    border-top-color: rgba(5,150,105,.9);
    border-left-color: rgba(14,116,144,.86);
    box-shadow:
      0 0 0 5px rgba(241,245,249,.88),
      0 8px 18px rgba(15,23,42,.12);
  }
  .chat-agent-fallback{
    border-color: rgba(16,185,129,.32);
    background:
      radial-gradient(900px 280px at 10% 0%, rgba(16,185,129,.13), transparent 55%),
      radial-gradient(900px 280px at 90% 0%, rgba(56,189,248,.10), transparent 58%),
      rgba(255,255,255,.94);
    color: #0f172a;
  }
  .chat-agent-fallback-btn{
    background: rgba(255,255,255,.9);
    border-color: rgba(148,163,184,.65);
    color: #0f172a;
  }
  .chat-agent-fallback-btn:hover{
    background: rgba(240,253,250,.92);
    border-color: rgba(16,185,129,.52);
  }
  .composer.is-agent-mode{
    border-color: rgba(16,185,129,.42) !important;
    box-shadow:
      0 0 0 1px rgba(16,185,129,.16) inset,
      0 10px 20px rgba(15,23,42,.12);
  }
}

@media (max-width: 860px){
  .chat-agent-fallback-prompts{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px){
  .chatkit-compare-shell{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .chatkit-compare-card{
    height: auto;
    max-height: none;
  }
}

@keyframes agentPromptIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===================== CONVERSATION BLOCKS (dùng trong Test AI) ===================== */
.role-block{display:flex;flex-direction:column;gap:10px}
.msg{
    padding:8px 12px;
    border-radius:12px;
    width:fit-content;
    max-width:100%;
    color:#fff;
    box-shadow:var(--shadow-soft);
}
.msg.system{background:#3e4d66;color:#eef3ff}
.msg.user{background:#0f5132;border:1px solid #1fa86b;color:#dbffef}
.msg.assistant{background:#5a1a1a;border:1px solid #ef4444;color:#ffe2e2}


/* ===== Thread chat: scroll nội bộ, composer đứng yên như ChatGPT ===== */
/* ✅ Thread: Vùng chứa tin nhắn */
.thread {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  
  /* Thread phải là vùng scroll chính để composer luôn đứng yên */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* ✅ Layout mới: Canh giữa nội dung và tạo khoảng thở 2 bên */
  width: 100%;
  max-width: 900px; /* Giới hạn độ rộng chuẩn đọc */
  margin: 0 auto;   /* Canh giữa màn hình */
  padding: 20px 20px calc(max(var(--chat-footer-h, 132px), 132px) + 24px) 20px; /* Chừa đáy động theo footer/input */
  scroll-padding-bottom: calc(max(var(--chat-footer-h, 132px), 132px) + 24px);
}

/* items trong thread giữ full width container */
.thread > * {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Chat message bubble */
/* Tìm đoạn .cmsg cũ và thay bằng đoạn này */
.cmsg {
  width: 100%; /* Mặc định full width cho AI */
  display: flex; /* Đổi từ grid sang flex để dễ control width */
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 12px 16px; /* Tăng padding chút cho giống Gemini */
  border-radius: 18px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
}
.cmsg .head{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--muted);
    flex-wrap:wrap;
}

/* ===================== ASSISTANT "LOADING-ONLY" — CHỈ HIỆN HEAD PILL ===================== */
.cmsg.assistant.is-loading-only .body,
.cmsg.assistant.is-loading-only .tail{
  display:none !important;   /* ✅ ẩn toàn bộ nội dung + nút */
}

/* Head giữ ổn định chiều cao để không nhảy layout */
.cmsg.assistant .head{
  min-height: 24px;
}

/* Chip luôn inline-flex để loading và tên model chiếm đúng vị trí */
.cmsg.assistant .head .chip{
  display:inline-flex;
  align-items:center;
}

/* Loading pill dùng đúng kích thước/padding của pill tên AI */
.cmsg.assistant .head .chip.is-loading{
  gap:8px;
}

/* Dots trong pill: không đẩy lệch baseline */
.cmsg.assistant .head .chip.is-loading .typing-dots{
  margin-left: 0;
}

/* HIỆU ỨNG CHO TÊN AI */
.cmsg.assistant .head span:first-child{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 9px 3px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;

  /* ✅ gọn khi model dài */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Assistant pill */
.cmsg.assistant .head span:first-child{
    background:
      radial-gradient(circle at 0 0,rgba(219,234,254,.32),transparent 60%),
      linear-gradient(135deg,rgba(79,70,229,.98),rgba(59,130,246,.96),rgba(236,72,153,.98));
    color:#e5e7eb;
    box-shadow:
      0 0 0 1px rgba(191,219,254,.55),
      0 8px 18px rgba(37,99,235,.55);
}
.cmsg.assistant .head span:first-child::before{
    content:"🤖";
    font-size:12px;
}

.cmsg.is-agent-msg.assistant .head span:first-child{
    background:
      radial-gradient(circle at 0 0, rgba(187,247,208,.32), transparent 58%),
      linear-gradient(135deg, rgba(5,150,105,.98), rgba(13,148,136,.96), rgba(14,165,233,.96));
    box-shadow:
      0 0 0 1px rgba(167,243,208,.46),
      0 10px 22px rgba(5,150,105,.32);
}

.cmsg.is-agent-msg.assistant .head span:first-child::before{
    content:"🤖";
    font-size:12px;
    font-weight: 700;
}

.cmsg.is-agent-msg .body{
  position: relative;
}

.agent-msg-result{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(16,185,129,.18);
  background:
    radial-gradient(500px 140px at 0% 0%, rgba(16,185,129,.10), transparent 58%),
    rgba(15,23,42,.38);
}

.agent-msg-result__title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(167,243,208,.92);
}

.agent-msg-result__list{
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.agent-msg-result__item{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226,232,240,.88);
}

.agent-msg-result__error{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(254,202,202,.94);
}

@media (prefers-color-scheme: light){
  .agent-msg-result{
    border-color: rgba(16,185,129,.16);
    background:
      radial-gradient(500px 140px at 0% 0%, rgba(16,185,129,.08), transparent 58%),
      rgba(248,250,252,.94);
  }
  .agent-msg-result__title{
    color: #047857;
  }
  .agent-msg-result__item{
    color: #334155;
  }
  .agent-msg-result__error{
    color: #b91c1c;
  }
}

/* ==================== SỬA ĐỔI: USER BUBBLE CLEAN ==================== */

/* ✅ Đồng bộ: nếu có nơi đang dùng .btn-copy-ic thì nhìn y hệt .msg-act */
.btn-copy-ic{
  width:28px;
  height:28px;
  border-radius:8px;

  border:0;
  background:transparent;
  color:inherit;

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

  cursor:pointer;
  padding:0;
  line-height:0;

  opacity:1;
  transition: background .12s ease, transform .08s ease, opacity .12s ease;
}
.btn-copy-ic:hover{ background: rgba(148,163,184,.18); }
.btn-copy-ic:active{ transform: translateY(1px) scale(.98); }

.btn-copy-ic svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity:.92;
}

@media (prefers-color-scheme: light){
  .btn-copy-ic:hover{ background: rgba(15,23,42,.08); }
}


/* ===================== NEW LOADING UI (IN-THREAD AT ASSISTANT POSITION) ===================== */
/* Thay thế toàn bộ khối code cũ tương ứng tại vị trí này */

/* Wrapper status giờ nằm TRONG #chatThread (như 1 assistant bubble) */
.chat-status{
  position: relative;          /* ✅ không absolute nữa */
  display: flex;
  justify-content: flex-start; /* ✅ canh trái như bubble AI */
  width: 100%;
  z-index: 1;

  /* khớp padding của thread nếu có token */
  padding: 0 var(--chat-pad-x, 12px);
  margin: 12px 0 6px;

  /* không chặn tương tác thread; shell vẫn click được */
  pointer-events: none;

  /* animation nhẹ khi xuất hiện */
  animation: statusAppear .18s ease-out forwards;

  /* Quik AI theme tokens cho loading timeline */
  --qa-status-shell-bg:
    radial-gradient(460px 180px at 0% 0%, rgba(59,130,246,.18), transparent 58%),
    radial-gradient(420px 180px at 100% 0%, rgba(168,85,247,.16), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.92));
  --qa-status-shell-border: rgba(96,165,250,.18);
  --qa-status-shell-shadow:
    0 18px 42px rgba(2,6,23,.34),
    0 0 0 1px rgba(255,255,255,.04) inset;
  --qa-status-body-main: #f8fbff;
  --qa-status-body-sub: #adc0e6;
  --qa-status-activity-bg:
    linear-gradient(180deg, rgba(11,18,32,.64), rgba(11,18,32,.42));
  --qa-status-activity-border: rgba(96,165,250,.14);
  --qa-status-kicker-bg: linear-gradient(135deg, rgba(59,130,246,.18), rgba(168,85,247,.18));
  --qa-status-kicker-border: rgba(129,140,248,.24);
  --qa-status-kicker-ink: #dbeafe;
  --qa-status-current-ink: #f8fbff;
  --qa-status-count-ink: #9fb2d8;
  --qa-status-step-divider: rgba(148,163,184,.10);
  --qa-status-step-idle: rgba(148,163,184,.42);
  --qa-status-step-idle-ring: rgba(15,23,42,.20);
  --qa-status-step-running:
    linear-gradient(135deg, rgba(59,130,246,1), rgba(168,85,247,.96) 62%, rgba(244,114,182,.94));
  --qa-status-step-running-glow: rgba(129,140,248,.24);
  --qa-status-step-running-pulse: rgba(129,140,248,.34);
  --qa-status-step-done: #60a5fa;
  --qa-status-step-done-glow: rgba(96,165,250,.18);
  --qa-status-step-error: #ef4444;
  --qa-status-step-error-glow: rgba(239,68,68,.18);
  --qa-status-step-title: #f8fbff;
  --qa-status-step-detail: #c5d4f2;
  --qa-status-step-chip-bg: rgba(148,163,184,.10);
  --qa-status-step-chip-border: rgba(148,163,184,.14);
  --qa-status-step-chip-ink: #d7e3f8;
  --qa-status-step-running-chip-bg: rgba(59,130,246,.12);
  --qa-status-step-running-chip-border: rgba(129,140,248,.20);
  --qa-status-step-running-chip-ink: #dbeafe;
  --qa-status-step-done-chip-bg: rgba(96,165,250,.12);
  --qa-status-step-done-chip-border: rgba(96,165,250,.20);
  --qa-status-step-done-chip-ink: #dbeafe;
  --qa-status-step-error-chip-bg: rgba(239,68,68,.12);
  --qa-status-step-error-chip-border: rgba(248,113,113,.18);
  --qa-status-step-error-chip-ink: #fecaca;
}

/* Ẩn khi không dùng */
.chat-status.hidden{
  display:none !important;
}

/* Khung pill chứa status (giữ nguyên style “đẹp” của bạn) */
.chat-status-shell{
  pointer-events: auto;        /* ✅ vẫn tương tác được nếu cần */
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px 14px 12px 12px;
  border-radius: 18px;

  /* ✅ cảm giác giống assistant bubble */
  max-width: min(780px, 94vw);

  background: var(--qa-status-shell-bg);
  border:1px solid var(--qa-status-shell-border);
  box-shadow: var(--qa-status-shell-shadow);

  backdrop-filter: blur(8px);
}

.chat-status.is-agent .chat-status-shell{
  background:
    radial-gradient(340px 140px at 0% 0%, rgba(59,130,246,.22), transparent 58%),
    radial-gradient(320px 140px at 100% 0%, rgba(168,85,247,.20), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.97), rgba(11,18,32,.94));
  border-color: rgba(129,140,248,.22);
  box-shadow:
    0 18px 40px rgba(37,99,235,.18),
    0 0 0 1px rgba(129,140,248,.06) inset;
}

/* ✅ LIGHT MODE */
@media (prefers-color-scheme: light){
  .chat-status{
    --qa-status-shell-bg:
      radial-gradient(420px 180px at 0% 0%, rgba(59,130,246,.10), transparent 56%),
      radial-gradient(360px 180px at 100% 0%, rgba(168,85,247,.09), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.96));
    --qa-status-shell-border: rgba(59,130,246,.14);
    --qa-status-shell-shadow:
      0 16px 34px rgba(2,21,80,.10),
      0 2px 4px rgba(15,23,42,.04);
    --qa-status-body-main: #102042;
    --qa-status-body-sub: #5e749d;
    --qa-status-activity-bg:
      linear-gradient(180deg, rgba(245,247,255,.98), rgba(238,243,255,.94));
    --qa-status-activity-border: rgba(99,102,241,.14);
    --qa-status-kicker-bg: linear-gradient(135deg, rgba(59,130,246,.10), rgba(168,85,247,.10));
    --qa-status-kicker-border: rgba(129,140,248,.18);
    --qa-status-kicker-ink: #3347a4;
    --qa-status-current-ink: #102042;
    --qa-status-count-ink: #62759d;
    --qa-status-step-divider: rgba(148,163,184,.14);
    --qa-status-step-idle: rgba(148,163,184,.34);
    --qa-status-step-idle-ring: rgba(255,255,255,.78);
    --qa-status-step-running:
      linear-gradient(135deg, rgba(59,130,246,1), rgba(168,85,247,.94) 62%, rgba(236,72,153,.92));
    --qa-status-step-running-glow: rgba(129,140,248,.18);
    --qa-status-step-running-pulse: rgba(129,140,248,.24);
    --qa-status-step-done: #3b82f6;
    --qa-status-step-done-glow: rgba(59,130,246,.14);
    --qa-status-step-title: #102042;
    --qa-status-step-detail: #62759d;
    --qa-status-step-chip-bg: rgba(226,232,240,.92);
    --qa-status-step-chip-border: rgba(203,213,225,.9);
    --qa-status-step-chip-ink: #475569;
    --qa-status-step-running-chip-bg: rgba(59,130,246,.10);
    --qa-status-step-running-chip-border: rgba(129,140,248,.16);
    --qa-status-step-running-chip-ink: #3347a4;
    --qa-status-step-done-chip-bg: rgba(59,130,246,.10);
    --qa-status-step-done-chip-border: rgba(96,165,250,.18);
    --qa-status-step-done-chip-ink: #1d4ed8;
    --qa-status-step-error-chip-bg: rgba(239,68,68,.08);
    --qa-status-step-error-chip-border: rgba(248,113,113,.18);
    --qa-status-step-error-chip-ink: #b91c1c;
  }
  .chat-status-shell{
    background: var(--qa-status-shell-bg);
    border:1px solid var(--qa-status-shell-border);
    box-shadow: var(--qa-status-shell-shadow);
  }
  .chat-status.is-agent .chat-status-shell{
    background:
      radial-gradient(360px 150px at 0% 0%, rgba(59,130,246,.12), transparent 58%),
      radial-gradient(320px 150px at 100% 0%, rgba(168,85,247,.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,255,.97));
    border-color: rgba(129,140,248,.18);
    box-shadow:
      0 16px 34px rgba(59,130,246,.10),
      0 2px 4px rgba(15,23,42,.05);
  }
  .status-text-main{ color:var(--qa-status-body-main) !important; }
  .status-text-sub{  color:var(--qa-status-body-sub) !important; }
  .status-activity{
    background: var(--qa-status-activity-bg);
    border-color: var(--qa-status-activity-border);
  }
  .status-activity-kicker{
    color:var(--qa-status-kicker-ink);
    background: var(--qa-status-kicker-bg);
    border-color: var(--qa-status-kicker-border);
  }
  .status-activity-current{ color:var(--qa-status-current-ink); }
  .status-activity-count{ color:var(--qa-status-count-ink); }
  .status-step-item + .status-step-item{
    border-top-color: var(--qa-status-step-divider);
  }
  .status-step-title{ color:var(--qa-status-step-title); }
  .status-step-detail{ color:var(--qa-status-step-detail); }
  .status-step-state{
    color:var(--qa-status-step-chip-ink);
    background:var(--qa-status-step-chip-bg);
    border-color:var(--qa-status-step-chip-border);
  }
  .status-step-item.is-running .status-step-state{
    color:var(--qa-status-step-running-chip-ink);
    background: var(--qa-status-step-running-chip-bg);
    border-color: var(--qa-status-step-running-chip-border);
  }
  .status-step-item.is-done .status-step-state{
    color:var(--qa-status-step-done-chip-ink);
    background: var(--qa-status-step-done-chip-bg);
    border-color: var(--qa-status-step-done-chip-border);
  }
  .status-step-item.is-error .status-step-state{
    color:var(--qa-status-step-error-chip-ink);
    background: var(--qa-status-step-error-chip-bg);
    border-color: var(--qa-status-step-error-chip-border);
  }
  .status-face{
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid rgba(129,140,248,.16);
  }
}

/* Avatar xoay vòng */
.status-avatar{
  position:relative;
  width:28px; height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex-shrink:0;
  margin-top:2px;
}

.status-orbit{
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background: conic-gradient(
    from 180deg,
    rgba(59,130,246,0),
    rgba(59,130,246,.92),
    rgba(168,85,247,.88),
    rgba(244,114,182,.88),
    rgba(59,130,246,0)
  );
  animation: status-orbit-spin 1.8s linear infinite;
  opacity:.9;
}

.chat-status.is-agent .status-orbit{
  background: conic-gradient(
    from 180deg,
    rgba(59,130,246,0),
    rgba(59,130,246,.98),
    rgba(168,85,247,.94),
    rgba(244,114,182,.88),
    rgba(59,130,246,0)
  );
}

.status-face{
  position:relative;
  z-index:1;
  width:20px; height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92), rgba(255,255,255,.66) 32%, transparent 52%),
    linear-gradient(135deg, rgba(59,130,246,.96), rgba(168,85,247,.92) 60%, rgba(244,114,182,.88));
  color:#0f172a;
  font-size:13px;
  box-shadow: 0 0 0 2px rgba(15,23,42,.62);
}

.status-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

/* Text status */
.status-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.status-text-main{
  font-size:13px;
  font-weight:700;
  color:var(--qa-status-body-main);
  line-height:1.2;
}
.status-text-sub{
  font-size:11px;
  color:var(--qa-status-body-sub);
  line-height:1.35;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-width:min(60vw, 420px);
}

.status-activity{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  background: var(--qa-status-activity-bg);
  border:1px solid var(--qa-status-activity-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 28px rgba(2,6,23,.12);
}

.status-activity.hidden{
  display:none !important;
}

.status-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}

.status-activity-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--qa-status-kicker-border);
  background: var(--qa-status-kicker-bg);
  color:var(--qa-status-kicker-ink);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.status-activity-current{
  font-size:12px;
  font-weight:700;
  color:var(--qa-status-current-ink);
  line-height:1.3;
}

.status-activity-count{
  font-size:11px;
  color:var(--qa-status-count-ink);
  line-height:1.4;
}

.status-step-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
}

.status-step-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 0;
}

.status-step-item + .status-step-item{
  border-top:1px solid var(--qa-status-step-divider);
}

.status-step-marker{
  position:relative;
  width:14px;
  height:14px;
  border-radius:999px;
  flex:0 0 14px;
  margin-top:3px;
  background: var(--qa-status-step-idle);
  box-shadow: inset 0 0 0 2px var(--qa-status-step-idle-ring);
}

.status-step-item.is-running .status-step-marker{
  background: var(--qa-status-step-running);
  box-shadow: 0 0 0 2px var(--qa-status-step-running-glow);
}

.status-step-item.is-running .status-step-marker::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  border:1px solid var(--qa-status-step-running-pulse);
  animation: status-step-pulse 1.4s ease-out infinite;
}

.status-step-item.is-done .status-step-marker{
  background:var(--qa-status-step-done);
  box-shadow: 0 0 0 2px var(--qa-status-step-done-glow);
}

.status-step-item.is-error .status-step-marker{
  background:var(--qa-status-step-error);
  box-shadow: 0 0 0 2px var(--qa-status-step-error-glow);
}

.status-step-copy{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.status-step-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.status-step-title{
  min-width:0;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  color:var(--qa-status-step-title);
}

.status-step-state{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--qa-status-step-chip-border);
  background: var(--qa-status-step-chip-bg);
  color:var(--qa-status-step-chip-ink);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}

.status-step-item.is-running .status-step-state{
  color:var(--qa-status-step-running-chip-ink);
  background: var(--qa-status-step-running-chip-bg);
  border-color: var(--qa-status-step-running-chip-border);
}

.status-step-item.is-done .status-step-state{
  color:var(--qa-status-step-done-chip-ink);
  background: var(--qa-status-step-done-chip-bg);
  border-color: var(--qa-status-step-done-chip-border);
}

.status-step-item.is-error .status-step-state{
  color:var(--qa-status-step-error-chip-ink);
  background: var(--qa-status-step-error-chip-bg);
  border-color: var(--qa-status-step-error-chip-border);
}

.status-step-detail{
  font-size:11px;
  line-height:1.45;
  color:var(--qa-status-step-detail);
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Typing dots */
.typing-dots{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:2px;
  padding-top:7px;
  align-self:flex-start;
}

.chat-status.is-agent .typing-dots{
  display:none;
}
.typing-dot{
  width:5px; height:5px;
  border-radius:999px;
  background:#38bdf8;
  opacity:.8;
  animation: typing-bounce 1s infinite ease-in-out;
}
.typing-dot:nth-child(2){ animation-delay:.12s; }
.typing-dot:nth-child(3){ animation-delay:.24s; }

/* Keyframes */
@keyframes typing-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.5; }
  40%{ transform:translateY(-4px); opacity:1; background:#fff; }
}
@keyframes status-step-pulse{
  0%{ transform:scale(.9); opacity:.85; }
  100%{ transform:scale(1.2); opacity:0; }
}
@keyframes status-orbit-spin{ to{ transform:rotate(360deg); } }
@keyframes statusAppear{
  from{ opacity:0; transform: translateY(6px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ✅ Action row của User: canh phải + opacity nhẹ */
.cmsg.user .tail{
  opacity: 0.7;
}
.cmsg.user:hover .tail{
  opacity: 1;
}
.cmsg .body{font-size:15px}

/* ✅ Assistant: Giao diện chuẩn Gemini (Text trái, Khung giữa) */
.cmsg.assistant {
  align-self: center; /* Căn giữa khung chat */
  width: 100%; /* Chiếm toàn bộ chiều ngang container 900px */
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 10px !important; /* Padding nhỏ để không dính mép */
  color: inherit;
}

/* Head của assistant: Gemini để icon bên trái, không căn giữa */
.cmsg.assistant .head {
  justify-content: flex-start; /* Đưa icon về bên trái */
  text-align: left;
  margin-bottom: 8px;
  margin-left: -2px; /* Căn chỉnh nhẹ cho thẳng hàng text */
}

/* Body assistant: Full width theo container cha */
.cmsg.assistant .body {
  width: 100%;
  max-width: 100%; 
  margin: 0;
  padding: 0;
}

/* Actions của AI: Căn trái theo nội dung */
.cmsg.assistant :is(.tail, .actions, .msg-actions, .cmsg-actions, .assistant-actions, .ai-actions) {
  max-width: 100%;
  margin: 8px 0 0;
  padding: 0;
  justify-content: flex-start; /* Action nằm bên trái */
}

/* ✅ Nếu có pseudo/overlay bọc nền dưới message (defensive) */
.thread::before,
.thread::after{
  content:none !important;
}

/* ✅ CHỐT: nếu actions đang bị absolute làm lệch cột, ép nó quay về flow */
.cmsg.assistant :is(.tail,.actions,.msg-actions,.cmsg-actions,.assistant-actions,.ai-actions){
  position:static !important;
  inset:auto !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
}

/* shimmer khi streaming */
.cmsg.streaming::after{
    content:"";
    position:absolute;
    right:12px;
    bottom:8px;
    width:26px;
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.7),rgba(255,255,255,.2));
    background-size:200% 100%;
    animation:typing-shimmer 1.2s infinite;
    opacity:.85;
}
@keyframes typing-shimmer{
    0%{background-position:0% 0}
    100%{background-position:200% 0}
}

/* ✅ USER: bubble chỉ bọc .body, còn .tail (copy) nằm ngoài bubble */
.cmsg.user{
  align-self:flex-end;
  margin-left:auto;

  /* ✅ container của user KHÔNG có nền -> actions sẽ “ngoài bubble” */
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;

  /* bỏ padding mặc định của .cmsg để không tạo “khung” quanh body+tail */
  padding:0 !important;

  /* giữ giới hạn độ rộng giống ChatGPT */
  max-width:80%;

  /* ✅ canh phải cả body và tail */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px; /* khoảng cách body <-> tail */
}

/* Bubble thật sự nằm ở .body */
.cmsg.user .body{
  display:inline-block;
  width:fit-content;
  max-width:100%;

  padding:12px 16px;
  border-radius:24px 24px 4px 24px;

  background:#f0f4f9;
  color:#1f1f1f;

  /* nếu bạn muốn “bubble phẳng” đúng như đang set */
  border:none;
  box-shadow:var(--shadow-soft);
  box-sizing:border-box;

  word-break:break-word;
  white-space:pre-wrap;
}

/* Dark mode bubble cho USER */
@media (prefers-color-scheme: dark){
  .cmsg.user .body{
    background:#282a2c;
    color:#e3e3e3;
  }
}

/* ✅ USER: tail luôn ở ngoài bubble, canh phải theo bubble */
.cmsg.user .tail{
  margin:0 !important;
  padding:0 !important;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;

  opacity:.7;
}
.cmsg.user:hover .tail{ opacity:1; }


.cmsg.pre{
    margin:6px 0;
    padding:10px;
    border-radius:12px;
    overflow:auto;
    background:#0b1323;
    border:1px solid var(--border);
    color:#e6ebff;
    font-family:var(--mono);
    font-size:13px;
}
.cmsg code{
    font-family:var(--mono);
    padding:0 4px;
    border:1px solid var(--border);
    border-radius:6px;
    background:rgba(255,255,255,.06);
}

/* ===================== CHATGPT-LIKE COPY ACTION (ICON) — OUTSIDE BUBBLE ===================== */

/* ✅ không cần tail absolute nữa */
.cmsg{
  position:relative;
}

/* ✅ tail đi theo flow, không đè lên text */
.cmsg .tail{
  position:static !important;
  inset:auto !important;

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

  opacity:1;
  pointer-events:auto;
  transform:none;

  margin-top:6px;          /* khoảng cách với body */
  z-index:auto;
}

/* ✅ mặc định: assistant actions nằm dưới, canh trái */
.cmsg.assistant .tail{
  justify-content:flex-start;
}

/* ✅ USER: đặt actions ra ngoài bubble, nằm bên phải bubble (ngoài) */
.cmsg.user{
  position:relative;
}

/* ✅ USER: actions nằm DƯỚI bubble, canh phải theo bubble (giống ChatGPT) */
.cmsg.user .tail{
  position:static !important;
  inset:auto !important;
  transform:none !important;

  /* nằm dưới bubble */
  margin:6px 0 0 !important;
  padding:0 !important;

  display:flex;
  align-items:center;
  justify-content:flex-end; /* ✅ canh phải theo bubble */
  gap:6px;

  opacity:1;
  pointer-events:auto;
}
/* ✅ Icon button kiểu ChatGPT: trong suốt + hover nền nhẹ */
.msg-act{
  width:28px;
  height:28px;
  border-radius:8px;

  border:0;
  background:transparent;
  color:inherit;

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

  cursor:pointer;
  padding:0;
  line-height:0;

  transition: background .12s ease, transform .08s ease, opacity .12s ease;
}
.msg-act:hover{ background: rgba(148,163,184,.18); }
.msg-act:active{ transform: translateY(1px) scale(.98); }

/* SVG kiểu ChatGPT: stroke mảnh, rounded */
.msg-act svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.msg-act.is-copied svg{ opacity:1; }

@media (prefers-color-scheme: light){
  .msg-act:hover{ background: rgba(15,23,42,.08); }
}

/* ===================== GEMINI/CHATGPT STYLE COMPOSER (RESPONSIVE DESKTOP) ===================== */
.composer{
  pointer-events:auto;

  /* ✅ Responsive desktop: co giãn theo viewport, nhưng không vượt quá "đẹp" */
  width: calc(100% - 24px);
  max-width: clamp(820px, 68vw, 1200px);
  margin: 0 auto;

  position:relative;
  display:flex;
  flex-direction:column;
  gap: 8px;

  box-sizing:border-box;

  background:#1e1f20;
  border:1px solid transparent;

  /* ✅ bo góc tự co theo size cửa sổ */
  border-radius: clamp(18px, 2.2vw, 32px);

  /* ✅ padding tự co theo size cửa sổ */
  padding: clamp(8px, 1.2vw, 10px) clamp(10px, 1.6vw, 14px) clamp(10px, 1.4vw, 12px);

  /* ✅ nút/icon tự scale theo desktop resize */
  --cmp-ic:   clamp(34px, 2.6vw, 40px);
  --cmp-send: clamp(36px, 2.8vw, 42px);
  --cmp-ic-gap: clamp(6px, 1vw, 10px);

  /* ✅ textarea max-height tự co theo chiều cao cửa sổ */
  --cmp-ta-max: min(260px, calc(100vh - 260px));

  box-shadow:0 4px 6px rgba(0,0,0,.2);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

@media (prefers-color-scheme: light){
  .composer{
    background:#f0f4f9;
    box-shadow:none;
  }
}

.composer:focus-within{
  background:#282a2c;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  border-color:rgba(255,255,255,.1);
}
@media (prefers-color-scheme: light){
  .composer:focus-within{
    background:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    border-color:#dce3f1;
  }
}

/* ✅ khi cửa sổ hẹp (desktop split), giảm chút “độ dày” cho gọn */
@media (max-width: 980px){
  .composer{
    width: calc(100% - 16px);
    max-width: none;
  }
}

/* Textarea: auto-grow + tự tối ưu khi resize desktop */
.composer textarea{
  resize:none;

  /* ✅ font-size co nhẹ theo viewport nhưng không quá nhỏ */
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.5;

  width:100%;
  display:block;

  min-height:24px;
  max-height: var(--cmp-ta-max, 220px);
  overflow-y:auto;

  background:transparent;
  border:none;
  outline:none;

  color:inherit;
  font-family: var(--font-sans);

  padding: 6px 0 2px;
  margin: 0;

  box-sizing:border-box;

  scrollbar-width:thin;
  scrollbar-color: rgba(148,163,184,0.4) transparent;
}
/* Nút Gửi: Tinh giản, phẳng và hiện đại hơn */
#chatSend {
  /* ✅ ChatGPT-like: gọn 40x40 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;

  display: grid;
  place-items: center;
  border: none;
  outline: none;
  cursor: pointer;

  background: transparent;
  color: #e3e3e3;

  box-shadow: none;

  /* ✅ giữ nút “đứng yên”, không bay */
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover state */
#chatSend:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: none; /* Gemini không bay lên */
}

/* Khi có text hoặc đang active */
#chatSend:not(:disabled) {
  background: #ffffff; /* Dark mode: nền trắng */
  color: #0b1323;      /* Dark mode: icon đen */
}

/* Light mode cho nút gửi */
@media (prefers-color-scheme: light) {
  #chatSend {
    color: #444746;
  }
  #chatSend:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1f1f1f;
  }
  #chatSend:not(:disabled) {
    background: #0b1323; /* Light mode: nền đen */
    color: #ffffff;      /* Light mode: icon trắng */
  }
}

/* Icon bên trong */
#chatSend .send-icon {
  font-size: 20px; /* Icon vừa vặn */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Disabled thật sự: KHÔNG set color cố định nữa (để inherit theo theme),
   chỉ giảm opacity -> hết bị “ngược light/dark”. */
#chatSend:disabled:not(.icon-send-streaming){
  opacity: .38;
  cursor: not-allowed;
  background: transparent;
  /* ✅ quan trọng: không set color ở đây */
}

@media (prefers-color-scheme: light){
  #chatSend:disabled:not(.icon-send-streaming){
    opacity: .45; /* light mode thường cần đậm hơn chút để nhìn rõ */
  }
}

/* ===================== STREAMING / STOP STATE (ACTIVE) ===================== */
/* ✅ STOP bọc đen như ChatGPT */
#chatSend.icon-send-streaming{
  background: #0b1323 !important;   /* 👈 đổi từ rgba(...) sang bọc đen */
  color: #ffffff !important;        /* giữ icon trắng */

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 8px 22px rgba(0,0,0,0.28);

  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Hover của STOP vẫn “active” */
#chatSend.icon-send-streaming:hover{
  background: #111a31 !important;   /* 👈 hover đậm hơn chút, vẫn “bọc đen” */
  color: #ffffff !important;
}

/* Nếu markup cũ còn ::before thì ép rỗng (không dùng emoji STOP) */
#chatSend.icon-send-streaming .send-icon::before{
  content: "" !important;
}

/* ✅ Nếu chỗ khác lỡ set disabled khi streaming, vẫn ép STOP không bị mờ */
#chatSend.icon-send-streaming:disabled{
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* ===================== USER EDIT MODE — WRAP INPUT (CHATGPT-LIKE) ===================== */
.wi-edit-wrap{
  position: relative;
}

/* ✅ Khi vào edit mode: làm composer “khác hẳn” để user nhận biết */
.wi-edit-wrap.is-editing{
  /* giữ form pill của composer nhưng nổi bật viền */
  border-color: rgba(96,165,250,.55) !important;
  box-shadow:
    0 0 0 1px rgba(96,165,250,.35),
    0 10px 26px rgba(37,99,235,.18),
    0 4px 12px rgba(0,0,0,.22);
}

/* Light mode */
@media (prefers-color-scheme: light){
  .wi-edit-wrap.is-editing{
    border-color: rgba(59,130,246,.40) !important;
    box-shadow:
      0 0 0 1px rgba(59,130,246,.22),
      0 12px 28px rgba(37,99,235,.12);
  }
}

/* ✅ Header “Đang chỉnh sửa” phủ trùm khu input, full width trong composer */
.wi-editbar{
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;

  height: 36px;
  display: flex;
  align-items: center;

  /* ✅ X sát bên phải label, không tách hẳn ra */
  justify-content: flex-start;
  gap: 10px;

  padding: 0 12px;

  /* bo góc ăn theo vibe composer */
  border-radius: 14px;

  /* nền/viền nổi bật để tách mode */
  background:
    linear-gradient(180deg, rgba(96,165,250,.18), rgba(96,165,250,.10));
  border: 1px solid rgba(96,165,250,.35);

  color: rgba(227,227,227,.96);
  backdrop-filter: blur(10px);

  z-index: 8;
}

@media (prefers-color-scheme: light){
  .wi-editbar{
    background:
      linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.06));
    border: 1px solid rgba(59,130,246,.22);
    color: rgba(31,31,31,.92);
  }
}

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

/* label */
.wi-editbar__label{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.wi-editbar__label span:last-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* dot */
.wi-editbar__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(147,197,253,.95);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
@media (prefers-color-scheme: light){
  .wi-editbar__dot{
    background: rgba(59,130,246,.75);
    box-shadow: 0 0 0 4px rgba(59,130,246,.10);
  }
}

/* ✅ nút X: nhỏ, tối giản, hoà làm 1 với header */
.wi-editbar__close{
  width: 18px;
  height: 18px;

  border: 0;
  padding: 0;
  margin-left: auto; /* ✅ sát bên phải */

  background: transparent;
  color: inherit;

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

  cursor:pointer;
  opacity: .75;
  transition: opacity .12s ease, transform .08s ease;
}
.wi-editbar__close:hover{ opacity: 1; }
.wi-editbar__close:active{ transform: translateY(1px) scale(.98); }

.wi-editbar__close svg{
  width: 14px;
  height: 14px;
  fill:none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}

/* ✅ Chừa khoảng trên textarea để header không che chữ */
.wi-edit-wrap.is-editing textarea,
.wi-edit-wrap.is-editing #chatInput{
  padding-top: 54px !important; /* đủ chỗ cho header 36px + spacing */
}

/* ✅ (Tuỳ chọn nhưng rất giống ChatGPT): nền input “tách mode” nhẹ */
.wi-edit-wrap.is-editing textarea{
  background: transparent !important; /* composer đã có nền, giữ sạch */
}
/* ===================== END USER EDIT MODE — WRAP INPUT (CHATGPT-LIKE) ===================== */

/* ===================== COMPOSER ICON BUTTONS — SYNC 100% (BOTTOM ROW) ===================== */
/* ✅ Chỉ scope trong composer-left để không ảnh hưởng chỗ khác */
.composer .composer-left :is(button.btn.ghost.icon){
  width: var(--cmp-ic);
  height: var(--cmp-ic);
  border-radius: 999px;
  padding: 0;

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

  /* ✅ đồng bộ “icon pill” */
  background: transparent;
  border: 1px solid rgba(148,163,184,.45);
  color: inherit;

  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}

.composer .composer-left :is(button.btn.ghost.icon):hover{
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.70);
}

.composer .composer-left :is(button.btn.ghost.icon):active{
  transform: translateY(1px) scale(.98);
}

/* ✅ Light mode */
@media (prefers-color-scheme: light){
  .composer .composer-left :is(button.btn.ghost.icon){
    border-color: rgba(15,23,42,.14);
    background: transparent;
  }
  .composer .composer-left :is(button.btn.ghost.icon):hover{
    background: rgba(15,23,42,.06);
    border-color: rgba(15,23,42,.18);
  }
}

/* ✅ SVG icon luôn cùng size */
.composer .composer-left :is(button.btn.ghost.icon) .ic{
  width: 18px;
  height: 18px;
}

/* ✅ @ cũng phải “giống icon” (đang là text nên lệch) */
.composer .composer-left .chat-mention-at{
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;

  font-weight: 850;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-0.5px);

  /* giữ màu/độ nét đồng bộ */
  color: currentColor;
}

.chat-agent-only{
  display: none !important;
}

.chat-agent-composer-shell{
  display: none !important;
  width: 100%;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  box-shadow: none;
}

.chat-agent-composer-head{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

.chat-agent-composer-copy{
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-agent-composer-title{
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  color: #111827;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.chat-agent-mode-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.chat-agent-workspace-summary{
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}

.chat-agent-automation-status{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.chat-agent-automation-status::before{
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #22c55e;
  box-shadow: none;
}

.chat-agent-control-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chat-agent-add-wrap{
  flex: 0 0 auto;
}

.chat-agent-chip,
.chat-agent-add-btn{
  appearance: none;
  height: var(--cmp-ic);
  border-radius: 999px;
  border: 1px solid rgba(203,213,225,.95);
  background: #ffffff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;
  box-shadow: none;
}

.chat-agent-add-btn{
  width: var(--cmp-ic);
  justify-content: center;
  padding: 0;
}

.chat-agent-chip{
  max-width: min(240px, 28vw);
  padding: 0 12px;
}

.chat-agent-chip .ic,
.chat-agent-add-btn .ic{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.chat-agent-chip-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-agent-chip-caret{
  width: 14px !important;
  height: 14px !important;
  opacity: .75;
}

.chat-agent-add-btn:hover,
.chat-agent-chip:hover{
  background: #f8fafc;
  border-color: #94a3b8;
}

.chat-agent-add-btn:active,
.chat-agent-chip:active{
  transform: translateY(1px) scale(.98);
}

.chat-agent-add-btn:disabled,
.chat-agent-chip:disabled{
  opacity: .52;
  cursor: not-allowed;
  transform: none;
}

.chat-agent-add-btn[aria-expanded="true"],
.chat-agent-access-btn[aria-expanded="true"],
.chat-agent-workspace-btn[aria-expanded="true"]{
  border-color: rgba(15,23,42,.34);
  background: #f8fafc;
  box-shadow: 0 0 0 3px rgba(148,163,184,.14);
}

.chat-agent-popover{
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  min-width: 280px;
  max-width: min(340px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 40px rgba(15,23,42,.14);
  z-index: 160;
  backdrop-filter: blur(14px) saturate(140%);
}

.chat-agent-popover.hidden{
  display: none !important;
}

.chat-agent-popover::after{
  content: "";
  position: absolute;
  left: 16px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.98);
  border-right: 1px solid rgba(226,232,240,.92);
  border-bottom: 1px solid rgba(226,232,240,.92);
  transform: rotate(45deg);
}

.chat-agent-access-wrap{
  margin-left: 0;
  flex: 0 1 auto;
}

.chat-agent-workspace-wrap{
  margin-left: 0;
  flex: 0 1 auto;
}

.chat-agent-workspace-wrap .chat-agent-popover{
  left: 0;
  right: auto;
}

.chat-agent-workspace-wrap .chat-agent-popover::after{
  left: 18px;
  right: auto;
}

.chat-agent-access-wrap .chat-agent-popover{
  left: 0;
  right: auto;
}

.chat-agent-access-wrap .chat-agent-popover::after{
  left: 18px;
  right: auto;
}

.chat-agent-voice-btn{
  margin-left: auto;
  flex: 0 0 auto;
}

.chat-agent-menu-item{
  appearance: none;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #0f172a;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}

.chat-agent-menu-item:hover{
  background: #f8fafc;
  border-color: rgba(203,213,225,.92);
}

.chat-agent-menu-item:active{
  transform: translateY(1px);
}

.chat-agent-menu-item:disabled{
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

.chat-agent-menu-item[aria-checked="true"]{
  background: rgba(15,23,42,.04);
  border-color: rgba(148,163,184,.46);
}

.chat-agent-menu-icon{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.chat-agent-menu-copy{
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-agent-menu-title{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.chat-agent-menu-sub{
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.chat-agent-workspace-browser{
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 10px 6px;
  border-top: 1px solid rgba(226,232,240,.92);
}

.chat-agent-workspace-browser-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-agent-workspace-focus{
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(220,252,231,.95);
  color: #166534;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.chat-agent-workspace-tree{
  max-height: min(280px, 38vh);
  overflow: auto;
  padding-right: 2px;
  display: grid;
  gap: 2px;
}

.chat-agent-workspace-tree-empty{
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.chat-agent-workspace-node{
  display: grid;
  gap: 2px;
}

.chat-agent-workspace-entry{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.45;
}

.chat-agent-workspace-entry-icon{
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
}

.chat-agent-workspace-entry-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-agent-workspace-entry.is-dir{
  padding: 4px 8px;
  color: #334155;
  font-weight: 700;
}

.chat-agent-workspace-entry.is-dir.is-focused{
  border-radius: 12px;
  background: rgba(220,252,231,.72);
  color: #166534;
}

.chat-agent-workspace-branch{
  display: grid;
  gap: 2px;
  margin-left: 16px;
  padding-left: 8px;
  border-left: 1px solid rgba(226,232,240,.92);
}

.chat-agent-workspace-entry.is-file{
  appearance: none;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #0f172a;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.chat-agent-workspace-entry.is-file:hover{
  background: #f8fafc;
  border-color: rgba(203,213,225,.92);
}

.chat-agent-workspace-entry.is-file.is-focused{
  background: rgba(220,252,231,.95);
  border-color: rgba(22,163,74,.34);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
  color: #166534;
  font-weight: 800;
}

.chat-agent-access-item[aria-checked="true"] .chat-agent-menu-icon{
  background: #0f172a;
}

.chat-agent-workspace-btn[data-ready="1"]{
  border-color: rgba(16,185,129,.30);
  background: rgba(236,253,245,.95);
  color: #166534;
}

@media (prefers-color-scheme: light){
  .chat-agent-composer-shell{
    background: transparent;
    color: #0f172a;
    box-shadow: none;
  }
  .chat-agent-composer-title{
    color: #0f172a;
  }
  .chat-agent-workspace-summary{
    color: #64748b;
  }
  .chat-agent-mode-pill{
    border-color: rgba(148,163,184,.30);
    background: #ffffff;
    color: #334155;
  }
  .chat-agent-automation-status{
    color: #334155;
  }
  .chat-agent-chip,
  .chat-agent-add-btn{
    border-color: rgba(203,213,225,.95);
    background: #ffffff;
  }
  .chat-agent-chip:hover,
  .chat-agent-add-btn:hover{
    background: #f8fafc;
    border-color: #94a3b8;
  }
}

.composer.is-agent-mode .chat-feature-btn{
  display: none !important;
}

.composer.is-agent-mode .chat-agent-only{
  display: inline-flex !important;
}

.composer.is-agent-mode .chat-agent-composer-shell{
  display: flex !important;
}

.composer.is-agent-mode .composer-toolbar{
  gap: 12px;
  align-items: center;
}

.composer.is-agent-mode .chat-agent-mode-pill{
  display: none !important;
}

.composer.is-agent-mode .chat-agent-workspace-btn[data-ready="1"]{
  border-color: rgba(16,185,129,.36);
  background: rgba(236,253,245,.95);
  color: #166534;
}

@media (max-width: 760px){
  .composer.is-agent-mode .chat-agent-access-wrap{
    margin-left: 0;
  }
  .composer.is-agent-mode .chat-agent-chip{
    max-width: none;
  }
  .composer.is-agent-mode .chat-agent-workspace-btn .chat-agent-chip-label,
  .composer.is-agent-mode .chat-agent-access-btn .chat-agent-chip-label{
    display: none;
  }
  .composer.is-agent-mode .chat-agent-composer-shell{
    padding: 0;
    border-radius: 0;
  }
  .composer.is-agent-mode .chat-agent-chip{
    width: var(--cmp-ic);
    padding: 0;
    justify-content: center;
  }
  .composer.is-agent-mode .chat-agent-chip-caret{
    display: none;
  }
  .composer.is-agent-mode .chat-agent-popover{
    min-width: min(280px, calc(100vw - 24px));
  }
  .composer.is-agent-mode .composer-toolbar{
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* ===================== NOTIF BADGE (SYNC ICON STYLE) ===================== */
.chat-notif-btn{
  position: relative; /* ✅ để badge bám đúng góc nút */
  overflow: visible;
}

/* badge nhỏ gọn kiểu “pill dot” */
.chat-notif-badge{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(38%, -38%);
  transform-origin: 100% 0;

  min-width: 16px;
  height: 16px;
  padding: 0 5px;

  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;

  background: #ef4444;
  color: #fff;

  box-shadow:
    0 0 0 2px rgba(30,31,32,.95),
    0 6px 14px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: light){
  .chat-notif-badge{
    box-shadow:
      0 0 0 2px #f0f4f9,
      0 6px 14px rgba(0,0,0,.12);
  }
}

.chat-notif-badge.hidden{ display:none !important; }

/* ===================== COMPOSER MENTION BUTTON (@) ===================== */
.chat-mention-btn .chat-mention-at{
  font-weight: 850;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.5px);
}

.composer #chatSend{
  width: var(--cmp-send);
  height: var(--cmp-send);
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon size */
.composer .ic { width: 18px; height: 18px; }
.composer #chatSend .ic { width: 20px; height: 20px; }

/* SR only */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Nút icon khác */
/* ✅ Icon SVG đồng bộ cho mọi nút */
.ic{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Nút send to hơn */
#chatSend .ic{
  width:22px;
  height:22px;
}
/* Icon hàng dưới - cụm phải (RESPONSIVE, không absolute để khỏi lệch khi resize) */
.composer .composer-actions{
  position: static;
  display:flex;
  gap: var(--cmp-ic-gap);
  align-items:center;
  justify-content:flex-end;

  /* ✅ cho phép wrap khi cửa sổ hẹp (desktop split view) */
  flex-wrap: wrap;

  margin-top: 6px;
}
.composer-hint{
    grid-column:1 / -1;
    font-size:12px;
    color:var(--muted);
    margin:2px 6px 0;
}

/* Preview file trong composer */
.composer .chat-attach-preview{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:4px 4px 0;
}
.composer .chat-attach-preview.hidden{
    display:none !important;
}
.composer .chat-attach-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border-radius:12px;
    background:rgba(148,163,184,.18);
    border:1px solid rgba(148,163,184,.45);
    max-width:100%;
}
.composer .chat-attach-thumb{
    width:32px;
    height:32px;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    background:rgba(15,23,42,.8);
    color:#e5e7eb;
}
.composer .chat-attach-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.composer .chat-attach-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.composer .chat-attach-name{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.composer .chat-attach-size{
    font-size:11px;
    color:var(--muted);
}
.composer .chat-attach-remove{
    margin-left:auto;
    appearance:none;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:14px;
    padding:4px;
    border-radius:999px;
    color:var(--muted);
}
.composer .chat-attach-remove:hover{
    background:rgba(15,23,42,.12);
}

/* Animation khi kéo-thả file */
.composer.dropping{
    border-color: rgba(96,165,250,.95);
    box-shadow:
      0 0 0 1px rgba(191,219,254,.85),
      0 0 0 6px rgba(59,130,246,.40),
      var(--shadow);
    animation: chatDropPulse 0.9s ease-in-out infinite;
    transition:
      border-color .12s ease-out,
      box-shadow .12s ease-out;
}
.composer.dropping::before{
    content:"Thả file vào đây để đính kèm";
    position:absolute;
    left:50%;
    bottom:100%;
    transform:translate(-50%, -8px);
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    background:rgba(15,23,42,.96);
    color:#e5e7eb;
    box-shadow:0 10px 24px rgba(15,23,42,.85);
    pointer-events:none;
    white-space:nowrap;
    opacity:0;
    animation:chatDropLabel 0.9s ease-in-out infinite;
    z-index:20;
}
@keyframes chatDropPulse{
    0%{
      box-shadow:
        0 0 0 0 rgba(59,130,246,.55),
        var(--shadow);
    }
    60%{
      box-shadow:
        0 0 0 8px rgba(59,130,246,0),
        var(--shadow);
    }
    100%{
      box-shadow:
        0 0 0 0 rgba(59,130,246,0),
        var(--shadow);
    }
}
@keyframes chatDropLabel{
    0%,100%{
      opacity:0;
      transform:translate(-50%, -4px) scale(.98);
    }
    30%,70%{
      opacity:1;
      transform:translate(-50%, -8px) scale(1);
    }
}
@media (prefers-color-scheme: light){
    .composer.dropping{
      border-color: rgba(59,130,246,.95);
      box-shadow:
        0 0 0 1px rgba(59,130,246,.75),
        0 0 0 6px rgba(191,219,254,.9),
        var(--shadow);
    }
    .composer.dropping::before{
      background:#ffffff;
      color:#111827;
      box-shadow:0 10px 24px rgba(15,23,42,.25);
    }
}

/* ===================== IN-THREAD ATTACHMENTS (CHATGPT-LIKE) ===================== */

.msg-attach{
  margin: 0 0 10px; /* ✅ nằm trên text: đẩy xuống dưới nhẹ */
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Image grid */
.msg-attach__imgs{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 720px){
  .msg-attach__imgs.count-1{ grid-template-columns: minmax(0, 420px); }
  .msg-attach__imgs.count-2{ grid-template-columns: repeat(2, minmax(0, 320px)); }
  .msg-attach__imgs.count-3,
  .msg-attach__imgs.count-4{ grid-template-columns: repeat(2, minmax(0, 320px)); }
}

.msg-attach__img{
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.msg-attach__img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 16 / 10;
  background: rgba(15,23,42,.25);
}
.msg-attach__img:hover img{ filter: brightness(1.03); }

.msg-attach__more{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight:800;
  font-size:22px;
}

/* Files */
.msg-attach__files{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.msg-file{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;

  background: rgba(148,163,184,.14);
  border:1px solid rgba(148,163,184,.35);
  color: inherit;

  max-width: min(520px, 100%);
}
.msg-file:hover{
  background: rgba(148,163,184,.20);
}

.msg-file__ic{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;

  background: rgba(15,23,42,.85);
  color: #e5e7eb;
}
.msg-file__ic svg{
  width:18px;
  height:18px;
  fill:none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-color-scheme: light){
  .msg-file{
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.10);
  }
  .msg-file:hover{ background: rgba(15,23,42,.06); }
  .msg-file__ic{
    background: rgba(15,23,42,.08);
    color:#0f172a;
  }
}

.msg-file__meta{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}
.msg-file__name{
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msg-file__size{
  font-size:11px;
  opacity:.75;
}

/* ===================== LIGHTBOX (CHATGPT-LIKE) ===================== */
.wi-lightbox.hidden{ display:none !important; }

.wi-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
}

.wi-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
}

.wi-lightbox__shell{
  position:absolute;
  inset: 40px 16px;
  display:grid;
  place-items:center;
}

@media (min-width: 860px){
  .wi-lightbox__shell{ inset: 36px 36px; }
}

.wi-lightbox__img{
  max-width: min(980px, 92vw);
  max-height: min(72vh, 820px);
  width:auto;
  height:auto;
  border-radius:18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  background: rgba(255,255,255,.06);
}

.wi-lightbox__close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.wi-lightbox__close:hover{ background: rgba(0,0,0,.5); }
.wi-lightbox__close svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

.wi-lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.wi-lightbox__nav:hover{ background: rgba(0,0,0,.5); }
.wi-lightbox__nav:disabled{ opacity:.35; cursor:not-allowed; }
.wi-lightbox__nav svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.wi-lightbox__nav--prev{ left: 10px; }
.wi-lightbox__nav--next{ right: 10px; }

.wi-lightbox__meta{
  position:absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  max-width: min(92vw, 980px);
}
.wi-lightbox__name{
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 60vw;
}
.wi-lightbox__count{
  font-size:12px;
  opacity:.85;
}

/* ===================== END IN-THREAD ATTACHMENTS ===================== */

/* ===================== WI @MENTION DROPDOWN (UNIFIED • FLAT • THEME-SAFE) ===================== */
/* ✅ Chỉ giữ 1 khối mention duy nhất để tránh bị “đè” style */

.wi-mention-box{
  /* theme tokens */
  --m-bg: rgba(15, 23, 42, .92);
  --m-bd: rgba(148, 163, 184, .22);
  --m-tx: rgba(226, 232, 240, .96);
  --m-sub: rgba(226, 232, 240, .72);
  --m-hover: rgba(148, 163, 184, .10);
  --m-active: rgba(96, 165, 250, .14);
  --m-shadow: 0 18px 44px rgba(0,0,0,.38);

  /* layout */
  position: fixed;
  z-index: 120;
  width: min(560px, calc(100vw - 16px));
  max-height: min(340px, 55vh);
  overflow: auto;
  padding: 8px;

  background: var(--m-bg);
  border: 1px solid var(--m-bd);
  border-radius: 14px;
  box-shadow: var(--m-shadow);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  /* ✅ nằm “đẹp” sát input: JS set top/left; CSS tạo khoảng thở */
  margin-top: 8px;

  /* ✅ Animation mượt nhưng không đụng translate placement */
  transform-origin: 50% 100%;
  will-change: opacity, scale, filter;

  /* dùng individual transform properties */
  scale: 1;

  /* mượt hơn, không “giật” */
  animation: wiMentionIn .16s cubic-bezier(.2,.9,.2,1) both;
}

/* hidden */
.wi-mention-box.hidden{ display:none !important; }

.wi-mention-box[data-placement="top"]{
  translate: 0 -100%;
}
.wi-mention-box[data-placement="bottom"]{
  translate: 0 0;
  transform-origin: 50% 0%;
}

/* ✅ FIX: Tắt hoàn toàn mũi tên (pseudo arrow) để không đè lên text */
.wi-mention-box::after{
  content: none !important;
  display: none !important;
}
.wi-mention-box[data-placement="bottom"]::after{
  content: none !important;
  display: none !important;
}

/* Scrollbar: rõ vừa đủ, phẳng */
.wi-mention-box{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}
.wi-mention-box::-webkit-scrollbar{ width: 10px; }
.wi-mention-box::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.26);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.wi-mention-box::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.36);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Header mini (nếu bạn có render) */
.wi-mention-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 6px 10px;
  margin: 2px 0 6px;

  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(2,6,23,.18);

  color: rgba(226,232,240,.78);
  font-size: 12px;
  user-select:none;
}
.wi-mention-hd-right{
  opacity:.75;
  white-space:nowrap;
}

/* Row: tối giản + phẳng */
.wi-mention-row{
  display:flex;
  align-items:stretch;
  gap:8px;

  padding: 6px;
  border-radius: 12px;
}
.wi-mention-row + .wi-mention-row{ margin-top: 2px; }

.wi-mention-row:hover{ background: var(--m-hover); }
.wi-mention-row.is-active{
  background: var(--m-active);
  outline: 1px solid rgba(147,197,253,.28);
}

/* Main: không “card con”, chỉ text sạch */
.wi-mention-main{
  flex:1 1 auto;
  min-width:0;

  border:0;
  background:transparent;
  color: var(--m-tx);

  text-align:left;
  cursor:pointer;

  padding: 8px 10px;
  border-radius: 10px;
}
.wi-mention-main:focus{ outline:none; }
.wi-mention-main:focus-visible{
  outline: 2px solid rgba(147,197,253,.38);
  outline-offset: 1px;
}

.wi-mention-main .l1{
  font-weight: 750;
  font-size: 13px;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wi-mention-main .l2{
  margin-top: 2px;
  font-size: 12px;
  color: var(--m-sub);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions: chip phẳng + nhỏ gọn */
.wi-mention-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;

  padding: 6px 4px 6px 0;
}
.wi-mention-act{
  appearance:none;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.18);
  color: rgba(226,232,240,.92);

  border-radius: 999px;
  padding: 6px 10px;

  font-size: 12px;
  line-height: 1;

  cursor:pointer;
  user-select:none;

  transition: background .12s ease, border-color .12s ease, transform .08s ease, opacity .12s ease;
}
.wi-mention-act:hover{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.28);
}
.wi-mention-act:active{ transform: translateY(1px); }
.wi-mention-act:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(147,197,253,.20);
  border-color: rgba(147,197,253,.30);
}
.wi-mention-act:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* Nhấn màu rất nhẹ theo loại (vẫn “phẳng”) */
.wi-mention-act.is-req{   border-color: rgba(239,68,68,.20); }
.wi-mention-act.is-guide{ border-color: rgba(59,130,246,.22); }
.wi-mention-act.is-remind{border-color: rgba(34,197,94,.22); }

/* Mobile: row xuống dòng cho dễ bấm */
@media (max-width:520px){
  .wi-mention-row{ flex-direction:column; }
  .wi-mention-actions{
    justify-content:flex-start;
    padding: 0 6px 6px;
    flex-wrap:wrap;
  }
}

/* Light mode override: sáng rõ, tương phản tốt */
@media (prefers-color-scheme: light){
  .wi-mention-box{
    --m-bg: rgba(255,255,255,.96);
    --m-bd: rgba(15,23,42,.10);
    --m-tx: rgba(15,23,42,.92);
    --m-sub: rgba(15,23,42,.62);
    --m-hover: rgba(15,23,42,.05);
    --m-active: rgba(96,165,250,.12);
    --m-shadow: 0 18px 44px rgba(2,6,23,.12);
  }

  .wi-mention-hd{
    background: rgba(15,23,42,.03);
    border-color: rgba(15,23,42,.08);
    color: rgba(15,23,42,.70);
  }

  .wi-mention-act{
    background: rgba(255,255,255,.70);
    border-color: rgba(15,23,42,.10);
    color: rgba(15,23,42,.82);
  }
  .wi-mention-act:hover{
    background: rgba(15,23,42,.06);
    border-color: rgba(15,23,42,.16);
  }
}

@keyframes wiMentionIn{
  from{
    opacity: 0;
    scale: .985;
    filter: blur(1.6px);
  }
  to{
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
}

/* ✅ Tôn trọng người dùng bật giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .wi-mention-box{ animation: none !important; }
}
/* ===================== END WI @MENTION DROPDOWN ===================== */
 
/* ===================== WI NOTIF KIND BADGE ===================== */
.wi-notif-kind{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* ✅ giảm nhẹ để vừa cột trái 96px */
  padding:6px 8px;

  border-radius:999px;

  font-size:12.5px;
  font-weight:950;
  letter-spacing:.01em;
  white-space:nowrap;

  /* ✅ không cho pill vượt khung kindcol */
  max-width:100%;
  box-sizing:border-box;

  border:1px solid rgba(148,163,184,.72);
  background:rgba(15,23,42,.78);

  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  -webkit-font-smoothing:antialiased;
}
 
/* ===================== CHAT NOTIF BELL (Composer right) ===================== */
/* ✅ CHỈ GIỮ position:relative để badge bám góc — còn lại để nút đồng bộ .btn.ghost.icon */
.chat-notif-btn{
  position: relative; /* ✅ để badge bám đúng góc nút */
  overflow: visible;
  /* ❌ bỏ toàn bộ style riêng (background/box-shadow/size) để ăn theo pill icon chung */
}

/* (emoji cũ không dùng nữa) */
.chat-notif-ic{ display:none !important; }

/* Badge: giữ nguyên (nếu bạn muốn bám "trong góc" giống các nút khác) */
.chat-notif-badge{
  position:absolute;
  top: 0;
  right: 0;
  transform: translate(38%, -38%);
  transform-origin: 100% 0;

  min-width:16px;
  height:16px;
  padding:0 5px;

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

  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.01em;

  color:#fff;
  background:rgba(239,68,68,.95);

  /* ✅ giữ viền tách nền */
  box-shadow:
    0 0 0 2px rgba(30,31,32,.95),
    0 6px 14px rgba(0,0,0,.25);

  z-index:5;
  pointer-events:none;
}
.chat-notif-badge.hidden{ display:none !important; }

@media (prefers-color-scheme: light){
  .chat-notif-badge{
    box-shadow:
      0 0 0 2px #f0f4f9,
      0 6px 14px rgba(0,0,0,.12);
  }
}

/* ===================== CHAT SCROLL TOP (Footer actions) ===================== */
/* ✅ Scroll-to-bottom: đặt CHÍNH GIỮA, neo FIXED phía trên composer/input như ChatGPT */

#chatPanel{
  /* JS sẽ set biến này theo chiều cao footer */
  --chat-footer-h: 88px;
}

.chat-footer-actions{
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);

  /* ✅ FIX: không “lẹm” vào input nếu --chat-footer-h bị nhỏ
     - max(..., 120px) = đảm bảo tối thiểu cao hơn composer thực tế
     - + 10px = khoảng cách nhỏ gọn, vừa đủ để đọc text */
  bottom: calc(max(var(--chat-footer-h, 88px), 120px) + 10px + env(safe-area-inset-bottom, 0px));

  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  margin: 0;
  width: auto;
}

.chat-footer-actions .chat-scrolltop-btn{
  pointer-events: auto;
}

/* ✅ Nút nhỏ gọn hơn một chút */
.chat-scrolltop-btn{
  width:38px;
  height:38px;
  border-radius:999px;

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

  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.72);
  color:#e5e7eb;

  box-shadow:
    0 12px 26px rgba(15,23,42,.28),
    0 0 0 1px rgba(15,23,42,.35) inset;

  cursor:pointer;

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

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

.chat-scrolltop-btn:hover{
  filter:brightness(1.06);
  box-shadow:
    0 14px 30px rgba(15,23,42,.32),
    0 0 0 1px rgba(191,219,254,.18) inset;
}

.chat-scrolltop-btn:active{
  transform:translateY(1px) scale(.98);
}

.chat-scrolltop-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(99,102,241,.18),
    0 14px 30px rgba(15,23,42,.30);
}

/* Light mode */
@media (prefers-color-scheme: light){
  .chat-scrolltop-btn{
    background:rgba(255,255,255,.92);
    color:#0f172a;
    border-color:rgba(148,163,184,.75);
    box-shadow:
      0 12px 22px rgba(15,23,42,.10),
      0 0 0 1px rgba(255,255,255,.55) inset;
  }
  .chat-scrolltop-btn:focus-visible{
    box-shadow:
      0 0 0 3px rgba(99,102,241,.14),
      0 12px 22px rgba(15,23,42,.10);
  }
}
/* ===================== END CHAT SCROLL TOP ===================== */
  
  /* ===================== WI NOTIF TOOLBAR ===================== */
  .wi-notif-toolbar{
    padding:10px 14px;
    border-bottom:1px solid rgba(148,163,184,.28);
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
  
    /* ✅ Dark default */
    background:linear-gradient(135deg, rgba(2,6,23,.38), rgba(15,23,42,.22));
  }
  .wi-notif-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .wi-notif-tab{
    appearance:none;
    border:1px solid rgba(148,163,184,.55);
    background:rgba(15,23,42,.72);
    color:#e5e7eb;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
  }
  .wi-notif-tab:hover{ filter:brightness(1.06); }
  .wi-notif-tab.is-active{
    border-color:rgba(191,219,254,.92);
    background:rgba(30,64,175,.32);
  }
/* ✅ Search wrap: input + filter inside */
.wi-notif-searchwrap{
  position:relative;
  display:flex;
  align-items:center;

  min-width:220px;
  max-width:320px;
  width:32vw;

  /* ✅ khóa chiều cao để button fit chuẩn */
  height:38px;
}

/* Input */
.wi-notif-search{
  width:100%;
  height:38px;                 /* ✅ khớp searchwrap */
  box-sizing:border-box;

  border-radius:12px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.58);
  color:#e5e7eb;

  /* ✅ padding theo chiều cao 38px -> nút nằm gọn */
  padding:0 44px 0 12px;

  font-size:12px;
  outline:none;
}

.wi-notif-search::placeholder{ color:rgba(148,163,184,.85); }

.wi-notif-search:focus{
  border-color:rgba(99,102,241,.75);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}

/* ✅ Focus ring cho cả cụm (khi tab vào nút filter) */
.wi-notif-searchwrap:focus-within .wi-notif-search{
  border-color:rgba(99,102,241,.75);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}

/* Filter button (nằm trong ô search) */
.wi-notif-filterbtn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);

  /* ✅ vừa gọn trong input 38px */
  width:30px;
  height:30px;
  border-radius:10px;

  display:grid;
  place-items:center;

  border:1px solid rgba(148,163,184,.55);
  background:rgba(2,6,23,.30);
  color:#e5e7eb;

  cursor:pointer;

  /* ✅ bỏ shadow để fit đúng viền ô search */
  box-shadow:none;
}

.wi-notif-filterbtn:hover{ filter:brightness(1.06); }
.wi-notif-filterbtn:active{ transform:translateY(-50%) translateY(1px); }

.wi-notif-filterbtn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.18), 0 10px 22px rgba(15,23,42,.22);
}

/* ✅ trạng thái đang mở menu */
.wi-notif-filterbtn[aria-expanded="true"]{
  border-color:rgba(191,219,254,.92);
  background:rgba(30,64,175,.28);
}

/* Filter menu (popover) */
.wi-notif-filtermenu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:99999;

  width:min(300px, 78vw);
  padding:10px;
  border-radius:16px;

  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.96);
  box-shadow:0 24px 60px rgba(15,23,42,.72);

  backdrop-filter:blur(10px) saturate(140%);
}

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

.wi-notif-filtergrp + .wi-notif-filtergrp{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,.22);
}

.wi-notif-filtertitle{
  font-size:11px;
  font-weight:950;
  letter-spacing:.02em;
  color:rgba(148,163,184,.95);
  margin:2px 4px 8px;
}

.wi-notif-filteropt{
  appearance:none;
  width:100%;
  text-align:left;

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

  border:1px solid transparent;
  background:transparent;
  color:#e5e7eb;

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.wi-notif-filteropt:hover{
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.25);
}

.wi-notif-filteropt:focus{
  outline:none;
  border-color:rgba(99,102,241,.65);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}

/* ✅ option đang chọn */
.wi-notif-filteropt[aria-checked="true"]{
  border-color:rgba(191,219,254,.92);
  background:rgba(30,64,175,.26);
}

.wi-notif-filteropt[aria-checked="true"]::after{
  content:"✓";
  font-weight:950;
  opacity:.92;
}
  
@media (max-width:520px){
  .wi-notif-toolbar{ flex-direction:column; align-items:stretch; }
  .wi-notif-searchwrap{ width:100%; min-width:0; max-width:none; }
}
  

/* item closed/archived visual — overridden by Gmail-style rules at end of file */
.wi-notif-item.is-closed{
    opacity:1;
    filter:none;
  }
  
  /* ✅ Khi ĐÃ thực hiện (closed) -> nút ✓ mới bật xanh rõ */
  .wi-notif-item.is-closed .wi-notif-item-done[data-done="1"]{
    border-color:rgba(34,197,94,.72);
    background:rgba(34,197,94,.18);
    color:#bbf7d0;
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
  }
  /* giữ xanh ngay cả khi disabled (vì bạn disable sau khi click ✓) */
  .wi-notif-item.is-closed .wi-notif-item-done[data-done="1"]:disabled{
    opacity:1;
    cursor:default;
  }
  
  /* ===================== WI NOTIF OVERLAY (Modal) ===================== */
  body.wi-notif-open{ overflow:hidden; }
  
  .wi-notif-overlay{
    position:fixed;
    inset:0;
    z-index:99990;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
  }
  .wi-notif-overlay.hidden{ display:none !important; }
  
  .wi-notif-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(10px) saturate(140%);
  }
  
 /* Modal card */
.wi-notif-modal{
    position:relative;
    width:min(860px, 92vw);
  
    /* ✅ cố định khung modal */
    height:min(76vh, 760px);
    max-height:min(76vh, 760px);
    overflow:hidden;
  
    border-radius:20px;
    border:1px solid rgba(148,163,184,.7);
    background:rgba(15,23,42,.96);
    box-shadow:0 28px 70px rgba(15,23,42,.85);
  
    /* ✅ FIX Safari: dùng GRID thay vì FLEX để row body luôn tính đúng */
    display:grid;
    grid-template-rows:auto auto 1fr auto auto;
  
    /* ✅ quan trọng cho scroll row 1fr */
    min-height:0;
  }
  
  /* Header */
  .wi-notif-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    border-bottom:1px solid rgba(148,163,184,.35);
    background:linear-gradient(135deg, rgba(15,23,42,.98), rgba(15,23,42,.92));
  }
  .wi-notif-head-left{ min-width:0; }
  .wi-notif-head-title{
    font-size:15px;
    font-weight:900;
    letter-spacing:.01em;
    color:#e5e7eb;
  }
  .wi-notif-head-sub{
    margin-top:2px;
    font-size:12px;
    color:rgba(148,163,184,.95);
  }
  
  .wi-notif-close{
    appearance:none;
    border:1px solid rgba(148,163,184,.6);
    background:rgba(15,23,42,.75);
    color:#e5e7eb;
    width:34px;
    height:34px;
    border-radius:999px;
    cursor:pointer;
    display:grid;
    place-items:center;
  }
  .wi-notif-close:hover{ filter:brightness(1.08); }
  .wi-notif-close:active{ transform:translateY(1px); }
  
  /* Body list (scroll chỉ trong màn thông báo) */
  .wi-notif-body{
    padding:12px 14px 14px;
  
    /* ✅ FIX Safari: bỏ flex+gap trong vùng scroll */
    display:block;
  
    /* ✅ chỉ scroll trong body */
    overflow-y:auto;
    overflow-x:hidden;
  
    /* ✅ cực quan trọng để row 1fr trong grid cho phép scroll */
    min-height:0;
  
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  
 /* Item: grid 2 cột để fit chữ & mảng màu */
  .wi-notif-item{
    border-radius:16px;
    border:1px solid rgba(148,163,184,.55);
    background:rgba(2,6,23,.62);
    box-shadow:0 10px 24px rgba(15,23,42,.45);
    overflow:hidden;
  }


  /* ✅ thay cho gap khi .wi-notif-body chuyển sang block */
.wi-notif-item + .wi-notif-item{
    margin-top:10px;
  }

 .wi-notif-item-grid{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
  }
  

  /* Cột trái: khung nhãn */
  .wi-notif-item-kindcol{
    /* ✅ giảm padding ngang để pill “Hướng dẫn” không bị cắt */
    padding:12px 6px;
  
    background:rgba(15,23,42,.55);
    border-right:1px solid rgba(148,163,184,.28);
  
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
  
    /* ✅ an toàn cho layout grid */
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
  }
  
  /* Cột phải: nội dung */
  .wi-notif-item-main{
    padding:12px 14px 12px;
    min-width:0;
  }
  
  /* Top: meta + done */
  .wi-notif-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  
  /* ✅ cụm actions (✓ + 🗑) */
  .wi-notif-item-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  
  /* Meta */
  .wi-notif-item-meta{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    font-size:12px;
    color:rgba(148,163,184,.95);
  }
  .wi-notif-item-meta--top{ margin-top:2px; }
  .wi-notif-item-meta b{
    font-weight:950;
    color:#e5e7eb;
  }
  .wi-notif-shownAt{ font-weight:950; }

  .wi-notif-meta-chips{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .wi-notif-meta-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.01em;
    border:1px solid rgba(148,163,184,.42);
    background:rgba(30,41,59,.55);
    color:#e2e8f0;
  }

  .wi-notif-meta-chip.prio-urgent{
    border-color:rgba(239,68,68,.72);
    background:rgba(239,68,68,.18);
    color:#fecaca;
  }

  .wi-notif-meta-chip.prio-high{
    border-color:rgba(251,146,60,.72);
    background:rgba(251,146,60,.18);
    color:#fed7aa;
  }

  .wi-notif-meta-chip.chip-ack{
    border-color:rgba(59,130,246,.62);
    background:rgba(59,130,246,.14);
    color:#dbeafe;
  }

  .wi-notif-meta-chip.chip-progress{
    border-color:rgba(34,197,94,.58);
    background:rgba(34,197,94,.14);
    color:#dcfce7;
  }

  .wi-notif-meta-chip.chip-decision{
    border-color:rgba(168,85,247,.60);
    background:rgba(168,85,247,.14);
    color:#f3e8ff;
  }

  .wi-notif-meta-chip.chip-scope,
  .wi-notif-meta-chip.chip-scenario{
    border-color:rgba(148,163,184,.42);
    background:rgba(30,41,59,.55);
    color:#e2e8f0;
  }

  .wi-notif-action-summary{
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.28);
    background:rgba(15,23,42,.35);
    font-size:12px;
    line-height:1.6;
    color:rgba(226,232,240,.94);
  }

  .wi-notif-action-summary b{
    color:#e5e7eb;
    font-weight:950;
  }
  
/* Nút ✓ (mặc định = CHƯA thực hiện -> neutral, KHÔNG xanh) */
.wi-notif-item-done{
    appearance:none;
    border:1px solid rgba(148,163,184,.55);
    background:rgba(148,163,184,.10);
    color:rgba(226,232,240,.92);
  
    width:30px;
    height:30px;
    border-radius:999px;
    cursor:pointer;
    flex:0 0 auto;
  
    display:grid;
    place-items:center;
    font-weight:900;
  
    position:relative;
    overflow:hidden;
  
    transition:transform .12s ease, filter .12s ease, box-shadow .12s ease,
               background .12s ease, border-color .12s ease, color .12s ease;
  }
  .wi-notif-item-done:hover{ filter:brightness(1.06); }
  .wi-notif-item-done:active{ transform:translateY(1px) scale(.96); }
  .wi-notif-item-done:disabled{ opacity:.55; cursor:not-allowed; }
  
  /* ripple nhẹ khi bấm (áp dụng cho cả ✓ và Xoá) */
  .wi-notif-item-done::after{
    content:"";
    position:absolute;
    inset:-35%;
    border-radius:999px;
    background:currentColor;
    opacity:0;
    transform:scale(.25);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;
  }
  .wi-notif-item-done:active::after{
    opacity:.16;
    transform:scale(1);
  }
  
/* ✅ nút Xoá (text, màu đỏ, pill) */
.wi-notif-item-done.wi-notif-item-del{
    width:auto;
    min-width:54px;
    height:30px;
    padding:0 10px;
    border-radius:999px;
  
    display:inline-flex;
    align-items:center;
    justify-content:center;
  
    font-size:12px;
    font-weight:950;
    letter-spacing:.01em;
  
    border-color:rgba(239,68,68,.72);
    background:rgba(239,68,68,.18);
    color:#fecaca;
    box-shadow:0 8px 18px rgba(15,23,42,.18);
  }
  .wi-notif-item-done.wi-notif-item-del:hover{ filter:brightness(1.07); }
  .wi-notif-item-done.wi-notif-item-del:active{ transform:translateY(1px) scale(.97); }
  
  /* Body */
  .wi-notif-item-body{
    margin-top:10px;
    white-space:pre-wrap;
    line-height:1.65;
    font-size:13px;
    color:#e5e7eb;
  }
  
  /* Inline calendar CTA */
  .wi-notif-calbar{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }
  .wi-notif-calbtn.is-inline{
    border-radius:999px;
    padding:7px 12px;
    font-weight:950;
    letter-spacing:.01em;
  
    border:1px solid rgba(34,197,94,.65);
    background:rgba(34,197,94,.14);
    color:#bbf7d0;
    box-shadow:0 10px 22px rgba(15,23,42,.35);
  }
  .wi-notif-calbtn.is-inline:hover{ filter:brightness(1.07); }
  .wi-notif-calbtn.is-inline:active{ transform:translateY(1px); }
  
  /* Done animation */
  .wi-notif-item.is-done{ opacity:.92; }
  .wi-notif-item.is-closing{
    opacity:0;
    transform:translateY(-2px);
    transition:opacity .16s ease-out, transform .16s ease-out;
  }
  
  /* Footer */
  .wi-notif-foot{
    padding:12px 14px 14px;
    border-top:1px solid rgba(148,163,184,.35);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:rgba(15,23,42,.92);
  }
  
  /* ACTIVE ITEM */
  .wi-notif-item.is-active{
    border-color:rgba(99,102,241,.72);
    box-shadow:0 14px 30px rgba(99,102,241,.14), 0 10px 24px rgba(15,23,42,.45);
  }
  
  /* REPLY BOX */
  .wi-notif-replybox{
    padding:12px 14px 14px;
    border-top:1px solid rgba(148,163,184,.35);
    background:linear-gradient(135deg, rgba(2,6,23,.66), rgba(15,23,42,.92));
  }
  .wi-notif-replymeta{
    font-size:12px;
    color:rgba(148,163,184,.95);
    margin-bottom:8px;
  }
  .wi-notif-replymeta b{
    font-weight:950;
    color:#e5e7eb;
  }
  .wi-notif-replyinput{
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.55);
    background:rgba(15,23,42,.55);
    color:#e5e7eb;
    line-height:1.55;
    font-size:13px;
    resize:vertical;
    min-height:84px;
    max-height:220px;
    box-shadow:0 10px 22px rgba(15,23,42,.35);
  }
  .wi-notif-replyinput::placeholder{ color:rgba(148,163,184,.9); }
  .wi-notif-replyinput:focus{
    outline:none;
    border-color:rgba(99,102,241,.75);
    box-shadow:0 0 0 3px rgba(99,102,241,.18), 0 12px 26px rgba(15,23,42,.42);
  }
  
  .wi-notif-replyacts{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }
  .wi-notif-replyacts #wiNotifReplySend{
    border-radius:999px;
    padding:7px 12px;
    font-weight:950;
    letter-spacing:.01em;
    border:1px solid rgba(59,130,246,.72);
    background:rgba(59,130,246,.18);
    color:#dbeafe;
    box-shadow:0 10px 22px rgba(15,23,42,.35);
  }
  .wi-notif-replyacts #wiNotifReplySend:hover{ filter:brightness(1.07); }
  .wi-notif-replyacts #wiNotifReplySend:active{ transform:translateY(1px); }
  
  .wi-notif-replyacts #wiNotifReplyCancel{
    border-radius:999px;
    padding:7px 12px;
    font-weight:950;
    letter-spacing:.01em;
    border:1px solid rgba(148,163,184,.6);
    background:rgba(15,23,42,.75);
    color:#e5e7eb;
  }
  .wi-notif-replyacts #wiNotifReplyCancel:hover{ filter:brightness(1.06); }
  .wi-notif-replyacts #wiNotifReplyCancel:active{ transform:translateY(1px); }
  
  /* Nút Phản hồi ở footer */
  .wi-notif-replybtn{
    border-radius:999px;
    padding:7px 12px;
    font-weight:950;
    letter-spacing:.01em;
    border:1px solid rgba(239,68,68,.72);
    background:rgba(239,68,68,.18);
    color:#fecaca;
    box-shadow:0 10px 22px rgba(15,23,42,.35);
  }
  .wi-notif-replybtn:hover{ filter:brightness(1.07); }
  .wi-notif-replybtn:active{ transform:translateY(1px); }
  
  /* Kind variants */
  .wi-notif-kind.kind-request{
    border-color:rgba(251,146,60,.92);
    background:rgba(251,146,60,.26);
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 2px rgba(0,0,0,.18);
  }
  .wi-notif-kind.kind-guide{
    border-color:rgba(59,130,246,.92);
    background:rgba(59,130,246,.24);
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 2px rgba(0,0,0,.18);
  }
  .wi-notif-kind.kind-reminder{
    border-color:rgba(34,197,94,.92);
    background:rgba(34,197,94,.22);
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 2px rgba(0,0,0,.18);
  }
  .wi-notif-kind.kind-mention{
    border-color:rgba(236,72,153,.92);
    background:rgba(236,72,153,.22);
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 2px rgba(0,0,0,.18);
  }
  
  @media (max-width:520px){
    .wi-notif-item-top{ align-items:flex-start; }
    .wi-notif-item-actions{ align-self:flex-start; }
  }
  
  /* ===================== ✅ LIGHT MODE OVERRIDES ===================== */
  @media (prefers-color-scheme: light){
  
    /* ✅ Bell button: nền sáng + viền rõ, badge vẫn nổi */
    .chat-notif-btn{
      background:#ffffff;
      color:#0f172a;
      border-color:rgba(148,163,184,.75);
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
    .chat-notif-btn:focus{
      box-shadow:0 0 0 3px rgba(99,102,241,.14), 0 10px 18px rgba(15,23,42,.10);
    }
    .chat-notif-badge{
      border-color:rgba(255,255,255,.85);
      box-shadow:0 10px 18px rgba(15,23,42,.14);
    }
  
    /* ✅ Backdrop nhẹ hơn */
    .wi-notif-backdrop{ background:rgba(2,6,23,.22); }
  
    /* ✅ Toolbar/Tabs/Search: trước đây không override nên bị “tối” ở light */
    .wi-notif-toolbar{
      background:linear-gradient(135deg, #ffffff, #eef2ff);
      border-bottom-color:rgba(148,163,184,.35);
    }
    .wi-notif-tab{
      background:#ffffff;
      color:#0f172a;
      border-color:rgba(148,163,184,.70);
      box-shadow:0 8px 16px rgba(15,23,42,.06);
    }
    .wi-notif-tab.is-active{
      border-color:rgba(99,102,241,.55);
      background:rgba(99,102,241,.10);
    }
/* ✅ Search + Filter (light) */
.wi-notif-search{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(148,163,184,.70);
  box-shadow:0 8px 16px rgba(15,23,42,.06);
}

.wi-notif-search::placeholder{ color:#94a3b8; }

.wi-notif-search:focus{
  border-color:rgba(99,102,241,.75);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}

.wi-notif-searchwrap:focus-within .wi-notif-search{
  border-color:rgba(99,102,241,.75);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}

.wi-notif-filterbtn{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(148,163,184,.70);

  /* ✅ giữ gọn, không làm lệch fit */
  box-shadow:none;
}

.wi-notif-filterbtn[aria-expanded="true"]{
  border-color:rgba(99,102,241,.55);
  background:rgba(99,102,241,.10);
}

.wi-notif-filtermenu{
  background:#ffffff;
  border-color:rgba(148,163,184,.70);
  box-shadow:0 26px 60px rgba(15,23,42,.16);
}

.wi-notif-filtertitle{ color:#64748b; }

.wi-notif-filteropt{
  color:#0f172a;
}

.wi-notif-filteropt:hover{
  background:rgba(99,102,241,.08);
  border-color:rgba(148,163,184,.35);
}

.wi-notif-filteropt[aria-checked="true"]{
  background:rgba(99,102,241,.10);
  border-color:rgba(99,102,241,.45);
}
  
    /* Modal */
    .wi-notif-modal{
      background:#ffffff;
      border-color:rgba(148,163,184,.7);
      box-shadow:0 26px 60px rgba(15,23,42,.22);
    }
    .wi-notif-head{
      background:linear-gradient(135deg,#ffffff,#eef2ff);
    }
    .wi-notif-head-title{ color:#0f172a; }
    .wi-notif-head-sub{ color:#64748b; }
  
    .wi-notif-close{
      background:#ffffff;
      color:#111827;
      border-color:rgba(148,163,184,.7);
    }
  
    .wi-notif-item{
      background:#f9fafb;
      border-color:rgba(148,163,184,.55);
      box-shadow:0 10px 24px rgba(15,23,42,.10);
    }
    .wi-notif-item-kindcol{
      background:rgba(238,242,255,.85);
      border-right-color:rgba(148,163,184,.28);
    }
  
    .wi-notif-item-meta{ color:#64748b; }
    .wi-notif-item-body{ color:#0f172a; }
    .wi-notif-item-meta b{
      color:#0f172a;
      font-weight:950;
    }
    .wi-notif-meta-chip{
      background:#ffffff;
      color:#0f172a;
      border-color:rgba(148,163,184,.38);
      box-shadow:0 8px 16px rgba(15,23,42,.06);
    }
    .wi-notif-meta-chip.prio-urgent{
      color:#991b1b;
      background:rgba(239,68,68,.10);
      border-color:rgba(239,68,68,.38);
    }
    .wi-notif-meta-chip.prio-high{
      color:#9a3412;
      background:rgba(251,146,60,.10);
      border-color:rgba(251,146,60,.38);
    }
    .wi-notif-meta-chip.chip-ack{
      color:#1d4ed8;
      background:rgba(59,130,246,.10);
      border-color:rgba(59,130,246,.32);
    }
    .wi-notif-meta-chip.chip-progress{
      color:#166534;
      background:rgba(34,197,94,.10);
      border-color:rgba(34,197,94,.32);
    }
    .wi-notif-meta-chip.chip-decision{
      color:#6b21a8;
      background:rgba(168,85,247,.10);
      border-color:rgba(168,85,247,.32);
    }
    .wi-notif-action-summary{
      background:rgba(99,102,241,.06);
      border-color:rgba(148,163,184,.34);
      color:#334155;
    }
    .wi-notif-action-summary b{
      color:#0f172a;
    }
  
    .wi-notif-foot{ background:#ffffff; }
  
    /* Inline calendar CTA - light */
    .wi-notif-calbtn.is-inline{
      color:#166534;
      background:rgba(34,197,94,.10);
      border-color:rgba(34,197,94,.55);
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
  
 /* ✓ button - light (mặc định neutral, chưa thực hiện) */
.wi-notif-item-done{
    color:#334155;
    background:rgba(148,163,184,.14);
    border-color:rgba(148,163,184,.70);
    box-shadow:0 8px 16px rgba(15,23,42,.06);
  }
  
  /* ✅ chỉ khi closed mới xanh */
  .wi-notif-item.is-closed .wi-notif-item-done[data-done="1"]{
    color:#16a34a;
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.55);
    box-shadow:0 0 0 3px rgba(34,197,94,.10);
  }
  .wi-notif-item.is-closed .wi-notif-item-done[data-done="1"]:disabled{
    opacity:1;
    cursor:default;
  }
  
    /* 🗑 delete - light (trước đó chưa override) */
    .wi-notif-item-done.wi-notif-item-del{
      color:#b91c1c;
      background:rgba(239,68,68,.10);
      border-color:rgba(239,68,68,.45);
    }
  
    /* ✅ Kind pills: dùng màu chữ đậm để đọc tốt trên nền sáng */
    .wi-notif-kind.kind-request{
      color:#7c2d12;
      background:rgba(251,146,60,.14);
      border-color:rgba(251,146,60,.55);
      text-shadow:none;
    }
    .wi-notif-kind.kind-guide{
      color:#1e3a8a;
      background:rgba(59,130,246,.12);
      border-color:rgba(59,130,246,.45);
      text-shadow:none;
    }
    .wi-notif-kind.kind-reminder{
      color:#14532d;
      background:rgba(34,197,94,.12);
      border-color:rgba(34,197,94,.45);
      text-shadow:none;
    }
    .wi-notif-kind.kind-mention{
      color:#831843;
      background:rgba(236,72,153,.12);
      border-color:rgba(236,72,153,.45);
      text-shadow:none;
    }
  
    /* ✅ REPLY UI - light */
    .wi-notif-replybox{
      background:linear-gradient(135deg, #ffffff, #eef2ff);
    }
    .wi-notif-replymeta{ color:#64748b; }
    .wi-notif-replymeta b{ color:#0f172a; }
  
    .wi-notif-replyinput{
      background:#ffffff;
      color:#0f172a;
      border-color:rgba(148,163,184,.7);
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
    .wi-notif-replyinput::placeholder{ color:#94a3b8; }
    .wi-notif-replyinput:focus{
      border-color:rgba(99,102,241,.75);
      box-shadow:0 0 0 3px rgba(99,102,241,.14), 0 10px 18px rgba(15,23,42,.10);
    }
  
    .wi-notif-replyacts #wiNotifReplySend{
      color:#1d4ed8;
      background:rgba(59,130,246,.10);
      border-color:rgba(59,130,246,.45);
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
    .wi-notif-replyacts #wiNotifReplyCancel{
      color:#0f172a;
      background:#ffffff;
      border-color:rgba(148,163,184,.7);
    }
  
    .wi-notif-replybtn{
      color:#b91c1c;
      background:rgba(239,68,68,.10);
      border-color:rgba(239,68,68,.45);
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
  
    /* active item - light */
    .wi-notif-item.is-active{
      border-color:rgba(99,102,241,.55);
      box-shadow:0 14px 26px rgba(99,102,241,.10), 0 10px 24px rgba(15,23,42,.10);
    }
  }

  /* ===================== ✅ NEW PILL + ACTIVE ANIMATION + REPLY SPLIT ===================== */

/* stack trong kind col */
.wi-notif-kindstack{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
  }
  
  /* pill NEW */
  .wi-notif-newpill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
  
    font-size:11px;
    font-weight:950;
    letter-spacing:.02em;
    white-space:nowrap;
  
    border:1px solid rgba(99,102,241,.85);
    background:rgba(99,102,241,.22);
    color:#e0e7ff;
    box-shadow:0 10px 22px rgba(15,23,42,.25);
  
    animation:wiNotifNewPulse 1.2s ease-in-out infinite;
  }
  
  .wi-notif-newhint{
    font-size:12px;
    font-weight:900;
    color:rgba(165,180,252,.95);
  }
  
  /* item NEW: glow nhẹ */
  .wi-notif-item{
    position:relative;
    cursor:pointer;
    transition:
      transform .14s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      filter .16s ease;
  }
  
  .wi-notif-item.is-new{
    border-color:rgba(99,102,241,.70);
    box-shadow:0 16px 38px rgba(99,102,241,.10), 0 10px 24px rgba(15,23,42,.45);
  }
  
  /* active indicator: thanh highlight + lift */
  .wi-notif-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    border-radius:16px 0 0 16px;
    background:rgba(99,102,241,.85);
    opacity:0;
    transform:scaleY(.35);
    transition:opacity .16s ease, transform .16s ease;
    pointer-events:none;
  }
  
  .wi-notif-item.is-active{
    border-color:rgba(99,102,241,.78);
    transform:translateY(-1px);
    box-shadow:0 18px 44px rgba(99,102,241,.14), 0 10px 24px rgba(15,23,42,.45);
  }
  
  .wi-notif-item.is-active::before{
    opacity:1;
    transform:scaleY(1);
  }
  
  /* reply split blocks */
  .wi-notif-split{
    margin-top:10px;
    display:grid;
    gap:10px;
  }
  
  .wi-notif-block{
    border-radius:14px;
    border:1px solid rgba(148,163,184,.42);
    background:rgba(15,23,42,.40);
    padding:10px 12px;
  }
  
  .wi-notif-block-head{
    font-size:12px;
    font-weight:950;
    letter-spacing:.01em;
    color:#e5e7eb;
    opacity:.95;
    margin-bottom:6px;
  }
  
  .wi-notif-block-sub{
    margin-top:2px;
    font-size:12px;
    color:rgba(226,232,240,.92);
    margin-bottom:6px;
  }
  
  .wi-notif-block-body{
    white-space:pre-wrap;
    line-height:1.65;
    font-size:13px;
    color:#e5e7eb;
  }
  
  .wi-notif-block--orig{
    border-color:rgba(148,163,184,.38);
    background:rgba(2,6,23,.52);
  }
  
  .wi-notif-block--reply{
    border-color:rgba(99,102,241,.55);
    background:rgba(99,102,241,.10);
  }
  
  /* animations */
  @keyframes wiNotifNewPulse{
    0%, 100% { transform:translateY(0); filter:brightness(1); }
    50% { transform:translateY(-1px); filter:brightness(1.08); }
  }
  
  /* light mode tweaks */
  @media (prefers-color-scheme: light){
    .wi-notif-newpill{
      color:#1e3a8a;
      background:rgba(99,102,241,.12);
      border-color:rgba(99,102,241,.45);
      box-shadow:0 10px 18px rgba(15,23,42,.10);
    }
    .wi-notif-item.is-new{
      box-shadow:0 16px 34px rgba(99,102,241,.10), 0 10px 24px rgba(15,23,42,.10);
    }
    .wi-notif-block{
      background:#ffffff;
      border-color:rgba(148,163,184,.55);
    }
    .wi-notif-block--orig{
      background:#f9fafb;
    }
    .wi-notif-block--reply{
      background:rgba(99,102,241,.08);
      border-color:rgba(99,102,241,.35);
    }
    .wi-notif-block-head{ color:#0f172a; }
    .wi-notif-block-body{ color:#0f172a; }
  }

/* ===================== WI NOTIF WORKSPACE REFRESH ===================== */
.wi-notif-modal{
  grid-template-rows:auto auto 1fr;
  width:min(1140px, 95vw);
  height:min(82vh, 840px);
  max-height:min(82vh, 840px);
}

.wi-notif-body{
  padding:0;
  display:grid;
  grid-template-columns:minmax(290px, 332px) minmax(0,1fr);
  min-height:0;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(99,102,241,.10), transparent 34%),
    linear-gradient(180deg, rgba(2,6,23,.20), rgba(15,23,42,.06));
}

.wi-notif-listpane{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border-right:1px solid rgba(148,163,184,.24);
  background:
    linear-gradient(180deg, rgba(2,6,23,.56), rgba(15,23,42,.24)),
    rgba(2,6,23,.28);
}

.wi-notif-listhead{
  padding:16px 15px 13px;
  border-bottom:1px solid rgba(148,163,184,.18);
}

.wi-notif-listtitle{
  font-size:13px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#cbd5e1;
}

.wi-notif-listsummary{
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:rgba(148,163,184,.92);
  display:none;
}

.wi-notif-list{
  min-height:0;
  overflow:auto;
  padding:10px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.wi-notif-detailpane{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 28%),
    linear-gradient(180deg, rgba(15,23,42,.42), rgba(2,6,23,.12));
}

.wi-notif-detail{
  min-height:0;
  overflow:auto;
  padding:18px 18px 16px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.wi-notif-empty{
  min-height:220px;
  padding:28px 18px;
  border:1px dashed rgba(148,163,184,.30);
  border-radius:22px;
  background:rgba(15,23,42,.26);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  color:rgba(226,232,240,.92);
}

.wi-notif-empty--pane{
  min-height:180px;
}

.wi-notif-empty-title{
  font-size:18px;
  font-weight:950;
  letter-spacing:-.01em;
  color:#f8fafc;
}

.wi-notif-empty-sub{
  max-width:420px;
  font-size:13px;
  line-height:1.7;
  color:rgba(148,163,184,.95);
}

.wi-notif-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  gap:12px;
  padding:12px 12px 12px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  background:
    linear-gradient(180deg, rgba(15,23,42,.78), rgba(2,6,23,.62));
  box-shadow:
    0 18px 38px rgba(2,6,23,.22),
    0 1px 0 rgba(255,255,255,.04) inset;
}

.wi-notif-item + .wi-notif-item{
  margin-top:10px;
}

.wi-notif-item-main{
  padding:0;
  min-width:0;
}

.wi-notif-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.wi-notif-item-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.wi-notif-statuspill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.01em;
  border:1px solid rgba(148,163,184,.42);
  background:rgba(148,163,184,.10);
  color:#e2e8f0;
}

.wi-notif-statuspill.is-open{
  border-color:rgba(59,130,246,.42);
  background:rgba(59,130,246,.12);
  color:#dbeafe;
}

.wi-notif-statuspill.is-closed{
  border-color:rgba(34,197,94,.42);
  background:rgba(34,197,94,.14);
  color:#dcfce7;
}

.wi-notif-item-time{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.01em;
  color:rgba(148,163,184,.88);
  white-space:nowrap;
}

.wi-notif-item-title{
  margin-top:8px;
  font-size:14px;
  line-height:1.42;
  font-weight:950;
  letter-spacing:-.01em;
  color:#f8fafc;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wi-notif-item-fromrow{
  margin-top:8px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:12px;
  line-height:1.5;
  font-weight:800;
  color:rgba(148,163,184,.96);
}

.wi-notif-item-fromname{
  color:#e2e8f0;
  font-weight:900;
}

.wi-notif-item-when{
  color:rgba(148,163,184,.94);
}

.wi-notif-item-signals{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.wi-notif-item-signal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.26);
  background:rgba(15,23,42,.24);
  color:rgba(226,232,240,.92);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.01em;
}

.wi-notif-item-side{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  justify-content:flex-start;
  padding-top:2px;
}

.wi-notif-item .wi-notif-item-done{
  width:36px;
  height:36px;
}

.wi-notif-meta-chips.is-compact{
  margin-top:8px;
  gap:6px;
}

.wi-notif-meta-chips.is-compact .wi-notif-meta-chip{
  padding:4px 8px;
  font-size:10.5px;
}

.wi-notif-detail-card{
  display:grid;
  gap:14px;
  padding:18px 18px 20px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.24);
  background:
    radial-gradient(circle at top left, rgba(99,102,241,.10), transparent 28%),
    linear-gradient(180deg, rgba(15,23,42,.86), rgba(2,6,23,.72));
  box-shadow:
    0 24px 54px rgba(2,6,23,.28),
    0 1px 0 rgba(255,255,255,.05) inset;
}

.wi-notif-detail-hero{
  display:grid;
  gap:10px;
}

.wi-notif-detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.wi-notif-detail-title{
  font-size:22px;
  line-height:1.18;
  font-weight:980;
  letter-spacing:-.025em;
  color:#f8fafc;
}

.wi-notif-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  line-height:1.6;
  color:rgba(148,163,184,.94);
}

.wi-notif-detail-meta b{
  color:#f8fafc;
  font-weight:950;
}

.wi-notif-signalgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px;
}

.wi-notif-signalcard{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.44);
}

.wi-notif-signallabel{
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(148,163,184,.94);
}

.wi-notif-signalvalue{
  margin-top:8px;
  font-size:13px;
  line-height:1.6;
  font-weight:850;
  color:#e2e8f0;
}

.wi-notif-aihint{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(59,130,246,.24);
  background:
    linear-gradient(135deg, rgba(59,130,246,.14), rgba(99,102,241,.10));
}

.wi-notif-aihint-label,
.wi-notif-sectiontitle,
.wi-notif-smarttitle{
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bfdbfe;
}

.wi-notif-aihint-text{
  margin-top:8px;
  font-size:13px;
  line-height:1.7;
  color:#e0f2fe;
}

.wi-notif-checklist,
.wi-notif-content,
.wi-notif-smartbar{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.34);
}

.wi-notif-checklist{
  display:grid;
  gap:10px;
}

.wi-notif-checkitem{
  position:relative;
  padding-left:20px;
  font-size:13px;
  line-height:1.65;
  color:#e2e8f0;
}

.wi-notif-checkitem::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(135deg, #60a5fa, #818cf8);
  box-shadow:0 0 0 4px rgba(99,102,241,.10);
}

.wi-notif-detail-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:2px;
  flex-wrap:wrap;
}

.wi-notif-detail-actiongroup{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.wi-notif-detail-actiongroup.is-secondary{
  margin-left:auto;
}

.wi-notif-detailbtn{
  border-radius:999px;
  min-height:42px;
  padding:0 14px;
  font-weight:950;
  font-size:13px;
  letter-spacing:.01em;
  border:1px solid rgba(148,163,184,.42);
  background:rgba(15,23,42,.58);
  color:#e5e7eb;
  box-shadow:0 12px 24px rgba(2,6,23,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.wi-notif-detailbtn:hover{ filter:brightness(1.06); }
.wi-notif-detailbtn:active{ transform:translateY(1px); }
.wi-notif-detailbtn:disabled{
  opacity:.52;
  cursor:not-allowed;
  filter:none;
}

.wi-notif-detailbtn.is-primary{
  border-color:rgba(59,130,246,.52);
  background:rgba(59,130,246,.16);
  color:#dbeafe;
  min-width:158px;
}

.wi-notif-detailbtn.is-danger{
  border-color:rgba(239,68,68,.52);
  background:rgba(239,68,68,.14);
  color:#fecaca;
}

.wi-notif-smartchips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wi-notif-smartchip{
  appearance:none;
  min-height:40px;
  padding:8px 12px;
  border-radius:13px;
  border:1px solid rgba(99,102,241,.34);
  background:rgba(99,102,241,.12);
  color:#e0e7ff;
  font-size:11.5px;
  font-weight:850;
  line-height:1.45;
  cursor:pointer;
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.wi-notif-smartchip:hover{
  border-color:rgba(191,219,254,.62);
  box-shadow:0 12px 24px rgba(59,130,246,.16);
}

.wi-notif-smartchip:active{
  transform:translateY(1px);
}

.wi-notif-smartchip:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.18), 0 12px 24px rgba(59,130,246,.16);
}

.wi-notif-replybox{
  padding:14px 16px 16px;
  border-top:1px solid rgba(148,163,184,.24);
  background:
    linear-gradient(180deg, rgba(2,6,23,.78), rgba(15,23,42,.96));
}

.wi-notif-replymeta{
  line-height:1.65;
}

@media (max-width:980px){
  .wi-notif-modal{
    width:min(96vw, 920px);
    height:min(88vh, 980px);
    max-height:min(88vh, 980px);
  }

  .wi-notif-body{
    grid-template-columns:1fr;
    grid-template-rows:minmax(230px, 38%) minmax(0,1fr);
  }

  .wi-notif-listpane{
    border-right:0;
    border-bottom:1px solid rgba(148,163,184,.24);
  }
}

@media (max-width:640px){
  .wi-notif-modal{
    width:min(calc(100vw - 16px), 1000px);
    height:min(92vh, 1100px);
    max-height:min(92vh, 1100px);
    border-radius:18px;
  }

  .wi-notif-detail{
    padding:14px 14px 12px;
  }

  .wi-notif-replybox{
    padding:14px;
  }

  .wi-notif-detail-card{
    padding:16px;
    gap:14px;
  }

  .wi-notif-detail-title{
    font-size:19px;
  }

  .wi-notif-signalgrid{
    grid-template-columns:1fr;
  }

  .wi-notif-item{
    grid-template-columns:minmax(0,1fr);
  }

  .wi-notif-item-side{
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    padding-top:0;
  }
}

@media (prefers-color-scheme: light){
  .wi-notif-body{
    background:
      radial-gradient(circle at top left, rgba(99,102,241,.08), transparent 32%),
      linear-gradient(180deg, rgba(241,245,249,.98), rgba(255,255,255,.96));
  }

  .wi-notif-listpane{
    background:
      linear-gradient(180deg, rgba(248,250,252,.98), rgba(238,242,255,.92));
    border-right-color:rgba(148,163,184,.22);
  }

  .wi-notif-listhead{
    border-bottom-color:rgba(148,163,184,.22);
  }

  .wi-notif-listtitle{
    color:#0f172a;
  }

  .wi-notif-listsummary{
    color:#64748b;
  }

  .wi-notif-detailpane{
    background:
      radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  }

  .wi-notif-empty{
    background:#ffffff;
    border-color:rgba(148,163,184,.26);
    color:#334155;
    box-shadow:0 14px 32px rgba(15,23,42,.06);
  }

  .wi-notif-empty-title{
    color:#0f172a;
  }

  .wi-notif-empty-sub{
    color:#64748b;
  }

  .wi-notif-item{
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    border-color:rgba(148,163,184,.24);
    box-shadow:
      0 18px 32px rgba(15,23,42,.08),
      0 1px 0 rgba(255,255,255,.8) inset;
  }

  .wi-notif-item-title{
    color:#0f172a;
  }

  .wi-notif-item-fromname{
    color:#0f172a;
  }

  .wi-notif-item-time{
    color:#64748b;
  }

  .wi-notif-item-when{
    color:#64748b;
  }

  .wi-notif-item-signal{
    background:rgba(99,102,241,.05);
    border-color:rgba(99,102,241,.14);
    color:#475569;
  }

  .wi-notif-statuspill{
    background:#ffffff;
    color:#334155;
    border-color:rgba(148,163,184,.34);
  }

  .wi-notif-statuspill.is-open{
    color:#1d4ed8;
    background:rgba(59,130,246,.10);
    border-color:rgba(59,130,246,.28);
  }

  .wi-notif-statuspill.is-closed{
    color:#166534;
    background:rgba(34,197,94,.10);
    border-color:rgba(34,197,94,.28);
  }

  .wi-notif-detail-card{
    background:
      radial-gradient(circle at top left, rgba(99,102,241,.08), transparent 28%),
      linear-gradient(180deg, #ffffff, #f8fafc);
    border-color:rgba(148,163,184,.24);
    box-shadow:
      0 22px 42px rgba(15,23,42,.10),
      0 1px 0 rgba(255,255,255,.85) inset;
  }

  .wi-notif-detail-title{
    color:#0f172a;
  }

  .wi-notif-detail-meta{
    color:#64748b;
  }

  .wi-notif-detail-meta b{
    color:#0f172a;
  }

  .wi-notif-signalcard,
  .wi-notif-checklist,
  .wi-notif-content,
  .wi-notif-smartbar{
    background:#ffffff;
    border-color:rgba(148,163,184,.24);
    box-shadow:0 14px 28px rgba(15,23,42,.06);
  }

  .wi-notif-signallabel,
  .wi-notif-sectiontitle,
  .wi-notif-smarttitle{
    color:#64748b;
  }

  .wi-notif-signalvalue,
  .wi-notif-checkitem{
    color:#0f172a;
  }

  .wi-notif-aihint{
    background:linear-gradient(135deg, rgba(59,130,246,.08), rgba(99,102,241,.08));
    border-color:rgba(99,102,241,.18);
  }

  .wi-notif-aihint-label{
    color:#4f46e5;
  }

  .wi-notif-aihint-text{
    color:#1e293b;
  }

  .wi-notif-detailbtn{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.34);
    box-shadow:0 10px 18px rgba(15,23,42,.06);
  }

  .wi-notif-detailbtn.is-primary{
    color:#1d4ed8;
    background:rgba(59,130,246,.10);
    border-color:rgba(59,130,246,.32);
  }

  .wi-notif-detailbtn.is-danger{
    color:#b91c1c;
    background:rgba(239,68,68,.10);
    border-color:rgba(239,68,68,.30);
  }

  .wi-notif-smartchip{
    color:#1e3a8a;
    background:rgba(99,102,241,.08);
    border-color:rgba(99,102,241,.22);
  }

  .wi-notif-replybox{
    background:linear-gradient(180deg, #ffffff, #eef2ff);
    border-top-color:rgba(148,163,184,.24);
  }
}
 
/* ===================== TEMPLATE PICKER (Biểu mẫu) – Composer popover ===================== */

/* Icon hàng dưới */
.composer-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.composer-left{
  position: relative;
  left: auto;
  bottom: auto;
  display:flex;
  gap: var(--cmp-ic-gap);
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 auto;
}

/* Nút biểu mẫu: ✅ KHÔNG còn style riêng — đồng bộ pill icon */
.chat-template-btn{
  /* để nút ăn theo .btn.ghost.icon trong composer-left */
  background: transparent !important;
  box-shadow: none !important;
  border-color: inherit; /* lấy theo pill icon chung */
}
.chat-template-btn:hover{ filter:brightness(1.06); }
.chat-template-btn:active{ transform:translateY(1px); }
@media (prefers-color-scheme: light){
  .chat-template-btn{
    background:#ffffff;
    border-color:rgba(148,163,184,.75);
    box-shadow:0 10px 18px rgba(15,23,42,.10);
  }
}

/* Popover list */
.chat-template-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);

  width:min(420px, 84vw);
  max-height:min(460px, 62vh);
  overflow:hidden;

  border-radius:16px;
  border:1px solid rgba(148,163,184,.75);
  background:rgba(15,23,42,.98);
  box-shadow:
    0 22px 55px rgba(15,23,42,.80),
    0 0 0 1px rgba(15,23,42,1);

  z-index:120; /* nổi trên composer + thread */
  backdrop-filter:blur(12px) saturate(160%);
}

.chat-template-menu.hidden{ display:none !important; }

/* Arrow */
.chat-template-menu::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:-7px;
  border-width:7px;
  border-style:solid;
  border-color:rgba(15,23,42,.98) transparent transparent transparent;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.55));
}

/* Header */
.chat-template-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;

  padding:12px 12px 10px;
  border-bottom:1px solid rgba(148,163,184,.30);

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

.chat-template-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
  font-weight:950;
  color:#e5e7eb;
  letter-spacing:.01em;
}
.chat-template-title-ic{ font-size:16px; }
.chat-template-sub{
  font-size:11px;
  font-weight:800;
  color:rgba(148,163,184,.95);
  border:1px solid rgba(148,163,184,.45);
  padding:3px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.55);
}

.chat-template-close{
  appearance:none;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.72);
  color:#e5e7eb;

  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.chat-template-close:hover{ filter:brightness(1.08); }
.chat-template-close:active{ transform:translateY(1px); }

/* Toolbar: search + refresh */
.chat-template-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.92);
}

.chat-template-search{
  flex:1 1 auto;
  min-width:0;
}
.chat-template-search input{
  width:100%;
  box-sizing:border-box;

  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.55);

  background:rgba(2,6,23,.55);
  color:#e5e7eb;
  font-size:12.5px;
  outline:none;

  box-shadow:0 10px 22px rgba(15,23,42,.25);
}
.chat-template-search input::placeholder{ color:rgba(148,163,184,.85); }
.chat-template-search input:focus{
  border-color:rgba(99,102,241,.75);
  box-shadow:0 0 0 3px rgba(99,102,241,.16), 0 10px 22px rgba(15,23,42,.25);
}

.chat-template-refresh{
  appearance:none;
  border:1px solid rgba(148,163,184,.65);
  background:rgba(15,23,42,.72);
  color:#e5e7eb;

  width:40px;
  height:38px;
  border-radius:12px;
  cursor:pointer;

  display:grid;
  place-items:center;
  box-shadow:0 10px 22px rgba(15,23,42,.20);
}
.chat-template-refresh:hover{ filter:brightness(1.08); }
.chat-template-refresh:active{ transform:translateY(1px); }

/* List */
.chat-template-list{
  padding:10px 10px 12px;
  overflow:auto;
  max-height:calc(min(460px, 62vh) - 120px); /* trừ head+toolbar+foot */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.chat-template-empty{
  padding:10px 10px;
  border-radius:14px;
  border:1px dashed rgba(148,163,184,.55);
  background:rgba(2,6,23,.45);
  color:rgba(148,163,184,.95);
  font-size:12px;
  line-height:1.6;
}

/* Item */
.chat-template-item{
  width:100%;
  text-align:left;
  appearance:none;
  border:1px solid rgba(148,163,184,.50);
  background:rgba(2,6,23,.55);
  color:#e5e7eb;

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

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  box-shadow:0 10px 22px rgba(15,23,42,.22);
  transition:transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
.chat-template-item + .chat-template-item{ margin-top:8px; }
.chat-template-item:hover{
  transform:translateY(-0.5px);
  filter:brightness(1.05);
  border-color:rgba(191,219,254,.85);
  background:rgba(30,64,175,.22);
}
.chat-template-item[aria-selected="true"]{
  border-color:rgba(34,197,94,.72);
  background:rgba(34,197,94,.10);
  box-shadow:0 0 0 3px rgba(34,197,94,.12), 0 10px 22px rgba(15,23,42,.22);
}

.chat-template-item-main{ min-width:0; }
.chat-template-item-name{
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-template-item-meta{
  margin-top:3px;
  font-size:11px;
  color:rgba(148,163,184,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-template-item-chip{
  flex:0 0 auto;
  font-size:11px;
  font-weight:950;
  letter-spacing:.01em;
  padding:6px 10px;
  border-radius:999px;

  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.65);
  color:#e5e7eb;
}
.chat-template-item[aria-selected="true"] .chat-template-item-chip{
  border-color:rgba(34,197,94,.60);
  background:rgba(34,197,94,.16);
  color:#bbf7d0;
}

/* Footer hint */
.chat-template-foot{
  padding:10px 12px 12px;
  border-top:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.92);
}
.chat-template-hint{
  font-size:12px;
  color:rgba(148,163,184,.95);
  line-height:1.6;
}

/* Light mode overrides */
@media (prefers-color-scheme: light){
  .chat-template-menu{
    background:#ffffff;
    border-color:rgba(148,163,184,.7);
    box-shadow:0 22px 50px rgba(15,23,42,.18);
  }
  .chat-template-menu::after{
    border-color:#ffffff transparent transparent transparent;
    filter:drop-shadow(0 10px 18px rgba(15,23,42,.10));
  }

  .chat-template-head{
    background:linear-gradient(135deg,#ffffff,#eef2ff);
    border-bottom-color:rgba(148,163,184,.30);
  }
  .chat-template-title{ color:#0f172a; }
  .chat-template-sub{
    color:#475569;
    background:#ffffff;
    border-color:rgba(148,163,184,.55);
  }
  .chat-template-close{
    background:#ffffff;
    color:#111827;
    border-color:rgba(148,163,184,.7);
  }

  .chat-template-toolbar{ background:#ffffff; }
  .chat-template-search input{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.7);
    box-shadow:0 10px 18px rgba(15,23,42,.08);
  }
  .chat-template-search input::placeholder{ color:#94a3b8; }

  .chat-template-refresh{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.7);
    box-shadow:0 10px 18px rgba(15,23,42,.08);
  }

  .chat-template-empty{
    background:#f9fafb;
    color:#64748b;
    border-color:rgba(148,163,184,.55);
  }

  .chat-template-item{
    background:#f9fafb;
    color:#0f172a;
    border-color:rgba(148,163,184,.55);
    box-shadow:0 10px 18px rgba(15,23,42,.08);
  }
  .chat-template-item:hover{ background:#e5edff; }
  .chat-template-item-meta{ color:#64748b; }
  .chat-template-item-chip{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.65);
  }

  .chat-template-foot{ background:#ffffff; }
}

/* ===================== ✅ UNIFY ICON BUTTON (Attach / Template / Notif / ScrollTop) ===================== */
.chat-icon-btn{
  position:relative;
  width:42px;
  height:42px;
  border-radius:999px;

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

  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.55);
  color:#e5e7eb;

  box-shadow:0 10px 22px rgba(15,23,42,.18);
  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    border-color .12s ease;

  /* ✅ QUAN TRỌNG: không cắt badge */
  overflow:visible;

  /* ✅ tạo stacking context ổn định để badge luôn nổi trên icon */
  isolation:isolate;

  cursor:pointer;
}
.chat-icon-btn:hover{
  filter:brightness(1.06);
  box-shadow:0 12px 26px rgba(15,23,42,.22);
}
.chat-icon-btn:active{
  transform:translateY(1px) scale(.98);
}
.chat-icon-btn:focus-visible{
  outline:none;
  border-color:rgba(99,102,241,.75);
  box-shadow:
    0 0 0 3px rgba(99,102,241,.18),
    0 12px 26px rgba(15,23,42,.20);
}

/* ripple nhẹ (đồng bộ vibe với notif ✓/xoá) */
.chat-icon-btn::after{
  content:"";
  position:absolute;

  /* ✅ giữ ripple trong nút (không tràn) dù overflow:visible */
  inset:0;
  border-radius:inherit;

  background:currentColor;
  opacity:0;
  transform:scale(.25);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;

  /* ✅ ripple nằm dưới icon + badge */
  z-index:0;
}
.chat-icon-btn:active::after{
  opacity:.14;
  transform:scale(1);
}

/* ✅ Composer actions: chỉ còn hàng Notif + Send (ScrollTop đã đưa ra ngoài composer) */
.composer .composer-actions{
  display:flex;
  align-items:center;
}
.composer .composer-actions-row{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ✅ Light mode đồng bộ */
@media (prefers-color-scheme: light){
  .chat-icon-btn{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.75);
    box-shadow:0 10px 18px rgba(15,23,42,.10);
  }
  .chat-icon-btn:focus-visible{
    box-shadow:
      0 0 0 3px rgba(99,102,241,.14),
      0 10px 18px rgba(15,23,42,.10);
  }
}

/* ===================== RECORD BUTTONS (VOICE / MEETING) ===================== */
/* ✅ Dùng chung .chat-icon-btn nên chỉ thêm trạng thái */
.chat-rec-btn{
  position:relative;
}

/* Meeting record icon: round style như ChatGPT */
.chat-rec-btn[data-rec="meeting"] .ic{
  stroke-width:1.9;
}
.chat-rec-btn[data-rec="meeting"] .ic .rec-fill{
  fill:currentColor;
  stroke:none;
  opacity:.92;
}

/* chấm đỏ kiểu ChatGPT khi đang ghi âm */
.chat-rec-dot{
  position:absolute;
  right:6px;
  top:6px;

  width:10px;
  height:10px;
  border-radius:999px;

  background: rgba(239,68,68,.96);
  box-shadow:
    0 0 0 2px rgba(30,31,32,.95),
    0 10px 18px rgba(15,23,42,.22);

  opacity:0;
  transform: scale(.85);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events:none;
  z-index:2;
}

@media (prefers-color-scheme: light){
  .chat-rec-dot{
    box-shadow:
      0 0 0 2px #ffffff,
      0 10px 18px rgba(15,23,42,.12);
  }
}

/* ✅ Khi đang ghi âm */
.chat-rec-btn.is-recording{
  border-color: rgba(239,68,68,.75) !important;
  background: rgba(239,68,68,.12) !important;
  color: rgba(255,255,255,.95);
}

@media (prefers-color-scheme: light){
  .chat-rec-btn.is-recording{
    color: rgba(185,28,28,.95);
    background: rgba(239,68,68,.08) !important;
  }
}

.chat-rec-btn.is-recording .chat-rec-dot{
  opacity:1;
  transform: scale(1);
}

/* ✅ Icon “stop” (vuông) khi đang ghi âm: dùng pseudo để khỏi đổi SVG */
.chat-rec-btn.is-recording::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;

  width:12px;
  height:12px;
  border-radius:3px;

  background: currentColor;
  opacity:.9;

  /* đặt nằm trên icon mic/cam để “giống ChatGPT” */
  z-index:1;
}

/* icon SVG nằm dưới stop overlay khi recording */
.chat-rec-btn.is-recording svg{
  opacity:.25;
}

/* ===================== CHAT LAYOUT CANONICAL (DEDUPED) ===================== */
#testPane #chatPanel.chat{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

#testPane #chatPanel.chat:not(.chat-panel--agent) #chatThread{
  /* ChatGPT-like: thread là vùng scroll chính, composer không bị đẩy khi stream */
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable both-edges;
  /* luôn chừa đủ vùng đáy để nội dung không chui xuống dưới input */
  padding-bottom: calc(max(var(--chat-footer-h, 132px), 132px) + 24px) !important;
  scroll-padding-bottom: calc(max(var(--chat-footer-h, 132px), 132px) + 24px);
}

#testPane #chatPanel.chat.chat-panel--native .chat-footer{
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 10020;
  width: min(920px, calc(100vw - 20px));
  padding: 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
  background: transparent !important;
  border-top: 0 !important;
  backdrop-filter: none !important;
}

#testPane #chatPanel.chat.chat-panel--native .composer{
  pointer-events:auto;
  width: 100%;
  max-width: none;
  margin: 0;

  border-radius: 28px !important;
  border: 1px solid rgba(148,163,184,.48) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.10) !important;

  padding: 10px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 10px;
  align-items: stretch;
}

#testPane #chatPanel.chat.chat-panel--native .composer .chat-attach-preview{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

#testPane #chatPanel.chat.chat-panel--native .composer textarea{
  grid-column: 1;
  grid-row: 2;
  font-size: 16px;
  line-height: 1.45;
  min-height: 24px;
  max-height: 200px;
  padding: 0 2px;
}

#testPane #chatPanel.chat.chat-panel--native .composer .composer-toolbar{
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#testPane #chatPanel.chat.chat-panel--native .composer-left{
  position: relative !important;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

#testPane #chatPanel.chat.chat-panel--native .composer .composer-actions{
  margin-top: 0;
  flex: 0 0 auto;
}

#testPane #chatPanel.chat.chat-panel--native .composer .composer-actions-row{
  gap: 8px;
}

#testPane #chatPanel.chat.chat-panel--native .composer :is(.btn.ghost.icon, .chat-icon-btn, #chatSend){
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
}

#testPane #chatPanel.chat.chat-panel--native .composer :is(.btn.ghost.icon, .chat-icon-btn){
  border: 1px solid rgba(148,163,184,.45);
  background: #ffffff;
  color: #0f172a;
  box-shadow: none !important;
}

#testPane #chatPanel.chat.chat-panel--native .composer #chatSend{
  border: 1px solid rgba(148,163,184,.45);
  background: #ffffff;
  color: #64748b;
}

#testPane #chatPanel.chat.chat-panel--native .composer #chatSend:not(:disabled){
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

@media (prefers-color-scheme: light){
  #testPane #chatPanel.chat.chat-panel--native .composer{
    background: #ffffff !important;
  }
}

@media (prefers-color-scheme: dark){
  #testPane #chatPanel.chat.chat-panel--native .composer{
    background: #2b2d31 !important;
    border-color: rgba(148,163,184,.36) !important;
    box-shadow: 0 12px 28px rgba(2,6,23,.42) !important;
  }
  #testPane #chatPanel.chat.chat-panel--native .composer textarea{
    color: #f1f5f9;
  }
  #testPane #chatPanel.chat.chat-panel--native .composer :is(.btn.ghost.icon, .chat-icon-btn){
    background: #2b2d31;
    border-color: rgba(148,163,184,.36);
    color: #e2e8f0;
  }
  #testPane #chatPanel.chat.chat-panel--native .composer #chatSend{
    border-color: rgba(148,163,184,.36);
    background: #2b2d31;
    color: #94a3b8;
  }
}

#testPane #chatPanel.chat.chat-panel--agent #chatThread{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  display:block !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable both-edges;
  padding-bottom: calc(max(var(--chat-footer-h, 156px), 156px) + 24px) !important;
  scroll-padding-bottom: calc(max(var(--chat-footer-h, 156px), 156px) + 24px);
}

#testPane #chatPanel.chat.chat-panel--agent .chat-footer-actions{
  display: flex !important;
}

#testPane #chatPanel.chat.chat-panel--agent .chat-footer{
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 10020;
  width: min(1080px, calc(100vw - 24px));
  padding: 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
  background: transparent !important;
  border-top: 0 !important;
  backdrop-filter: none !important;
}

#testPane #chatPanel.chat.chat-panel--agent .composer{
  pointer-events:auto;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 28px !important;
  border: 1px solid rgba(148,163,184,.48) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.10) !important;
  padding: 12px 14px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 8px;
  align-items: stretch;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .chat-attach-preview{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

#testPane #chatPanel.chat.chat-panel--agent .composer textarea{
  grid-column: 1;
  grid-row: 2;
  font-size: 16px;
  line-height: 1.45;
  min-height: 24px;
  max-height: 200px;
  padding: 0 2px 2px;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .composer-toolbar{
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-top: 0;
  border-top: 0;
}

#testPane #chatPanel.chat.chat-panel--agent .composer-left{
  position: relative !important;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .composer-actions{
  margin-top: 0;
  flex: 0 0 auto;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .composer-actions-row{
  gap: 8px;
}

#testPane #chatPanel.chat.chat-panel--agent .composer :is(.chat-agent-add-btn, .chat-agent-chip, .chat-icon-btn, #chatSend){
  height: 38px !important;
  border-radius: 999px !important;
}

#testPane #chatPanel.chat.chat-panel--agent .composer :is(.chat-agent-add-btn, .chat-agent-chip){
  border: 1px solid rgba(148,163,184,.45);
  background: #ffffff;
  color: #0f172a;
  box-shadow: none !important;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .chat-agent-add-btn{
  width: 38px !important;
  padding: 0 !important;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .chat-agent-chip{
  min-width: 0;
  max-width: min(240px, 28vw);
}

#testPane #chatPanel.chat.chat-panel--agent .composer .chat-agent-access-wrap{
  margin-left: 0;
}

#testPane #chatPanel.chat.chat-panel--agent .composer .chat-agent-popover{
  border-color: rgba(226,232,240,.92);
  background: rgba(255,255,255,.98);
}

#testPane #chatPanel.chat.chat-panel--agent .composer #chatSend{
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(148,163,184,.45);
  background: #ffffff;
  color: #64748b;
}

#testPane #chatPanel.chat.chat-panel--agent .composer #chatSend:not(:disabled){
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

@media (prefers-color-scheme: light){
  #testPane #chatPanel.chat.chat-panel--agent .composer{
    background: #ffffff !important;
  }
  #testPane #chatPanel.chat.chat-panel--agent .composer :is(.chat-agent-add-btn, .chat-agent-chip){
    border-color: rgba(148,163,184,.32);
    background: #ffffff;
    color: #0f172a;
  }
  #testPane #chatPanel.chat.chat-panel--agent .composer #chatSend{
    border-color: rgba(148,163,184,.34);
    background: #ffffff;
    color: #64748b;
  }
}

@media (max-width: 980px){
  #testPane #chatPanel.chat.chat-panel--agent .chat-footer{
    width: calc(100vw - 16px);
  }

  #testPane #chatPanel.chat.chat-panel--agent .composer{
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    padding: 12px !important;
    border-radius: 26px !important;
  }

  #testPane #chatPanel.chat.chat-panel--agent .composer .composer-toolbar{
    grid-row: 3;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #testPane #chatPanel.chat.chat-panel--agent .composer .chat-agent-access-wrap{
    margin-left: 0;
  }

  #testPane #chatPanel.chat.chat-panel--agent .composer .chat-agent-chip{
    max-width: none;
  }

  #testPane #chatPanel.chat.chat-panel--agent .composer .composer-actions{
    margin-left: auto;
  }

  #testPane #chatPanel.chat.chat-panel--agent .composer .composer-actions-row{
    justify-content: flex-end;
  }
}

#testPane #chatPanel.chat.chat-panel--agent #chatkitCompareShell{
  display: none !important;
}

#testPane #chatPanel.chat.chat-panel--agent #chatkitWrap,
#testPane #chatPanel.chat.chat-panel--agent #chatkitPlaygroundWrap{
  flex: 1 1 auto;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

@media (max-width: 980px){
  #testPane #chatPanel.chat.chat-panel--native .chat-footer{
    width: calc(100vw - 12px);
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    padding: 0;
  }

  #testPane #chatPanel.chat.chat-panel--native .composer{
    max-width: none;
    border-radius: 24px !important;
    padding: 8px 10px !important;
    row-gap: 6px;
  }
}

/* Nút thông báo trong composer: bỏ hoàn toàn shadow bọc quanh nút */
.chat-notif-btn,
.chat-notif-btn:hover,
.chat-notif-btn:active,
.chat-notif-btn:focus,
.chat-notif-btn:focus-visible{
  box-shadow:none !important;
}

/* ===================== ChatGPT-like REC OVERLAY (TOP-RIGHT UNDER TOPBAR) ===================== */
.wi-rec-overlay{
  position: fixed;
  right: 16px;
  top: calc(var(--topbar-h, 56px) + 10px + env(safe-area-inset-top, 0px));

  /* ✅ luôn đè lên topbar + mọi menu */
  z-index: 120000;

  pointer-events: none;
}

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

.wi-rec-overlay .wi-rec-card{
  pointer-events: auto;
  width: min(420px, calc(100vw - 24px));
  border-radius: 18px;
  padding: 12px 12px 10px;
  background: rgba(240,240,240,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  color: rgba(17,24,39,.92);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial);
}

/* Header */
.wi-rec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

/* ✅ FIX: nút huỷ tương phản tốt ở dark mode + nhỏ gọn, thiên vuông */
.wi-rec-x{
  width: 32px;                 /* nhỏ gọn nhưng dễ bấm */
  height: 32px;
  border-radius: 10px;         /* vuông bo góc, không còn pill */
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  color: rgba(17,24,39,.78);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;

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

  transition: background .15s ease, border-color .15s ease, transform .12s ease, filter .15s ease;
}
.wi-rec-x:hover{ background: rgba(0,0,0,.09); }
.wi-rec-x:active{ transform: translateY(1px); }

.wi-rec-time{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: rgba(0,0,0,.45);
}

/* Waveform (REAL MIC METER — driven by JS) */
.wi-rec-wave{
  display:flex;
  align-items:flex-end;
  gap: 3px;
  height: 16px;
  width: 28px;
  opacity: .9;                 /* rõ ràng hơn */
}

.wi-rec-wave .bar{
  display:block;
  width: 3px;
  border-radius: 3px;
  height: 16px;                /* full height container */
  background: rgba(0,0,0,.55);
  transform-origin: bottom;

  /* ✅ JS sẽ set biến --wiY (0..1) cho từng bar */
  transform: scaleY(var(--wiY, .18));

  /* ✅ mượt kiểu ChatGPT */
  transition: transform 80ms linear, opacity 120ms ease;
  opacity: calc(.55 + (var(--wiY, .18) * .45));
}

/* ✅ Khi đang recording, tăng chút độ rõ */
.wi-rec-overlay.is-recording .wi-rec-wave{ opacity: 1; }

/* ✅ Khi không recording, waveform “idle” nhỏ */
.wi-rec-overlay:not(.is-recording) .wi-rec-wave .bar{
  transform: scaleY(.18);
  opacity: .55;
}

/* Dark mode đã có nền bar trắng; giữ lại như bạn đang có */
@media (prefers-color-scheme: dark){
  .wi-rec-wave .bar{ background: rgba(255,255,255,.78); }
}

/* Body (Stop pill) */
/* ✅ giữ bố cục, chỉ thu gọn chiều cao một chút để “gọn” hơn */
.wi-rec-body{ margin-top: 10px; }
.wi-rec-stop-pill{
  width: 100%;
  height: 40px;                /* 44 -> 40 (gọn hơn) */
  border-radius: 14px;         /* bớt “pill”, thiên vuông */
  border: 1px solid rgba(220,38,38,.18);
  background: rgba(239,68,68,.18);
  color: rgba(220,38,38,.92);
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  transition: filter .15s ease, transform .12s ease, background .15s ease;
}
.wi-rec-stop-pill:hover{ filter: brightness(1.03); }
.wi-rec-stop-pill:active{ transform: translateY(1px); }

.wi-rec-hint{
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(0,0,0,.45);
}

/* Review row */
.wi-rec-review{
  margin-top: 10px;
  display:flex;
  gap: 10px;
}
.wi-rec-review.hidden{ display:none !important; }

/* ✅ thu gọn + thiên vuông, KHÔNG đổi bố cục; giữ nguyên màu upload & xoá */
.wi-rec-btn{
  flex: 1 1 0;
  height: 36px;                /* 40 -> 36 (gọn hơn) */
  border-radius: 12px;         /* 999px -> 12px (thiên vuông) */
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.75);
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;                    /* 10 -> 8 (gọn) */
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, filter .15s ease;
}
.wi-rec-btn:hover{ background: rgba(0,0,0,.08); }
.wi-rec-btn:active{ transform: translateY(1px); }

/* ✅ giữ nguyên màu nút tải lên */
.wi-rec-send{
  background: rgba(37,99,235,.92);
  border-color: rgba(37,99,235,.20);
  color: #fff;
}
.wi-rec-send:hover{ filter: brightness(1.03); }

.wi-rec-ico{
  display:inline-flex;
  width: 18px;
  justify-content:center;
  font-weight: 900;
}

/* Confirm popup (outside rec-card) */
.wi-rec-confirm{
  position: fixed;
  inset: 0;
  z-index: 120001;

  background: rgba(15,23,42,.24);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

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

  padding: 14px;
  pointer-events: auto;
}
.wi-rec-confirm.hidden{ display:none !important; }

.wi-rec-confirm-card{
  width: min(360px, calc(100vw - 48px));
  border-radius: 18px;
  background: rgba(246,246,246,.98);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  padding: 14px;
}
.wi-rec-confirm-title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}
.wi-rec-confirm-sub{
  font-size: 13px;
  color: rgba(0,0,0,.60);
  line-height: 1.35;
  margin-bottom: 12px;
}

/* ✅ thu gọn confirm button, thiên vuông */
.wi-rec-confirm-btn{
  width: 100%;
  height: 36px;                /* 40 -> 36 */
  border-radius: 12px;         /* 999px -> 12px */
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.78);
  font-weight: 900;
  cursor:pointer;
  margin-top: 10px;
  transition: filter .15s ease, transform .12s ease, background .15s ease, border-color .15s ease;
}
.wi-rec-confirm-btn.primary{
  background: rgba(37,99,235,.92);
  border-color: rgba(37,99,235,.20);
  color: #fff;
}
/* ✅ giữ nguyên màu nút xoá */
.wi-rec-confirm-btn.danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.18);
  color: rgba(220,38,38,.92);
}
.wi-rec-confirm-btn:hover{ filter: brightness(1.03); }
.wi-rec-confirm-btn:active{ transform: translateY(1px); }

/* Khi đang xác nhận: khóa tương tác card ghi âm phía dưới */
.wi-rec-overlay.confirming{
  pointer-events: auto;
}
.wi-rec-overlay.confirming .wi-rec-card{
  pointer-events: none;
}

/* Light/Dark auto */
@media (prefers-color-scheme: dark){
  .wi-rec-confirm{
    background: rgba(0,0,0,.36);
  }

  .wi-rec-overlay .wi-rec-card{
    background: rgba(24,24,24,.82);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
    color: rgba(255,255,255,.88);
  }

  /* ✅ FIX: nút huỷ tương phản rõ hơn trong dark mode */
  .wi-rec-x{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }
  .wi-rec-x:hover{ background: rgba(255,255,255,.14); }

  .wi-rec-time{ color: rgba(255,255,255,.60); }
  .wi-rec-wave .bar{ background: rgba(255,255,255,.75); }

  .wi-rec-hint{ color: rgba(255,255,255,.60); }

  .wi-rec-btn{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
  }
  .wi-rec-btn:hover{ background: rgba(255,255,255,.13); }

  .wi-rec-confirm-card{
    background: rgba(30,30,30,.98);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
  }
  .wi-rec-confirm-sub{ color: rgba(255,255,255,.66); }

  /* ✅ confirm button base ở dark mode (primary/danger giữ nguyên màu) */
  .wi-rec-confirm-btn{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
  }
}
/* ===================== END ChatGPT-like REC OVERLAY ===================== */

/* ===================== CHATKIT FULLSCREEN FIT (TEST PANE ONLY) ===================== */
/* Scope trong #testPane để không ảnh hưởng overlay panel trên topbar */
#testPane{
  min-height: calc(100dvh - var(--topbar-h, 46px) - 36px);
}

#testPane .test-ai-card{
  min-height: clamp(560px, calc(100dvh - var(--topbar-h, 46px) - 72px), 1600px);
  height: clamp(560px, calc(100dvh - var(--topbar-h, 46px) - 72px), 1600px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#testPane .chat-agent-runtime,
#testPane .chat-agent-fallback{
  width: calc(100% - 24px);
  max-width: none;
}

#testPane .chatkit-wrap{
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

#testPane .chatkit-compare-shell{
  width: 100%;
  min-height: 0;
}

#testPane .chatkit-compare-card{
  min-height: 0;
}

#testPane .chatkit-compare-body{
  min-height: 0;
}

#testPane #chatPanel.chat.chat-panel--agent .chatkit-wrap,
#testPane #chatPanel.chat.chat-panel--agent .chatkit-wrap.chatkit-wrap--compact,
#testPane #chatPanel.chat.chat-panel--agent .chatkit-wrap.chatkit-wrap--awaiting{
  box-shadow: none !important;
  opacity: 1 !important;
}

#testPane #chatPanel.chat.chat-panel--agent .chatkit-placeholder{
  background: transparent !important;
}

#testPane .chatkit-wrap:not(.chatkit-wrap--compact):not(.chatkit-wrap--awaiting){
  min-height: clamp(420px, calc(100dvh - var(--topbar-h, 46px) - 250px), 1200px) !important;
}

#testPane #chatPanel.chat.chat-panel--agent .chatkit-wrap.chatkit-wrap--compare:not(.chatkit-wrap--compact):not(.chatkit-wrap--awaiting){
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

#testPane .chatkit-wrap > *{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#testPane .chatkit-wrap iframe{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border: 0 !important;
  display: block !important;
}

#testPane .chatkit-wrap > iframe,
#testPane .chatkit-wrap > openai-chatkit,
#testPane .chatkit-wrap > chatkit-widget,
#testPane .chatkit-wrap > chatkit-ui,
#testPane .chatkit-wrap > chatkit-app{
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  display: block;
  flex: 1 1 auto;
}

#testPane .chatkit-wrap :is([class*="container"], [class*="layout"], [class*="content"], [class*="thread"], [class*="composer"]){
  width: 100% !important;
  max-width: none !important;
}

/* Nếu ChatKit expose CSS vars thì ưu tiên mở rộng vùng đọc/nhập */
#testPane .chatkit-wrap,
#testPane .chatkit-wrap > openai-chatkit,
#testPane .chatkit-wrap > chatkit-widget,
#testPane .chatkit-wrap > chatkit-ui,
#testPane .chatkit-wrap > chatkit-app{
  --chatkit-content-max-width: min(1600px, 96vw);
  --chatkit-thread-max-width: min(1600px, 96vw);
  --chatkit-composer-max-width: min(1440px, 94vw);
  --ck-content-max-width: min(1600px, 96vw);
  --ck-thread-max-width: min(1600px, 96vw);
  --ck-composer-max-width: min(1440px, 94vw);
}

@media (max-width: 980px){
  #testPane{
    min-height: auto;
  }

  #testPane .test-ai-card{
    height: auto;
    min-height: 500px;
  }

  #testPane #chatPanel.chat.chat-panel--agent #chatkitCompareShell{
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: 12px;
  }

  #testPane .chatkit-wrap:not(.chatkit-wrap--compact):not(.chatkit-wrap--awaiting){
    min-height: 62vh !important;
  }

  #testPane #chatPanel.chat.chat-panel--agent .chatkit-wrap.chatkit-wrap--compare:not(.chatkit-wrap--compact):not(.chatkit-wrap--awaiting){
    height: auto !important;
    max-height: none !important;
    min-height: 62vh !important;
  }
}

/* Notification center mailbox refresh */
.wi-notif-modal{
  width:min(1180px, 95vw);
}

.wi-notif-body{
  grid-template-columns:minmax(328px, 390px) minmax(0,1fr);
}

.wi-notif-listhead{
  display:grid;
  gap:16px;
  padding:16px 14px 14px;
}

.wi-notif-sidebargroup{
  display:grid;
  gap:10px;
}

.wi-notif-sidebarlabel{
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(148,163,184,.92);
}

.wi-notif-mailtabs{
  display:grid;
  gap:6px;
}

.wi-notif-mailtab{
  appearance:none;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:#e2e8f0;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.wi-notif-mailtab:hover{
  background:rgba(148,163,184,.08);
  border-color:rgba(148,163,184,.16);
}

.wi-notif-mailtab.is-active{
  border-color:rgba(99,102,241,.22);
  background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(59,130,246,.10));
  box-shadow:0 10px 22px rgba(2,6,23,.12);
}

.wi-notif-mailtab-main{
  min-width:0;
  display:grid;
  gap:4px;
}

.wi-notif-mailtab-label{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#f8fafc;
}

.wi-notif-mailtab-sub{
  font-size:11.5px;
  line-height:1.45;
  color:rgba(148,163,184,.92);
}

.wi-notif-mailtab-count,
.wi-notif-kindfilter-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(15,23,42,.48);
  border:1px solid rgba(148,163,184,.18);
  color:#e2e8f0;
  font-size:11px;
  font-weight:700;
}

.wi-notif-kindfilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wi-notif-kindfilter{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.26);
  color:#e2e8f0;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.wi-notif-kindfilter:hover{
  border-color:rgba(148,163,184,.32);
  background:rgba(148,163,184,.10);
}

.wi-notif-kindfilter.is-active{
  border-color:rgba(99,102,241,.30);
  background:rgba(99,102,241,.16);
  box-shadow:0 10px 20px rgba(99,102,241,.12);
}

.wi-notif-kindfilter-label{
  font-size:12px;
  font-weight:650;
}

.wi-notif-listmeta{
  display:grid;
  gap:6px;
  padding-top:4px;
  border-top:1px solid rgba(148,163,184,.14);
}

.wi-notif-listtitle{
  font-size:15px;
  line-height:1.2;
  font-weight:720;
  letter-spacing:-.01em;
  text-transform:none;
  color:#f8fafc;
}

.wi-notif-listsummary{
  margin-top:0;
  font-size:12px;
  line-height:1.55;
  color:rgba(148,163,184,.94);
}

.wi-notif-list{
  padding:12px;
}

.wi-notif-item{
  padding:14px 12px 14px 14px;
  border-radius:18px;
}

.wi-notif-item-main{
  display:grid;
  gap:8px;
}

.wi-notif-item-head{
  align-items:flex-start;
  gap:12px;
}

.wi-notif-item-senderline{
  min-width:0;
  display:grid;
  gap:3px;
}

.wi-notif-item-fromname{
  font-size:14px;
  line-height:1.3;
  font-weight:700;
  color:#f8fafc;
}

.wi-notif-item-context{
  font-size:11.5px;
  line-height:1.45;
  color:rgba(148,163,184,.94);
}

.wi-notif-item-time{
  padding-top:1px;
  font-size:11.5px;
  font-weight:650;
}

.wi-notif-item-badges{
  gap:6px;
}

.wi-notif-item-fromrow{
  margin-top:0;
}

.wi-notif-item-when{
  font-size:11.5px;
  line-height:1.4;
  color:rgba(148,163,184,.94);
}

.wi-notif-item-subject{
  font-size:14px;
  line-height:1.45;
  font-weight:620;
  letter-spacing:-.01em;
  color:#f8fafc;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wi-notif-item-preview{
  font-size:12.5px;
  line-height:1.62;
  font-weight:450;
  color:rgba(203,213,225,.94);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wi-notif-item-signals{
  margin-top:0;
}

.wi-notif-item-signal{
  min-height:22px;
  padding:0 8px;
  font-size:10.5px;
  font-weight:650;
}

.wi-notif-item-side{
  padding-top:0;
}

.wi-notif-kind{
  padding:5px 9px;
  font-size:11px;
  font-weight:780;
}

.wi-notif-statuspill{
  font-weight:720;
}

.wi-notif-newpill{
  font-weight:760;
}

.wi-notif-threadpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.30);
  background:rgba(99,102,241,.14);
  color:#e0e7ff;
  font-size:10.5px;
  font-weight:760;
  letter-spacing:.01em;
}

.wi-notif-threadpill.is-compact{
  min-height:22px;
}

.wi-notif-detail-title{
  font-weight:760;
}

.wi-notif-detail-context{
  font-size:12.5px;
  line-height:1.55;
  color:rgba(148,163,184,.96);
}

.wi-notif-detail-meta{
  gap:10px;
}

.wi-notif-detail-metaitem{
  display:inline-grid;
  gap:3px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(15,23,42,.28);
  border:1px solid rgba(148,163,184,.16);
}

.wi-notif-detail-metalabel{
  font-size:10.5px;
  line-height:1;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(148,163,184,.94);
}

.wi-notif-detail-metavalue{
  font-size:12.5px;
  line-height:1.5;
  font-weight:620;
  color:#f8fafc;
}

.wi-notif-signalvalue{
  font-weight:620;
}

.wi-notif-action-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}

.wi-notif-action-label{
  font-size:11px;
  line-height:1.6;
  font-weight:760;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#bfdbfe;
}

.wi-notif-replymeta{
  line-height:1.65;
}

.wi-notif-replymeta-label{
  color:rgba(148,163,184,.94);
}

.wi-notif-replymeta-value{
  color:#f8fafc;
  font-weight:650;
}

.wi-notif-replymeta b,
.wi-notif-block-sub b{
  font-weight:700;
}

@media (max-width:980px){
  .wi-notif-body{
    grid-template-columns:1fr;
  }

  .wi-notif-mailtabs{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .wi-notif-mailtabs{
    grid-template-columns:1fr;
  }

  .wi-notif-kindfilters{
    gap:6px;
  }

  .wi-notif-kindfilter{
    min-height:32px;
    padding:0 10px;
  }

  .wi-notif-item{
    padding:13px 12px;
  }
}

@media (prefers-color-scheme: light){
  .wi-notif-sidebarlabel{
    color:#64748b;
  }

  .wi-notif-mailtab{
    color:#0f172a;
  }

  .wi-notif-mailtab:hover{
    background:rgba(148,163,184,.10);
    border-color:rgba(148,163,184,.16);
  }

  .wi-notif-mailtab.is-active{
    border-color:rgba(59,130,246,.20);
    background:linear-gradient(135deg, rgba(59,130,246,.10), rgba(99,102,241,.08));
    box-shadow:0 12px 22px rgba(15,23,42,.06);
  }

  .wi-notif-mailtab-label{
    color:#0f172a;
  }

  .wi-notif-mailtab-sub{
    color:#64748b;
  }

  .wi-notif-mailtab-count,
  .wi-notif-kindfilter-count{
    background:#ffffff;
    border-color:rgba(148,163,184,.20);
    color:#334155;
  }

  .wi-notif-kindfilter{
    background:#ffffff;
    border-color:rgba(148,163,184,.24);
    color:#334155;
  }

  .wi-notif-kindfilter:hover{
    background:rgba(99,102,241,.06);
    border-color:rgba(99,102,241,.18);
  }

  .wi-notif-kindfilter.is-active{
    background:rgba(99,102,241,.10);
    border-color:rgba(99,102,241,.26);
    box-shadow:0 10px 18px rgba(99,102,241,.08);
  }

  .wi-notif-listmeta{
    border-top-color:rgba(148,163,184,.16);
  }

  .wi-notif-listtitle{
    color:#0f172a;
  }

  .wi-notif-listsummary{
    color:#64748b;
  }

  .wi-notif-item-fromname,
  .wi-notif-item-subject{
    color:#0f172a;
  }

  .wi-notif-item-context,
  .wi-notif-item-preview,
  .wi-notif-item-when{
    color:#64748b;
  }

  .wi-notif-threadpill{
    color:#4338ca;
    background:rgba(99,102,241,.08);
    border-color:rgba(99,102,241,.22);
  }

  .wi-notif-detail-context{
    color:#64748b;
  }

  .wi-notif-detail-metaitem{
    background:#ffffff;
    border-color:rgba(148,163,184,.18);
  }

  .wi-notif-detail-metalabel{
    color:#64748b;
  }

  .wi-notif-detail-metavalue{
    color:#0f172a;
  }

  .wi-notif-action-label{
    color:#4f46e5;
  }

  .wi-notif-replymeta-value{
    color:#0f172a;
  }
}

/* Notification center compact filter + denser sidebar */
.wi-notif-toolbar{
  padding:12px 14px;
  justify-content:stretch;
}

.wi-notif-searchwrap{
  width:100%;
  min-width:0;
  max-width:none;
}

.wi-notif-filtermenu{
  width:min(336px, 86vw);
}

.wi-notif-body{
  grid-template-columns:minmax(390px, 460px) minmax(0,1fr);
}

.wi-notif-listhead{
  gap:10px;
  padding:12px 12px 10px;
}

.wi-notif-mailtabs{
  grid-template-columns:repeat(2, minmax(0, max-content));
  justify-content:flex-start;
  gap:6px;
}

.wi-notif-mailtab{
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  padding:9px 10px;
  border-radius:12px;
  min-width:56px;
}

.wi-notif-mailtab-icon{
  font-size:13px;
  line-height:1;
  color:inherit;
}

.wi-notif-mailtab-count{
  min-width:24px;
  height:22px;
  padding:0 7px;
  font-size:10.5px;
}

.wi-notif-list{
  padding:8px 10px 12px;
}

.wi-notif-item{
  display:block;
  padding:12px 12px 13px;
}

.wi-notif-item-main{
  gap:7px;
}

.wi-notif-item-head{
  gap:10px;
}

.wi-notif-item-time{
  font-size:11px;
}

.wi-notif-item-fromname{
  font-size:13.5px;
}

.wi-notif-item-context{
  font-size:11px;
}

.wi-notif-item-badges{
  gap:5px;
}

.wi-notif-item-subject{
  font-size:13.5px;
  line-height:1.42;
  -webkit-line-clamp:2;
  font-weight:680;
}

.wi-notif-item-preview{
  font-size:12.5px;
  line-height:1.58;
  -webkit-line-clamp:3;
}

.wi-notif-item-fromrow{
  margin-top:-1px;
}

.wi-notif-item-when{
  font-size:11px;
}

.wi-notif-item-signals{
  gap:5px;
}

.wi-notif-item-signal{
  min-height:20px;
  padding:0 7px;
  font-size:10px;
}

.wi-notif-item-side{
  display:none;
}

.wi-notif-meta-chips.is-compact{
  display:none;
}

.wi-notif-kind{
  padding:4px 8px;
  font-size:10.5px;
  font-weight:740;
}

.wi-notif-statuspill,
.wi-notif-threadpill,
.wi-notif-newpill{
  font-size:10px;
}

@media (max-width:980px){
  .wi-notif-body{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .wi-notif-mailtabs{
    grid-template-columns:1fr 1fr;
  }

  .wi-notif-item{
    padding:11px 11px 12px;
  }

  .wi-notif-item-preview{
    -webkit-line-clamp:2;
  }
}

@media (prefers-color-scheme: light){
  .wi-notif-mailtab-count{
    background:#f8fafc;
  }
}

/* Notification center detail footer + AI emphasis */
.wi-notif-detailpane{
  grid-template-rows:minmax(0,1fr) auto auto;
}

.wi-notif-detail{
  padding:18px 18px 12px;
}

.wi-notif-detail-card{
  gap:16px;
  padding-bottom:18px;
}

.wi-notif-content,
.wi-notif-split{
  margin-top:2px;
}

.wi-notif-content{
  padding:18px 18px 20px;
  background:rgba(15,23,42,.22);
}

.wi-notif-item-body,
.wi-notif-block-body{
  font-size:14px;
  line-height:1.82;
}

.wi-notif-signalgrid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.wi-notif-aihint{
  display:grid;
  gap:10px;
  padding:16px 18px;
  border-color:rgba(99,102,241,.24);
  background:
    linear-gradient(135deg, rgba(99,102,241,.16), rgba(59,130,246,.10));
  box-shadow:0 14px 28px rgba(59,130,246,.10);
}

.wi-notif-aihint-label{
  color:#c7d2fe;
}

.wi-notif-aihint-text{
  margin-top:0;
  font-size:14px;
  line-height:1.75;
  color:#eff6ff;
}

.wi-notif-aihint-actions{
  display:grid;
  gap:8px;
  padding-top:2px;
}

.wi-notif-aihint-subtitle{
  font-size:11px;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(191,219,254,.92);
}

.wi-notif-action-summary{
  margin-top:0;
}

.wi-notif-actionbar{
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(148,163,184,.16);
  background:
    linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.20) 28%, rgba(2,6,23,.56) 100%);
}

.wi-notif-actiondock{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(2,6,23,.82);
  box-shadow:0 16px 38px rgba(2,6,23,.24);
  backdrop-filter:blur(10px) saturate(120%);
}

.wi-notif-actiondock.is-empty{
  opacity:.92;
}

.wi-notif-actiondock-head{
  display:grid;
  gap:6px;
}

.wi-notif-actiondock-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.48);
  color:#cbd5e1;
  font-size:11px;
  font-weight:780;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.wi-notif-actiondock-statusdot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  opacity:.92;
}

.wi-notif-actiondock-status.is-open{
  color:#60a5fa;
  border-color:rgba(59,130,246,.34);
  background:rgba(37,99,235,.12);
}

.wi-notif-actiondock-status.is-closed{
  color:#4ade80;
  border-color:rgba(34,197,94,.34);
  background:rgba(21,128,61,.14);
}

.wi-notif-actiondock-status.is-sent{
  color:#c4b5fd;
  border-color:rgba(139,92,246,.30);
  background:rgba(76,29,149,.20);
}

.wi-notif-actiondock-status.is-empty{
  color:#94a3b8;
}

.wi-notif-actiondock-caption{
  font-size:12.5px;
  line-height:1.55;
  color:#cbd5e1;
}

.wi-notif-actiondock-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:10px;
  align-items:stretch;
}

.wi-notif-actiondock-col{
  display:grid;
  gap:10px;
  align-items:stretch;
}

.wi-notif-actiondock-col--primary{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.wi-notif-actiondock-col--utility{
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
}

.wi-notif-actionbtn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.30);
  background:rgba(15,23,42,.56);
  color:#e2e8f0;
  font-size:13px;
  font-weight:720;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  cursor:pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

.wi-notif-actionbtn:hover{
  border-color:rgba(148,163,184,.48);
  box-shadow:0 10px 20px rgba(2,6,23,.20);
}

.wi-notif-actionbtn:active{
  transform:translateY(1px);
}

.wi-notif-actionbtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(96,165,250,.30), 0 10px 20px rgba(2,6,23,.20);
}

.wi-notif-actionbtn:disabled{
  opacity:.52;
  cursor:not-allowed;
  box-shadow:none;
}

.wi-notif-actionbtn--primary{
  border-color:rgba(59,130,246,.44);
  background:linear-gradient(135deg, rgba(37,99,235,.30), rgba(29,78,216,.50));
  color:#eff6ff;
  font-weight:760;
}

.wi-notif-actionbtn--primary:hover{
  border-color:rgba(96,165,250,.60);
}

.wi-notif-actionbtn--status{
  border-color:rgba(148,163,184,.34);
  background:rgba(30,41,59,.58);
}

.wi-notif-actionbtn--status.is-active,
.wi-notif-actionbtn--status[aria-pressed="true"]{
  border-color:rgba(34,197,94,.44);
  background:rgba(21,128,61,.20);
  color:#dcfce7;
}

.wi-notif-actionbtn--utility{
  border-color:rgba(148,163,184,.30);
  background:rgba(51,65,85,.56);
}

.wi-notif-actionbtn--danger{
  border-color:rgba(239,68,68,.46);
  background:rgba(127,29,29,.42);
  color:#fee2e2;
}

.wi-notif-actionbtn--danger:hover{
  border-color:rgba(248,113,113,.60);
}

@media (max-width:980px){
  .wi-notif-actionbar{
    padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  }

  .wi-notif-actiondock-grid{
    grid-template-columns:1fr;
  }

  .wi-notif-actiondock-col--utility{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  .wi-notif-actiondock{
    padding:12px;
    gap:10px;
  }

  .wi-notif-actiondock-col--primary,
  .wi-notif-actiondock-col--utility{
    grid-template-columns:1fr;
  }

  .wi-notif-actionbtn{
    min-height:42px;
    font-size:12.5px;
  }
}

@media (prefers-color-scheme: light){
  .wi-notif-aihint{
    background:linear-gradient(135deg, rgba(99,102,241,.10), rgba(59,130,246,.08));
    border-color:rgba(99,102,241,.18);
    box-shadow:0 12px 24px rgba(99,102,241,.08);
  }

  .wi-notif-aihint-label{
    color:#4f46e5;
  }

  .wi-notif-aihint-text{
    color:#1e293b;
  }

  .wi-notif-aihint-subtitle{
    color:#4338ca;
  }

  .wi-notif-actionbar{
    border-top-color:rgba(148,163,184,.20);
    background:
      linear-gradient(180deg, rgba(255,255,255,0), rgba(248,250,252,.84) 28%, rgba(248,250,252,.98));
  }

  .wi-notif-actiondock{
    background:rgba(255,255,255,.98);
    border-color:rgba(148,163,184,.24);
    box-shadow:0 14px 30px rgba(15,23,42,.08);
  }

  .wi-notif-actiondock-status{
    border-color:rgba(148,163,184,.30);
    background:rgba(248,250,252,.96);
    color:#475569;
  }

  .wi-notif-actiondock-status.is-open{
    color:#1d4ed8;
    border-color:rgba(59,130,246,.30);
    background:rgba(219,234,254,.76);
  }

  .wi-notif-actiondock-status.is-closed{
    color:#166534;
    border-color:rgba(34,197,94,.30);
    background:rgba(220,252,231,.80);
  }

  .wi-notif-actiondock-status.is-sent{
    color:#6d28d9;
    border-color:rgba(139,92,246,.30);
    background:rgba(237,233,254,.78);
  }

  .wi-notif-actiondock-caption{
    color:#64748b;
  }

  .wi-notif-actionbtn{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.36);
    box-shadow:0 8px 16px rgba(15,23,42,.06);
  }

  .wi-notif-actionbtn--primary{
    border-color:rgba(37,99,235,.36);
    background:#1d4ed8;
    color:#ffffff;
  }

  .wi-notif-actionbtn--status{
    background:#f8fafc;
  }

  .wi-notif-actionbtn--status.is-active,
  .wi-notif-actionbtn--status[aria-pressed="true"]{
    color:#166534;
    background:rgba(34,197,94,.10);
    border-color:rgba(34,197,94,.30);
  }

  .wi-notif-actionbtn--utility{
    background:#f8fafc;
  }

  .wi-notif-actionbtn--danger{
    color:#b91c1c;
    background:rgba(239,68,68,.10);
    border-color:rgba(239,68,68,.34);
  }

  .wi-notif-content{
    background:#ffffff;
  }
}

/* Notification center smart inbox/detail refinements */
.wi-notif-listhead{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px 8px;
  border-bottom:1px solid rgba(148,163,184,.16);
}

.wi-notif-mailtabs{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
}

.wi-notif-mailtab{
  width:auto;
  min-width:96px;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(15,23,42,.18);
  border:1px solid rgba(148,163,184,.16);
  box-shadow:none;
}

.wi-notif-mailtab:hover{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.24);
}

.wi-notif-mailtab.is-active{
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(59,130,246,.12));
  border-color:rgba(99,102,241,.28);
  box-shadow:0 8px 18px rgba(99,102,241,.12);
}

.wi-notif-mailtab-count{
  min-width:22px;
  height:20px;
  padding:0 6px;
  font-size:10px;
  font-weight:760;
}

.wi-notif-mailtab-label{
  font-size:12.5px;
  line-height:1;
  font-weight:680;
  letter-spacing:-.01em;
  color:inherit;
  white-space:nowrap;
}

.wi-notif-list{
  padding:8px 10px 12px;
}

.wi-notif-item{
  padding:13px 13px 14px;
}

.wi-notif-item-head{
  align-items:flex-start;
}

.wi-notif-item-senderline{
  min-width:0;
  display:grid;
  gap:3px;
}

.wi-notif-item-fromname{
  font-size:13.5px;
  font-weight:660;
}

.wi-notif-item-context{
  font-size:11px;
  line-height:1.45;
}

.wi-notif-item-subject{
  font-size:13.6px;
  line-height:1.42;
  font-weight:680;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.wi-notif-item-preview{
  font-size:12.5px;
  line-height:1.62;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.wi-notif-detail{
  padding:18px 18px 10px;
}

.wi-notif-detail-card{
  gap:18px;
  padding-bottom:12px;
}

.wi-notif-detail-title{
  font-size:21px;
  line-height:1.24;
  font-weight:760;
}

.wi-notif-detail-meta{
  gap:10px;
}

.wi-notif-thread{
  display:grid;
  gap:12px;
}

.wi-notif-messagecard,
.wi-notif-quotecard{
  display:grid;
  gap:10px;
  padding:18px 18px 20px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.22);
}

.wi-notif-messagecard{
  background:rgba(15,23,42,.22);
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}

.wi-notif-messagecard.is-reply{
  border-color:rgba(99,102,241,.26);
  background:linear-gradient(180deg, rgba(99,102,241,.10), rgba(15,23,42,.18));
}

.wi-notif-quotecard{
  background:rgba(15,23,42,.12);
  border-style:dashed;
}

.wi-notif-messagehead{
  font-size:11px;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}

.wi-notif-quote-subject{
  font-size:13.5px;
  line-height:1.52;
  font-weight:680;
  color:#e2e8f0;
}

.wi-notif-messagebody{
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.84;
  color:#e5e7eb;
}

.wi-notif-messagebody.is-quoted{
  color:#cbd5e1;
}

.wi-notif-aihint{
  display:grid;
  gap:10px;
  padding:17px 18px;
}

.wi-notif-aihint-label{
  color:#c7d2fe;
}

.wi-notif-aihint-focus{
  font-size:15px;
  line-height:1.56;
  font-weight:700;
  letter-spacing:-.01em;
  color:#eef2ff;
}

.wi-notif-aihint-text{
  margin-top:0;
  font-size:13.5px;
  line-height:1.72;
}

.wi-notif-aihint-actions{
  gap:10px;
  padding-top:4px;
  border-top:1px solid rgba(191,219,254,.18);
}

.wi-notif-action-summary,
.wi-notif-checklist{
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.14);
}

.wi-notif-action-summary{
  display:grid;
  gap:6px;
}

.wi-notif-action-label{
  line-height:1.2;
}

@media (max-width:980px){
  .wi-notif-listhead{
    padding:10px 10px 8px;
  }

  .wi-notif-detail{
    padding:14px 14px 8px;
  }

  .wi-notif-messagecard,
  .wi-notif-quotecard{
    padding:16px;
  }
}

@media (max-width:640px){
  .wi-notif-mailtab{
    min-width:88px;
    height:36px;
    padding:0 10px;
  }

  .wi-notif-item-preview{
    -webkit-line-clamp:2;
  }

  .wi-notif-detail-title{
    font-size:19px;
  }
}

@media (prefers-color-scheme: light){
  .wi-notif-listhead{
    border-bottom-color:rgba(148,163,184,.18);
  }

  .wi-notif-mailtab{
    background:#ffffff;
    border-color:rgba(148,163,184,.18);
  }

  .wi-notif-mailtab:hover{
    background:#f8fafc;
  }

  .wi-notif-messagecard{
    background:#ffffff;
    border-color:rgba(148,163,184,.18);
    box-shadow:0 12px 24px rgba(15,23,42,.06);
  }

  .wi-notif-messagecard.is-reply{
    background:linear-gradient(180deg, rgba(99,102,241,.06), #ffffff);
    border-color:rgba(99,102,241,.18);
  }

  .wi-notif-quotecard{
    background:#f8fafc;
    border-color:rgba(148,163,184,.20);
  }

  .wi-notif-messagehead{
    color:#64748b;
  }

  .wi-notif-quote-subject{
    color:#0f172a;
  }

  .wi-notif-messagebody{
    color:#0f172a;
  }

  .wi-notif-messagebody.is-quoted{
    color:#475569;
  }

  .wi-notif-aihint-focus{
    color:#1e1b4b;
  }

  .wi-notif-aihint-actions{
    border-top-color:rgba(99,102,241,.12);
  }

  .wi-notif-action-summary,
  .wi-notif-checklist{
    background:#ffffff;
    border-color:rgba(148,163,184,.16);
  }
}

/* Notification center header/search rebalance */
.wi-notif-modal{
  grid-template-rows:auto 1fr;
}

.wi-notif-body{
  grid-template-columns:minmax(340px, 392px) minmax(0, 1fr);
}

.wi-notif-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:78px;
  padding:18px 76px;
}

.wi-notif-head-left{
  width:100%;
  display:flex;
  justify-content:center;
}

.wi-notif-head-title{
  text-align:center;
  font-size:18px;
  line-height:1.2;
  font-weight:760;
  letter-spacing:-.015em;
}

.wi-notif-close{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
}

.wi-notif-close:active{
  transform:translateY(-50%) translateY(1px);
}

.wi-notif-listhead{
  display:grid;
  gap:10px;
  align-content:start;
  justify-items:stretch;
  padding:14px 12px 10px;
  position:relative;
  z-index:12;
  overflow:visible;
}

.wi-notif-listtoolbar{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  justify-content:flex-start;
}

.wi-notif-mailtabs{
  display:flex;
  align-items:center;
  gap:10px;

  /* ✅ CHO PHÉP NỞ ĐỂ NÚT SWITCH FIT SIDEBAR */
  flex:1 1 auto;
  width:100%;
  min-width:0;
}

.wi-notif-searchwrap--sidebar{
  flex:none;
  width:100%;
  min-width:0;
  max-width:none;
  height:40px;
  overflow:visible;
  z-index:14;
}

.wi-notif-searchwrap--sidebar .wi-notif-search{
  height:40px;
  padding-right:46px;
  font-size:12.5px;
}

.wi-notif-searchwrap--sidebar .wi-notif-filterbtn{
  width:32px;
  height:32px;
  right:5px;
  border-radius:10px;
  color:rgba(100,116,139,.82);
}

.wi-notif-filtericon{
  width:16px;
  height:16px;
  display:block;
  stroke:currentColor;
}

.wi-notif-filtericon path,
.wi-notif-filtericon rect,
.wi-notif-filtericon circle,
.wi-notif-filtericon polyline{
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wi-notif-searchwrap--sidebar .wi-notif-filtermenu{
  left:0;
  right:auto;
  top:calc(100% + 10px);
  width:max(100%, 272px);
  min-width:0;
  max-width:calc(100vw - 48px);
  max-height:min(52vh, 420px);
  overflow:auto;
  box-sizing:border-box;
  z-index:80;
  transform-origin:top left;
}

.wi-notif-listpane{
  position:relative;
  z-index:5;
  overflow:visible;
}

.wi-notif-list{
  position:relative;
  z-index:1;
}

.wi-notif-listhead,
.wi-notif-searchwrap--sidebar,
.wi-notif-item{
  width:100%;
  box-sizing:border-box;
}

.wi-notif-item{
  /* The current markup renders only the main content column, so reset the
     legacy two-column card layout to avoid an empty strip on the right. */
  display:block;
}

.wi-notif-sidebartoggle{
  position:static;
  transform:none;
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.04);
  color:rgba(100,116,139,.86);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, color .16s ease;
}

.wi-notif-sidebartoggle:hover{
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.26);
  color:#334155;
}

.wi-notif-sidebartoggle:active{
  transform:translateY(1px);
}

.wi-notif-sidebartoggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.16);
}

.wi-notif-sidebartoggle-icon{
  width:17px;
  height:17px;
  display:block;
  transition:transform .16s ease;
}

.wi-notif-mailtab{
  width:auto;
  min-width:96px;
  min-height:42px;
  padding:0 14px;
  justify-content:space-between;
  text-align:left;
}

.wi-notif-mailtab-count{
  justify-self:end;
}

.wi-notif-mailtab-label{
  font-size:13px;
  font-weight:700;
}

.wi-notif-body.is-sidebar-collapsed{
  grid-template-columns:60px minmax(0, 1fr);
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-listpane{
  display:grid;
  grid-template-rows:auto 1fr;
  border-right:1px solid rgba(148,163,184,.18);
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-listtoolbar{
  justify-content:center;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-mailtabs,
.wi-notif-body.is-sidebar-collapsed .wi-notif-searchwrap--sidebar,
.wi-notif-body.is-sidebar-collapsed .wi-notif-list{
  display:none;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-listhead{
  padding:12px 10px;
}

.wi-notif-overlay.is-sidebar-collapsed .wi-notif-sidebartoggle-icon{
  transform:scaleX(-1);
}

@media (max-width:980px){
  .wi-notif-head{
    min-height:72px;
    padding:16px 68px;
  }

  .wi-notif-body{
    grid-template-columns:1fr;
  }

  .wi-notif-listhead{
    padding:12px 12px 10px;
  }

  .wi-notif-listtoolbar{
    flex-wrap:wrap;
  }

  .wi-notif-searchwrap--sidebar{
    width:100%;
  }
}

@media (max-width:640px){
  .wi-notif-head{
    min-height:66px;
    padding:14px 60px;
  }

  .wi-notif-head-title{
    font-size:17px;
  }

  .wi-notif-mailtabs{
    gap:10px;
  }

  .wi-notif-searchwrap--sidebar{
    height:38px;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-search{
    height:38px;
  }

  .wi-notif-mailtab{
    min-height:40px;
    padding:0 13px;
  }

  .wi-notif-sidebartoggle{
    flex-basis:36px;
    width:36px;
    height:36px;
    border-radius:11px;
  }
}

@media (prefers-color-scheme: light){
  .wi-notif-sidebartoggle{
    background:#ffffff;
    border-color:rgba(148,163,184,.22);
    box-shadow:0 10px 18px rgba(15,23,42,.05);
    color:#64748b;
  }

  .wi-notif-sidebartoggle:hover{
    background:#f8fafc;
    border-color:rgba(99,102,241,.20);
    color:#334155;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-filterbtn{
    color:#64748b;
  }
}

/* Notification center final layout override.
   This block stays at the end of the file so older duplicated rules above
   cannot reintroduce dead space in the sidebar/header area. */
.wi-notif-modal{
  position:relative !important;
  grid-template-rows:minmax(0, 1fr) !important;
}

.wi-notif-body{
  position:relative !important;
  grid-template-columns:minmax(332px, 368px) minmax(0, 1fr) !important;
}

.wi-notif-listpane{
  min-width:0 !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
}

.wi-notif-listhead{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  gap:8px !important;
  padding:10px 10px 8px !important;
  justify-items:stretch !important;
}

.wi-notif-listtoolbar{
  --wi-notif-toolbar-h:40px;
  --wi-notif-toolbar-icon:15px;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.wi-notif-mailtabs{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  /* ✅ switch cần full width */
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;

  /* ✅ không cho cuộn ngang vì switch là 1 control cố định */
  overflow:hidden !important;
}

.wi-notif-multiselect-toggle,
.wi-notif-sidebartoggle{
  flex:0 0 auto;
}

.wi-notif-mailtabs::-webkit-scrollbar{
  display:none;
}

.wi-notif-mailtab{
  flex:0 0 auto;
}

.wi-notif-sidebartoggle{
  margin-left:auto;
}

.wi-notif-searchwrap--sidebar{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:stretch;
}

.wi-notif-list{
  padding:8px 10px 10px !important;
}

.wi-notif-item{
  display:block !important;
  width:100% !important;
}

.wi-notif-detail{
  padding:10px 16px !important;
}

.wi-notif-detail-card{
  position:relative;
  margin-top:0 !important;
}

.wi-notif-close--floating{
  position:absolute !important;
  top:12px;
  right:12px;
  transform:none !important;
  z-index:20;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.88);
  color:#0f172a;
  display:grid;
  place-items:center;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.wi-notif-close--floating > span{
  font-size:14px;
  font-weight:700;
  line-height:1;
}

.wi-notif-close--floating:hover{
  background:#ffffff;
  border-color:rgba(99,102,241,.18);
}

.wi-notif-close--floating:active{
  transform:translateY(1px) !important;
}

.wi-notif-detailbtn--sidebar{
  gap:8px;
  padding-inline:13px;
}

.wi-notif-detailbtn-icon{
  width:16px;
  height:16px;
  display:block;
  flex:0 0 16px;
  transition:transform .16s ease;
}

.wi-notif-detailbtn-icon.is-collapsed{
  transform:scaleX(-1);
}

.wi-notif-body.is-sidebar-collapsed{
  grid-template-columns:minmax(0, 1fr) !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-listpane{
  position:absolute !important;
  top:10px;
  left:10px;
  z-index:12;
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  display:block !important;
  border-right:0 !important;
  background:transparent !important;
  overflow:visible !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-detailpane{
  grid-column:1 / -1;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-listhead{
  width:auto !important;
  padding:0 !important;
  border-bottom:none !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-listtoolbar{
  width:auto !important;
  grid-template-columns:auto !important;
  gap:0 !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-mailtabs,
.wi-notif-body.is-sidebar-collapsed .wi-notif-multiselect-toggle,
.wi-notif-body.is-sidebar-collapsed .wi-notif-batchbar,
.wi-notif-body.is-sidebar-collapsed .wi-notif-searchwrap--sidebar,
.wi-notif-body.is-sidebar-collapsed .wi-notif-filterpanel,
.wi-notif-body.is-sidebar-collapsed .wi-notif-list{
  display:none !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-sidebartoggle{
  justify-self:start;
  margin-left:0 !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-detail{
  padding-left:72px !important;
  padding-right:16px !important;
}

@media (max-width:980px){
  .wi-notif-body{
    grid-template-columns:1fr !important;
  }

  .wi-notif-close--floating{
    top:10px;
    right:10px;
    width:30px;
    height:30px;
  }

  .wi-notif-listhead{
    padding:10px 10px 8px !important;
  }

  .wi-notif-detail{
    padding-right:16px !important;
  }

  .wi-notif-body.is-sidebar-collapsed .wi-notif-detail{
    padding-left:58px !important;
    padding-right:16px !important;
  }
}

/* Notification center detail pane: flatten to a full reading pane, Gmail-like */
.wi-notif-detailpane{
  border-left:1px solid rgba(148,163,184,.18) !important;
  background:transparent !important;
}

.wi-notif-detail{
  padding:14px 72px 12px 18px !important;
}

.wi-notif-detail-card{
  display:grid !important;
  gap:18px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.wi-notif-detail-hero{
  gap:12px !important;
  padding-right:0 !important;
}

.wi-notif-thread{
  gap:18px !important;
}

.wi-notif-messagecard{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.wi-notif-messagecard.is-reply{
  border:0 !important;
  background:transparent !important;
}

.wi-notif-quotecard{
  gap:8px !important;
  padding:2px 0 0 16px !important;
  border:0 !important;
  border-left:3px solid rgba(148,163,184,.28) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.wi-notif-messagehead{
  margin:0 !important;
}

.wi-notif-messagebody{
  font-size:15px !important;
  line-height:1.9 !important;
}

.wi-notif-body.is-sidebar-collapsed .wi-notif-detail{
  padding-left:72px !important;
  padding-right:72px !important;
}

@media (max-width:980px){
  .wi-notif-detail{
    padding:12px 62px 10px 14px !important;
  }

  .wi-notif-body.is-sidebar-collapsed .wi-notif-detail{
    padding-left:58px !important;
    padding-right:62px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Gmail-style notification list items
   Row1: sender  badges  time
   Row2: subject (bold, single line)
   Row3: preview (gray) + signals
   ────────────────────────────────────────────────────────────────────────────── */

.wi-notif-item{
  display:block !important;
  padding:0 !important;
  border-radius:0 !important;
  border:none !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .12s ease;
}

.wi-notif-item + .wi-notif-item{
  margin-top:0 !important;
}

.wi-notif-item:hover{
  background:rgba(0,0,0,.03) !important;
}

.wi-notif-item.is-active{
  background:rgba(99,102,241,.07) !important;
  border-bottom-color:rgba(99,102,241,.12) !important;
}

/* Unread left accent bar (Gmail-style blue indicator) */
.wi-notif-item.is-new{
  border-left:3px solid #4f46e5 !important;
  background:rgba(99,102,241,.03) !important;
}

.wi-notif-item.is-new .wi-notif-item-fromname{
  font-weight:800 !important;
  color:#1e293b !important;
}

.wi-notif-item.is-new .wi-notif-item-subject{
  font-weight:700 !important;
  color:#0f172a !important;
}

.wi-notif-item.is-new .wi-notif-item-time{
  font-weight:700 !important;
  color:#4f46e5 !important;
}

/* Gmail-style: read items are NOT faded — just lighter font weight */
.wi-notif-item.is-closed{
  opacity:1 !important;
  filter:none !important;
}

.wi-notif-item.is-closed .wi-notif-item-fromname{
  font-weight:600 !important;
  color:#1e293b !important;
}

.wi-notif-item.is-closed .wi-notif-item-subject{
  font-weight:550 !important;
  color:#334155 !important;
}

.wi-notif-item.is-closed .wi-notif-item-preview{
  color:#64748b !important;
}

.wi-notif-item-main{
  display:grid !important;
  grid-template-rows:auto auto auto;
  gap:2px !important;
  padding:10px 16px 10px 14px !important;
  min-width:0;
}

/* ── Row 1: sender + compact badges + time ── */
.wi-notif-item-row1{
  display:flex;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  line-height:1.2;
}

.wi-notif-item-roleflag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.36);
  background:rgba(248,250,252,.86);
  color:#475569;
  font-size:9.5px;
  font-weight:760;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
}

.wi-notif-item-roleflag.is-assigner{
  border-color:rgba(249,115,22,.42);
  background:rgba(255,237,213,.96);
  color:#9a3412;
}

.wi-notif-item-roleflag.is-assignee{
  border-color:rgba(37,99,235,.34);
  background:rgba(219,234,254,.96);
  color:#1d4ed8;
}

.wi-notif-item-row1 .wi-notif-item-fromname{
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  font-weight:680;
  color:#0f172a;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
}

.wi-notif-item-row1-badges{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  min-width:auto;
  max-width:none;
  flex-wrap:nowrap;
}

.wi-notif-item-row1-badges:empty{
  display:none;
}

.wi-notif-item-row1-badges .wi-notif-kind{
  padding:2px 6px !important;
  font-size:10px !important;
  font-weight:700 !important;
  min-height:auto;
  line-height:1.3;
  border-radius:4px;
}

.wi-notif-item-row1-badges .wi-notif-statuspill{
  padding:2px 5px !important;
  font-size:10px !important;
  min-height:auto;
  line-height:1.3;
  border-radius:4px;
}

.wi-notif-item-row1-badges .wi-notif-threadpill{
  padding:2px 5px !important;
  font-size:10px !important;
  min-height:auto !important;
  line-height:1.3;
  border-radius:4px;
}

.wi-notif-item-row1-badges .wi-notif-newpill{
  width:8px;
  height:8px;
  min-height:auto;
  padding:0 !important;
  border-radius:50%;
  background:#4f46e5;
  border:none !important;
  font-size:0 !important;
  line-height:0;
}

.wi-notif-item-row1 .wi-notif-item-time{
  flex:0 0 auto;
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  color:#94a3b8;
  white-space:nowrap;
  letter-spacing:0;
  line-height:1.3;
}

/* ── Row 2: subject (compact, Gmail-like) ── */
.wi-notif-item-row2{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin-top:2px;
}

.wi-notif-item-row2 .wi-notif-item-subject{
  flex:1 1 auto;
  min-width:0;
  font-size:12.5px;
  line-height:1.35;
  font-weight:620;
  letter-spacing:-.01em;
  color:#334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}

.wi-notif-item-when-inline{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:550;
  color:#94a3b8;
  white-space:nowrap;
}

/* ── Row 3: preview (gray, single line) + inline signal chips ── */
.wi-notif-item-row3{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}

.wi-notif-item-row3 .wi-notif-item-preview{
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  line-height:1.5;
  font-weight:400;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}

.wi-notif-item-row3 .wi-notif-item-signals{
  flex:0 0 auto;
  display:inline-flex;
  gap:2px;
  margin-top:0 !important;
}

.wi-notif-item-row3 .wi-notif-item-signal{
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:10px !important;
  font-weight:560;
  color:#94a3b8;
}

/* Responsive tweaks for Gmail-style items */
@media (max-width:640px){
  .wi-notif-item-main{
    padding:9px 12px 9px 10px !important;
  }

  .wi-notif-item-roleflag{
    min-height:18px;
    padding:0 6px;
    font-size:9px;
  }

  .wi-notif-item-row1 .wi-notif-item-fromname{
    font-size:13px;
  }

  .wi-notif-item-row2 .wi-notif-item-subject{
    font-size:12.5px;
  }

  .wi-notif-item-row3 .wi-notif-item-preview{
    font-size:11.5px;
  }
}

/* Mailbox read/unread state */
.wi-notif-item.is-unread{
  border-left:3px solid #2563eb !important;
  background:rgba(37,99,235,.05) !important;
}

.wi-notif-item.is-unread .wi-notif-item-fromname{
  font-weight:780 !important;
  color:#0f172a !important;
}

.wi-notif-item.is-unread .wi-notif-item-subject{
  font-weight:740 !important;
  color:#0f172a !important;
}

.wi-notif-item.is-unread .wi-notif-item-time{
  font-weight:700 !important;
  color:#1d4ed8 !important;
}

.wi-notif-item.is-read .wi-notif-item-fromname{
  font-weight:600 !important;
  color:#1e293b !important;
}

.wi-notif-item.is-read .wi-notif-item-subject{
  font-weight:560 !important;
  color:#334155 !important;
}

.wi-notif-item.is-read .wi-notif-item-time{
  font-weight:500 !important;
  color:#94a3b8 !important;
}

.wi-notif-item-row1-badges .wi-notif-unreadpill{
  width:8px;
  height:8px;
  min-height:auto;
  padding:0 !important;
  border-radius:50%;
  background:#2563eb;
  border:none !important;
  font-size:0 !important;
  line-height:0;
}

/* Notification center: single mailbox switch */
.wi-notif-mailtabs{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  flex:1 1 0 !important;
  width:auto !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.wi-notif-toolbar-icon{
  width:var(--wi-notif-toolbar-icon, 14px);
  height:var(--wi-notif-toolbar-icon, 14px);
  display:block;
}

.wi-notif-toolbar-icon path,
.wi-notif-toolbar-icon rect,
.wi-notif-toolbar-icon circle,
.wi-notif-toolbar-icon polyline{
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wi-notif-mailboxswitch{
  position:relative;
  isolation:isolate;
  display:grid;
  /* ✅ mỗi tab được phép co giãn chuẩn trong sidebar */
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items:stretch;

  /* ✅ cho phép co lại đúng theo sidebar */
  flex:1 1 0;
  width:100%;
  max-width:100%;
  min-width:0;

  box-sizing:border-box;
  min-height:var(--wi-notif-toolbar-h);
  padding:2px;

  border-radius:12px;
  border:1px solid rgba(148,163,184,.30);
  background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color:#334155;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.wi-notif-mailboxswitch::before{
  content:"";
  position:absolute;
  z-index:0;
  top:2px;
  left:2px;
  width:calc((100% - 4px) / 3);
  height:calc(100% - 4px);
  border-radius:10px;
  border:1px solid rgba(99,102,241,.18);
  background:#ffffff;
  box-shadow:0 4px 10px rgba(15,23,42,.12);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, box-shadow .18s ease;
}

.wi-notif-mailboxswitch.is-reply::before{
  transform:translateX(100%);
  border-color:rgba(5,150,105,.22);
}

.wi-notif-mailboxswitch.is-sent::before{
  transform:translateX(200%);
  border-color:rgba(2,132,199,.22);
}

.wi-notif-mailboxswitch:hover{
  border-color:rgba(99,102,241,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(15,23,42,.05);
}

.wi-notif-mailboxswitch:active{
  transform:translateY(1px);
}

.wi-notif-mailboxswitch:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.20), inset 0 1px 0 rgba(255,255,255,.9);
}

.wi-notif-mailboxswitch-tab{
  position:relative;
  z-index:1;
  min-width:0;

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

  /* ✅ giảm gap/padding để vừa sidebar */
  gap:5px;
  padding:0 8px;

  border-radius:10px;
  color:#64748b;

  /* ✅ giảm nhẹ size để tránh tràn khi sidebar hẹp */
  font-size:11.5px;
  font-weight:700;
  line-height:1;

  transition:color .16s ease;
}

.wi-notif-mailboxswitch-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  opacity:.86;
}

.wi-notif-mailboxswitch-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wi-notif-mailboxswitch-count{
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:760;
  color:#64748b;
  background:rgba(148,163,184,.22);
  transition:background .16s ease, color .16s ease;
}

.wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox{
  color:#1e293b;
}

.wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply{
  color:#14532d;
}

.wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent{
  color:#0c4a6e;
}

.wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox .wi-notif-mailboxswitch-icon{
  color:#4338ca;
}

.wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply .wi-notif-mailboxswitch-icon{
  color:#047857;
}

.wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent .wi-notif-mailboxswitch-icon{
  color:#0369a1;
}

.wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox .wi-notif-mailboxswitch-count{
  background:rgba(79,70,229,.16);
  color:#3730a3;
}

.wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply .wi-notif-mailboxswitch-count{
  background:rgba(5,150,105,.18);
  color:#065f46;
}

.wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent .wi-notif-mailboxswitch-count{
  background:rgba(14,165,233,.18);
  color:#075985;
}

/* Notification center: multi-select controls */
.wi-notif-multiselect-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:var(--wi-notif-toolbar-h);
  padding:0 13px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:650;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.88);
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.wi-notif-multiselect-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
}

.wi-notif-multiselect-label{
  white-space:nowrap;
}

.wi-notif-multiselect-toggle:hover{
  background:#f8fafc;
  border-color:rgba(99,102,241,.30);
  box-shadow:0 3px 10px rgba(15,23,42,.06);
}

.wi-notif-multiselect-toggle:active{
  transform:translateY(1px);
}

.wi-notif-multiselect-toggle.is-active{
  color:#1d4ed8;
  border-color:rgba(59,130,246,.38);
  background:linear-gradient(180deg, rgba(219,234,254,.85), rgba(239,246,255,.95));
}

.wi-notif-sidebartoggle{
  width:var(--wi-notif-toolbar-h);
  height:var(--wi-notif-toolbar-h);
  min-height:var(--wi-notif-toolbar-h);
  border-radius:12px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:#475569;
  box-shadow:0 1px 0 rgba(255,255,255,.88);
}

.wi-notif-sidebartoggle:hover{
  border-color:rgba(99,102,241,.30);
  background:#f8fafc;
  color:#334155;
  box-shadow:0 3px 10px rgba(15,23,42,.06);
}

.wi-notif-sidebartoggle-icon{
  width:16px;
  height:16px;
}

.wi-notif-batchbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(59,130,246,.24);
  background:rgba(239,246,255,.9);
}

.wi-notif-batchmeta{
  min-width:0;
  font-size:12px;
  font-weight:650;
  color:#1e3a8a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wi-notif-batchactions{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.wi-notif-batchbtn{
  min-height:30px;
  padding:0 10px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:#334155;
  font-size:11.5px;
  font-weight:640;
  cursor:pointer;
}

.wi-notif-batchbtn:hover{
  filter:brightness(1.02);
}

.wi-notif-batchbtn:active{
  transform:translateY(1px);
}

.wi-notif-batchbtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.wi-notif-batchbtn.is-danger{
  color:#991b1b;
  border-color:rgba(248,113,113,.35);
  background:rgba(254,242,242,.9);
}

.wi-notif-item.is-select-mode{
  cursor:default;
}

.wi-notif-item.is-selected{
  background:rgba(59,130,246,.09) !important;
  border-bottom-color:rgba(59,130,246,.22) !important;
}

.wi-notif-selectbox{
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin-right:2px;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(148,163,184,.45);
  background:#fff;
  color:transparent;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}

.wi-notif-selectbox:hover{
  border-color:rgba(99,102,241,.5);
}

.wi-notif-selectbox.is-selected{
  border-color:#2563eb;
  background:#2563eb;
  color:#fff;
}

@media (max-width:980px){
  .wi-notif-listtoolbar{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-auto-flow:row;
  }

  .wi-notif-mailboxswitch{
    width:clamp(196px, 100%, 236px);
    min-height:38px;
    padding:2px;
  }

  .wi-notif-sidebartoggle{
    grid-column:2;
    margin-left:0;
  }

  .wi-notif-multiselect-toggle{
    grid-column:1 / -1;
    justify-self:start;
    min-height:36px;
    padding:0 12px;
    font-size:11.5px;
  }
}

@media (max-width:640px){
  .wi-notif-listtoolbar{
    display:flex !important;
    flex-wrap:wrap;
  }

  .wi-notif-mailtabs{
    flex:1 1 100%;
  }

  .wi-notif-mailboxswitch{
    width:100%;
    min-height:36px;
    padding:2px;
  }

  .wi-notif-mailboxswitch-tab{
    gap:5px;
    padding:0 9px;
    font-size:12px;
  }

  .wi-notif-mailboxswitch-count{
    min-width:16px;
    height:16px;
    padding:0 4px;
    font-size:9px;
  }

  .wi-notif-multiselect-toggle{
    min-height:36px;
    padding:0 12px;
  }

  .wi-notif-sidebartoggle{
    margin-left:auto;
    min-height:36px;
    width:36px;
    height:36px;
  }

  .wi-notif-batchbar{
    flex-wrap:wrap;
    row-gap:8px;
  }

  .wi-notif-batchmeta{
    width:100%;
  }

  .wi-notif-batchactions{
    width:100%;
    justify-content:flex-end;
  }
}
/* ═══════════════════════════════════════════════════════
   Notification sidebar: unified toolbar & search redesign
   ═══════════════════════════════════════════════════════ */

/* -- Shared toolbar tokens ------------------------------- */
.wi-notif-listhead{
  --_tb-h:36px;
  --_tb-r:10px;
  --_tb-border:rgba(148,163,184,.32);
  --_tb-gap:6px;
  --_sw-pad:3px;
  --wi-notif-toolbar-icon:14px;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:10px 10px 8px !important;
}

/* -- Row 1: listtoolbar ---------------------------------- */
.wi-notif-listtoolbar{
  --wi-notif-toolbar-h:var(--_tb-h) !important;
  --wi-notif-toolbar-icon:14px !important;
  display:flex !important;
  align-items:center !important;
  gap:var(--_tb-gap) !important;
  width:100% !important;
  min-width:0 !important;
  min-height:var(--_tb-h) !important;
  overflow:visible !important;
}

.wi-notif-listtoolbar .wi-notif-mailtabs{
  flex:1 1 0% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
}

.wi-notif-listtoolbar .wi-notif-sidebartoggle{
  flex:0 0 var(--_tb-h) !important;
  margin-left:0 !important;
}

/* -- Row 2: select + search ------------------------------ */
.wi-notif-searchrow{
  display:flex !important;
  align-items:center !important;
  gap:var(--_tb-gap) !important;
  width:100% !important;
  min-width:0 !important;
}

.wi-notif-searchrow .wi-notif-multiselect-toggle{
  flex:0 0 var(--_tb-h) !important;
  width:var(--_tb-h) !important;
  min-width:var(--_tb-h) !important;
  color:#475569 !important;
}

.wi-notif-searchrow .wi-notif-searchwrap--sidebar{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
}

.wi-notif-listhead .wi-notif-batchbar{
  width:100% !important;
  margin-top:0 !important;
}

/* -- Mailbox switch: clean pill toggle ------------------- */
.wi-notif-mailboxswitch{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:var(--_tb-h) !important;
  min-height:var(--_tb-h) !important;
  max-height:var(--_tb-h) !important;
  padding:var(--_sw-pad) !important;
  border-radius:var(--_tb-r) !important;
  border:1px solid var(--_tb-border) !important;
  background:#eef1f6 !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05) !important;
  overflow:hidden !important;
  isolation:isolate !important;
  position:relative !important;
}

/* sliding white pill */
.wi-notif-mailboxswitch::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  top:var(--_sw-pad) !important;
  left:var(--_sw-pad) !important;
  width:calc((100% - var(--_sw-pad) * 2) / 3) !important;
  height:calc(100% - var(--_sw-pad) * 2) !important;
  border-radius:calc(var(--_tb-r) - var(--_sw-pad)) !important;
  background:#fff !important;
  border:none !important;
  box-shadow:0 1px 3px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.04) !important;
  transition:transform .2s cubic-bezier(.25,.8,.25,1) !important;
}

.wi-notif-mailboxswitch.is-reply::before{
  transform:translateX(100%) !important;
}

.wi-notif-mailboxswitch.is-sent::before{
  transform:translateX(200%) !important;
}

.wi-notif-mailboxswitch-tab{
  position:relative !important;
  z-index:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  gap:4px !important;
  padding:0 4px !important;
  border-radius:calc(var(--_tb-r) - var(--_sw-pad)) !important;
  color:#64748b !important;
  transition:color .18s ease !important;
}

.wi-notif-mailboxswitch-label{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox{
  color:#1e293b !important;
}
.wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply{
  color:#14532d !important;
}
.wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent{
  color:#0c4a6e !important;
}

.wi-notif-mailboxswitch-icon{
  opacity:.8 !important;
}
.wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox .wi-notif-mailboxswitch-icon{
  color:#4338ca !important;
  opacity:1 !important;
}
.wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply .wi-notif-mailboxswitch-icon{
  color:#047857 !important;
  opacity:1 !important;
}
.wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent .wi-notif-mailboxswitch-icon{
  color:#0369a1 !important;
  opacity:1 !important;
}

.wi-notif-mailboxswitch-count{
  min-width:16px !important;
  height:16px !important;
  font-size:9px !important;
  font-weight:750 !important;
  padding:0 4px !important;
}

.wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox .wi-notif-mailboxswitch-count{
  background:rgba(79,70,229,.16) !important;
  color:#3730a3 !important;
}
.wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply .wi-notif-mailboxswitch-count{
  background:rgba(5,150,105,.18) !important;
  color:#065f46 !important;
}
.wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent .wi-notif-mailboxswitch-count{
  background:rgba(14,165,233,.18) !important;
  color:#075985 !important;
}

/* -- Icon buttons (multiselect & sidebar toggle) --------- */
.wi-notif-multiselect-toggle,
.wi-notif-sidebartoggle{
  flex:0 0 var(--_tb-h) !important;
  width:var(--_tb-h) !important;
  min-width:var(--_tb-h) !important;
  height:var(--_tb-h) !important;
  min-height:var(--_tb-h) !important;
  padding:0 !important;
  margin-left:0 !important;
  border-radius:var(--_tb-r) !important;
  border:1px solid var(--_tb-border) !important;
  background:#f8fafc !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
}

.wi-notif-multiselect-label{ display:none !important; }

.wi-notif-sidebartoggle-icon{
  width:14px !important;
  height:14px !important;
}

.wi-notif-multiselect-toggle:hover,
.wi-notif-sidebartoggle:hover{
  background:#f1f5f9 !important;
  border-color:rgba(99,102,241,.28) !important;
  box-shadow:0 1px 4px rgba(15,23,42,.06) !important;
}

.wi-notif-multiselect-toggle:active,
.wi-notif-sidebartoggle:active{
  transform:translateY(0.5px) !important;
}

.wi-notif-multiselect-toggle.is-active,
.wi-notif-sidebartoggle[aria-pressed="true"]{
  background:rgba(219,234,254,.7) !important;
  border-color:rgba(37,99,235,.30) !important;
  color:#1d4ed8 !important;
}

/* -- Search input ---------------------------------------- */
.wi-notif-searchwrap--sidebar{
  height:var(--_tb-h) !important;
}

.wi-notif-searchwrap--sidebar .wi-notif-search{
  height:var(--_tb-h) !important;
  border-radius:var(--_tb-r) !important;
  border:1px solid var(--_tb-border) !important;
  background:#f8fafc !important;
  color:#1e293b !important;
  font-size:12px !important;
  padding:0 38px 0 10px !important;
}

.wi-notif-searchwrap--sidebar .wi-notif-search::placeholder{
  color:#94a3b8 !important;
}

.wi-notif-searchwrap--sidebar .wi-notif-search:focus{
  border-color:rgba(99,102,241,.55) !important;
  box-shadow:0 0 0 2px rgba(99,102,241,.12) !important;
  background:#fff !important;
}

.wi-notif-searchwrap--sidebar .wi-notif-filterbtn{
  width:28px !important;
  height:28px !important;
  right:4px !important;
  border-radius:calc(var(--_tb-r) - 3px) !important;
}

/* -- Filter panel (inline below search) ------------------ */
.wi-notif-filterpanel{
  width:100%;
  padding:10px;
  border-radius:var(--_tb-r);
  border:1px solid var(--_tb-border);
  background:#f8fafc;
  box-sizing:border-box;
}

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

.wi-notif-filterpanel-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.wi-notif-filterpanel .wi-notif-filtergrp{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.wi-notif-filterpanel .wi-notif-filtergrp + .wi-notif-filtergrp{
  margin-top:0;
  padding-top:8px;
  border-top:1px solid rgba(148,163,184,.16);
}

.wi-notif-filterpanel .wi-notif-filtertitle{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  margin:0 0 2px;
}

.wi-notif-filterchips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.wi-notif-filterchip{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:7px;
  border:1px solid rgba(148,163,184,.30);
  background:#fff;
  color:#334155;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.wi-notif-filterchip:hover{
  background:#f1f5f9;
  border-color:rgba(99,102,241,.28);
}

.wi-notif-filterchip:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(59,130,246,.18);
}

.wi-notif-filterchip[aria-checked="true"]{
  background:#eef2ff;
  border-color:rgba(99,102,241,.42);
  color:#4338ca;
  font-weight:700;
}

/* -- Responsive: <=980px --------------------------------- */
@media (max-width:980px){
  .wi-notif-listhead{
    --_tb-h:34px;
    --_tb-gap:5px;
    padding:8px 8px 6px !important;
    gap:6px !important;
  }

  .wi-notif-searchrow{
    gap:var(--_tb-gap) !important;
  }

  .wi-notif-mailboxswitch-tab{
    font-size:11.5px !important;
    gap:4px !important;
  }

  .wi-notif-filterchip{
    height:26px;
    padding:0 8px;
    font-size:11px;
  }
}

/* -- Responsive: <=640px --------------------------------- */
@media (max-width:640px){
  .wi-notif-listhead{
    --_tb-h:32px;
    --_tb-r:8px;
    --_tb-gap:4px;
    padding:7px 7px 5px !important;
    gap:5px !important;
  }

  .wi-notif-mailboxswitch-tab{
    font-size:11px !important;
    gap:3px !important;
    padding:0 3px !important;
  }

  .wi-notif-mailboxswitch-count{
    min-width:15px !important;
    height:15px !important;
    font-size:8.5px !important;
    padding:0 3px !important;
  }

  .wi-notif-searchrow{
    gap:4px !important;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-search{
    font-size:11.5px !important;
  }

  .wi-notif-filterchip{
    height:24px;
    padding:0 7px;
    font-size:10.5px;
  }

  .wi-notif-filterpanel{
    padding:8px;
  }
}

/* Notification detail title must always show full text (no ellipsis). */
.wi-notif-detail-title{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Mention approval modal before sending AI-generated notifications */
.wi-mention-approve-overlay{
  position:fixed;
  inset:0;
  z-index:13000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,6,23,.52);
  backdrop-filter:blur(3px);
}

.wi-mention-approve-overlay.hidden{
  display:none !important;
}

.wi-mention-approve-card{
  width:min(1380px, calc(100vw - 24px));
  height:min(92vh, 940px);
  max-height:calc(100vh - 24px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:10px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:0 24px 54px rgba(2,6,23,.28);
  overflow:hidden;
}

.wi-mention-approve-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(148,163,184,.2);
}

.wi-mention-approve-title{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.01em;
}

.wi-mention-approve-close{
  width:32px;
  height:32px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.32);
  background:#f8fafc;
  color:#334155;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.wi-mention-approve-sub{
  font-size:12.5px;
  line-height:1.5;
  color:#475569;
  padding:2px 2px 0;
}

.wi-mention-approve-sub b{
  color:#0f172a;
}

.wi-mention-approve-sub .is-warn{
  color:#b45309;
  font-weight:650;
}

.wi-mention-approve-body{
  overflow:auto;
  display:grid;
  gap:12px;
  min-height:0;
  align-content:start;
  grid-auto-rows:max-content;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:0 4px 10px 0;
}

.wi-mention-approve-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:stretch;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:#ffffff;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
}

.wi-mention-approve-itemhead{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.wi-mention-approve-item.is-single{
  min-height:0;
}

.wi-mention-approve-item.is-multi{
  min-height:0;
}

.wi-mention-approve-compose{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:1px solid rgba(148,163,184,.30);
  border-radius:12px;
  background:#ffffff;
  overflow:hidden;
}

.wi-mention-approve-compose-head{
  display:grid;
  gap:6px;
  padding:10px 12px 9px;
  border-bottom:1px solid rgba(148,163,184,.24);
  background:#fbfcff;
  border-radius:12px 12px 0 0;
}

.wi-mention-approve-compose-caption{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}

.wi-mention-approve-pill{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  color:#1d4ed8;
  font-size:11px;
  font-weight:760;
}

.wi-mention-approve-target{
  font-size:12.75px;
  font-weight:700;
  color:#0f172a;
}

.wi-mention-approve-kind{
  font-size:11.5px;
  color:#64748b;
}

.wi-mention-approve-side{
  min-width:0;
  min-height:0;
  display:grid;
  grid-auto-rows:max-content;
  align-content:start;
  gap:10px;
  overflow:hidden;
}

.wi-mention-approve-side-section{
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:11px;
  border:1px solid rgba(148,163,184,.24);
  background:#fcfdff;
}

.wi-mention-approve-side-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#475569;
}

.wi-mention-approve-fields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.wi-mention-approve-side .wi-mention-approve-fields{
  grid-template-columns:minmax(0, 1fr);
}

.wi-mention-approve-field{
  display:grid;
  gap:3px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,.26);
  border-radius:9px;
  background:#f8fafc;
}

.wi-mention-approve-field-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#64748b;
}

.wi-mention-approve-field-value{
  font-size:13px;
  line-height:1.45;
  font-weight:620;
  color:#0f172a;
  overflow-wrap:anywhere;
}

.wi-mention-approve-block-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#475569;
}

.wi-mention-approve-recips{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
  min-height:0;
  max-height:280px;
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:2px;
}

.wi-mention-approve-recipient{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:84px;
  padding:10px 11px;
  border-radius:11px;
  border:1px solid rgba(148,163,184,.30);
  background:#ffffff;
  color:#334155;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.wi-mention-approve-recipient-name{
  font-size:12.5px;
  font-weight:740;
  line-height:1.35;
  color:#0f172a;
  overflow-wrap:anywhere;
}

.wi-mention-approve-recipient-info{
  display:grid;
  gap:4px;
}

.wi-mention-approve-recipient-row{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  align-items:flex-start;
  gap:7px;
}

.wi-mention-approve-recipient-label{
  font-size:10.5px;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:700;
  color:#64748b;
}

.wi-mention-approve-recipient-value{
  font-size:12.25px;
  line-height:1.45;
  font-weight:620;
  color:#1e293b;
  overflow-wrap:anywhere;
}

.wi-mention-approve-recipient-email{
  font-size:11px;
  line-height:1.4;
  color:#64748b;
  overflow-wrap:anywhere;
}

.wi-mention-approve-recipient.is-empty{
  min-height:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 10px;
  border-radius:10px;
  box-shadow:none;
  color:#64748b;
  background:#f8fafc;
  border-style:dashed;
}

.wi-mention-approve-text{
  width:100%;
  box-sizing:border-box;
  height:auto;
  min-height:340px;
  max-height:none;
  resize:none;
  border-radius:0 0 12px 12px;
  border:0;
  background:#ffffff;
  color:#0f172a;
  font-size:14px;
  line-height:1.62;
  padding:14px 14px;
  font-family:inherit;
  overflow:auto;
  overscroll-behavior:contain;
}

.wi-mention-approve-item.is-single .wi-mention-approve-text{
  min-height:470px;
}

.wi-mention-approve-item.is-multi .wi-mention-approve-text{
  min-height:280px;
}

.wi-mention-approve-compose:focus-within{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 2px rgba(59,130,246,.14);
}

.wi-mention-approve-text:focus{
  outline:none;
}

.wi-mention-approve-actions{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding-top:8px;
  border-top:1px solid rgba(148,163,184,.2);
  background:
    linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,.94) 42%, rgba(248,250,252,.98));
}

.wi-mention-approve-btn{
  min-height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.32);
  background:#f8fafc;
  color:#334155;
  font-size:12.5px;
  font-weight:670;
  cursor:pointer;
}

.wi-mention-approve-btn.is-primary{
  border-color:rgba(37,99,235,.34);
  background:#2563eb;
  color:#ffffff;
}

.wi-mention-approve-btn:hover{
  filter:brightness(1.02);
}

.wi-mention-approve-btn:active{
  transform:translateY(.5px);
}

body.wi-mention-approve-open{
  overflow:hidden;
}

@media (max-width:1180px){
  .wi-mention-approve-overlay{
    padding:12px;
  }

  .wi-mention-approve-card{
    width:min(1320px, calc(100vw - 12px));
    height:min(94vh, 920px);
    max-height:calc(100vh - 12px);
    padding:12px;
  }

  .wi-mention-approve-item{
    grid-template-columns:minmax(0,1fr);
  }

  .wi-mention-approve-side{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .wi-mention-approve-side-section.is-recipients{
    grid-column:1 / -1;
  }

  .wi-mention-approve-side .wi-mention-approve-fields{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .wi-mention-approve-text{
    min-height:300px;
  }

  .wi-mention-approve-item.is-single .wi-mention-approve-text{
    min-height:380px;
  }

  .wi-mention-approve-item.is-multi .wi-mention-approve-text{
    min-height:250px;
  }
}

@media (max-width:640px){
  .wi-mention-approve-overlay{
    padding:10px;
  }

  .wi-mention-approve-card{
    width:min(1320px, calc(100vw - 12px));
    max-height:calc(100vh - 12px);
    border-radius:12px;
    padding:10px;
    gap:8px;
  }

  .wi-mention-approve-item{
    padding:9px;
    gap:9px;
  }

  .wi-mention-approve-side{
    grid-template-columns:minmax(0, 1fr);
    gap:8px;
  }

  .wi-mention-approve-side .wi-mention-approve-fields{
    grid-template-columns:minmax(0, 1fr);
  }

  .wi-mention-approve-recips{
    max-height:200px;
  }

  .wi-mention-approve-recipient-row{
    grid-template-columns:56px minmax(0, 1fr);
    gap:6px;
  }

  .wi-mention-approve-text{
    min-height:230px;
    font-size:13px;
    line-height:1.58;
    padding:12px;
  }

  .wi-mention-approve-item.is-single .wi-mention-approve-text{
    min-height:300px;
  }

  .wi-mention-approve-item.is-multi .wi-mention-approve-text{
    min-height:220px;
  }
}

/* Mention approval: title + add recipients controls */
.wi-mention-approve-titlefield{
  display:grid;
  gap:5px;
}

.wi-mention-approve-titlelabel{
  font-size:11px;
  font-weight:760;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#64748b;
}

.wi-mention-approve-title-input{
  width:100%;
  min-height:36px;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.3);
  background:#ffffff;
  color:#0f172a;
  font-size:13px;
  line-height:1.4;
}

.wi-mention-approve-title-input:focus{
  outline:none;
  border-color:rgba(59,130,246,.58);
  box-shadow:0 0 0 2px rgba(59,130,246,.14);
}

.wi-mention-approve-extra{
  display:grid;
  gap:9px;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:#f8fbff;
}

.wi-mention-approve-extra-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.wi-mention-approve-extra-title{
  font-size:12.5px;
  font-weight:760;
  color:#0f172a;
}

.wi-mention-approve-extra-sub{
  font-size:11.5px;
  color:#64748b;
}

.wi-mention-approve-extra-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.wi-mention-approve-extra-input{
  width:100%;
  min-height:36px;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.3);
  background:#ffffff;
  color:#0f172a;
  font-size:13px;
}

.wi-mention-approve-extra-input:focus{
  outline:none;
  border-color:rgba(59,130,246,.58);
  box-shadow:0 0 0 2px rgba(59,130,246,.14);
}

.wi-mention-approve-extra-add{
  min-height:36px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid rgba(37,99,235,.35);
  background:#2563eb;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.wi-mention-approve-extra-add:hover{
  filter:brightness(1.03);
}

.wi-mention-approve-extra-selected{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.wi-mention-approve-extra-empty{
  font-size:12px;
  color:#64748b;
}

.wi-mention-approve-extra-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.34);
  background:rgba(59,130,246,.10);
  color:#1e3a8a;
  font-size:11.5px;
  font-weight:650;
  cursor:pointer;
}

.wi-mention-approve-extra-chip:hover{
  filter:brightness(1.03);
}

@media (prefers-color-scheme: dark){
  .wi-mention-approve-overlay{
    background:rgba(2,6,23,.76);
    backdrop-filter:blur(4px);
  }

  .wi-mention-approve-card{
    border-color:rgba(71,85,105,.56);
    background:
      radial-gradient(circle at top right, rgba(37,99,235,.20), transparent 34%),
      linear-gradient(180deg, rgba(8,13,26,.98), rgba(4,8,18,.98));
    box-shadow:0 28px 60px rgba(2,6,23,.72);
  }

  .wi-mention-approve-head{
    border-bottom-color:rgba(71,85,105,.5);
  }

  .wi-mention-approve-title{
    color:#f8fafc;
  }

  .wi-mention-approve-close{
    border-color:rgba(100,116,139,.6);
    background:rgba(15,23,42,.88);
    color:#dbe7f5;
  }

  .wi-mention-approve-close:hover{
    border-color:rgba(96,165,250,.56);
    background:rgba(30,41,59,.92);
  }

  .wi-mention-approve-sub{
    color:#afc0d8;
  }

  .wi-mention-approve-sub b{
    color:#e2e8f0;
  }

  .wi-mention-approve-sub .is-warn{
    color:#fdba74;
  }

  .wi-mention-approve-item{
    border-color:rgba(71,85,105,.48);
    background:rgba(8,14,27,.86);
    box-shadow:0 12px 26px rgba(2,6,23,.34);
  }

  .wi-mention-approve-compose{
    border-color:rgba(71,85,105,.52);
    background:rgba(8,14,27,.9);
  }

  .wi-mention-approve-compose-head{
    border-bottom-color:rgba(71,85,105,.48);
    background:linear-gradient(180deg, rgba(15,23,42,.84), rgba(9,14,27,.9));
  }

  .wi-mention-approve-compose-caption{
    color:#93a8c5;
  }

  .wi-mention-approve-pill{
    border:1px solid rgba(96,165,250,.54);
    background:rgba(30,64,175,.34);
    color:#dbeafe;
  }

  .wi-mention-approve-target{
    color:#e2e8f0;
  }

  .wi-mention-approve-kind{
    color:#9fb3cf;
  }

  .wi-mention-approve-side-section{
    border-color:rgba(71,85,105,.5);
    background:rgba(10,17,31,.84);
  }

  .wi-mention-approve-side-title,
  .wi-mention-approve-block-label{
    color:#9bb1cc;
  }

  .wi-mention-approve-field{
    border-color:rgba(100,116,139,.54);
    background:rgba(15,23,42,.84);
  }

  .wi-mention-approve-field-label,
  .wi-mention-approve-recipient-label{
    color:#8ea3bd;
  }

  .wi-mention-approve-field-value{
    color:#e2e8f0;
  }

  .wi-mention-approve-recipient{
    border-color:rgba(71,85,105,.52);
    background:rgba(15,23,42,.84);
    color:#c5d3e6;
    box-shadow:0 8px 18px rgba(2,6,23,.3);
  }

  .wi-mention-approve-recipient-name{
    color:#f1f5f9;
  }

  .wi-mention-approve-recipient-value{
    color:#d4deeb;
  }

  .wi-mention-approve-recipient-email{
    color:#9bb1cc;
  }

  .wi-mention-approve-recipient.is-empty{
    color:#94a9c5;
    background:rgba(15,23,42,.74);
    border-color:rgba(100,116,139,.48);
  }

  .wi-mention-approve-text,
  .wi-mention-approve-title-input,
  .wi-mention-approve-extra-input{
    border-color:rgba(100,116,139,.56);
    background:rgba(15,23,42,.9);
    color:#e2e8f0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }

  .wi-mention-approve-text::placeholder,
  .wi-mention-approve-title-input::placeholder,
  .wi-mention-approve-extra-input::placeholder{
    color:#7f96b4;
  }

  .wi-mention-approve-compose:focus-within{
    border-color:rgba(96,165,250,.72);
    box-shadow:0 0 0 2px rgba(59,130,246,.2);
  }

  .wi-mention-approve-title-input:focus,
  .wi-mention-approve-extra-input:focus{
    border-color:rgba(96,165,250,.72);
    box-shadow:0 0 0 2px rgba(59,130,246,.2);
  }

  .wi-mention-approve-actions{
    border-top-color:rgba(71,85,105,.48);
    background:
      linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.76) 42%, rgba(2,6,23,.9));
  }

  .wi-mention-approve-btn{
    border-color:rgba(100,116,139,.58);
    background:rgba(15,23,42,.9);
    color:#d4deeb;
  }

  .wi-mention-approve-btn:hover{
    border-color:rgba(125,147,177,.72);
    background:rgba(30,41,59,.92);
    filter:none;
  }

  .wi-mention-approve-btn.is-primary{
    border-color:rgba(96,165,250,.56);
    background:#2563eb;
    color:#eff6ff;
  }

  .wi-mention-approve-btn.is-primary:hover{
    border-color:rgba(147,197,253,.72);
    background:#1d4ed8;
  }

  .wi-mention-approve-extra{
    border-color:rgba(71,85,105,.5);
    background:rgba(8,14,27,.86);
  }

  .wi-mention-approve-extra-title{
    color:#e2e8f0;
  }

  .wi-mention-approve-extra-sub,
  .wi-mention-approve-titlelabel,
  .wi-mention-approve-extra-empty{
    color:#9bb1cc;
  }

  .wi-mention-approve-extra-add{
    border-color:rgba(96,165,250,.56);
    background:#1d4ed8;
  }

  .wi-mention-approve-extra-add:hover{
    background:#1e40af;
  }

  .wi-mention-approve-extra-chip{
    border-color:rgba(96,165,250,.58);
    background:rgba(30,64,175,.34);
    color:#dbeafe;
  }

  .wi-mention-approve-extra-chip:hover{
    background:rgba(30,64,175,.44);
  }
}

@media (max-width:640px){
  .wi-mention-approve-extra-controls{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Notification title visibility: explicit labels */
.wi-notif-item-row2{
  align-items:flex-start;
}

.wi-notif-item-row2 .wi-notif-item-subject-label{
  display:none !important;
}

.wi-notif-detail-titlewrap{
  display:grid;
  gap:4px;
}

.wi-notif-detail-titlelabel{
  font-size:10.5px;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}

@media (prefers-color-scheme: light){
  .wi-notif-item-row2 .wi-notif-item-subject-label{
    color:#64748b;
  }
  .wi-notif-detail-titlelabel{
    color:#64748b;
  }
}

/* Notification detail pane refresh:
   Title -> sender/time -> AI hint -> full content -> AI quick reply */
.wi-notif-detail{
  padding:14px 16px 12px !important;
}

.wi-notif-detail-card{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.wi-notif-readpane{
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}

.wi-notif-readpane-head{
  display:grid;
  gap:10px;
  padding-right:44px;
}

.wi-notif-readpane-title{
  margin:0;
  font-size:22px;
  line-height:1.32;
  font-weight:760;
  color:#0f172a;
  letter-spacing:-.014em;
  max-width:100%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wi-notif-readpane-meta-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:#f8fafc;
}

.wi-notif-readpane-meta-label{
  font-size:11px;
  font-weight:760;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
}

.wi-notif-readpane-meta-value{
  font-size:12.5px;
  font-weight:620;
  color:#0f172a;
}

.wi-notif-readpane-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.wi-notif-readpane-context{
  font-size:12.5px;
  line-height:1.6;
  color:#475569;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(148,163,184,.3);
  background:rgba(248,250,252,.9);
}

.wi-notif-readpane-section{
  display:grid;
  gap:10px;
  padding:14px 14px 15px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:#ffffff;
}

.wi-notif-readpane-section--ai{
  border-color:rgba(37,99,235,.30);
  background:
    linear-gradient(145deg, rgba(239,246,255,.96), rgba(224,231,255,.70));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 18px rgba(37,99,235,.09);
  transition:border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

.wi-notif-readpane-section--ai[data-ai-toggle-surface="1"]{
  cursor:pointer;
}

.wi-notif-readpane-section--ai[data-ai-toggle-surface="1"]:hover{
  border-color:rgba(29,78,216,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 22px rgba(37,99,235,.12);
}

.wi-notif-readpane-section--ai[data-ai-toggle-surface="1"]:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

.wi-notif-readpane-section--ai .wi-notif-readpane-sectiontitle{
  color:#1d4ed8;
}

.wi-notif-readpane-section--completion{
  border-color:rgba(34,197,94,.34);
  background:
    linear-gradient(145deg, rgba(240,253,244,.96), rgba(220,252,231,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(22,163,74,.10);
}

.wi-notif-readpane-section--completion .wi-notif-readpane-sectiontitle{
  color:#166534;
}

.wi-notif-complete-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:8px;
}

.wi-notif-complete-item{
  display:grid;
  gap:4px;
  align-content:start;
  padding:10px 11px;
  border-radius:10px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(255,255,255,.84);
}

.wi-notif-complete-item--wide{
  grid-column:1 / -1;
}

.wi-notif-complete-label{
  font-size:10.5px;
  line-height:1;
  font-weight:760;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#3f6212;
}

.wi-notif-complete-value{
  font-size:13.5px;
  line-height:1.6;
  font-weight:700;
  color:#14532d;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-complete-value.is-note{
  font-weight:640;
  color:#1f2937;
}

.wi-notif-readpane-completion-signal{
  border-color:rgba(34,197,94,.34);
  background:rgba(220,252,231,.78);
  color:#166534;
}

.wi-notif-readpane-sectiontitle{
  font-size:11px;
  line-height:1;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

.wi-notif-readpane-ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.wi-notif-readpane-ai-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.34);
  background:rgba(219,234,254,.72);
  color:#1e40af;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:filter .14s ease, transform .12s ease, box-shadow .14s ease;
}

.wi-notif-readpane-ai-toggle:hover{
  filter:brightness(1.03);
  box-shadow:0 8px 18px rgba(37,99,235,.12);
}

.wi-notif-readpane-ai-toggle:active{
  transform:translateY(1px);
}

.wi-notif-readpane-ai-preview{
  font-size:13px;
  line-height:1.64;
  color:#1e3a8a;
  padding:10px 11px;
  border-radius:10px;
  border:1px dashed rgba(59,130,246,.30);
  background:rgba(219,234,254,.46);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-ai-detail.is-collapsed{
  display:none;
}

.wi-notif-readpane-bodytext{
  white-space:pre-wrap;
  font-size:14.5px;
  line-height:1.82;
  color:#0f172a;
}

.wi-notif-readpane-quote{
  display:grid;
  gap:8px;
  margin-top:2px;
  padding:12px 12px 12px 14px;
  border-left:3px solid rgba(148,163,184,.36);
  border-radius:10px;
  background:#f8fafc;
}

.wi-notif-readpane-quote-title{
  font-size:10.5px;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

.wi-notif-readpane-quote-subject{
  font-size:13px;
  line-height:1.6;
  font-weight:680;
  color:#1e293b;
}

.wi-notif-readpane-quote-body{
  white-space:pre-wrap;
  font-size:13.5px;
  line-height:1.72;
  color:#334155;
}

.wi-notif-readpane-ai-focus{
  font-size:15px;
  line-height:1.6;
  font-weight:720;
  color:#1e293b;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-ai-signals{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.wi-notif-readpane-ai-signal{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.26);
  background:rgba(219,234,254,.78);
  color:#1e3a8a;
  font-size:11.5px;
  font-weight:680;
}

.wi-notif-readpane-ai-strategy{
  font-size:13px;
  line-height:1.64;
  color:#1e3a8a;
  padding:9px 11px;
  border-radius:10px;
  border:1px dashed rgba(59,130,246,.34);
  background:rgba(219,234,254,.52);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-ai-text{
  font-size:13.5px;
  line-height:1.72;
  color:#334155;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-ai-note{
  font-size:13px;
  line-height:1.66;
  color:#1e3a8a;
  padding:10px 11px;
  border-radius:10px;
  border:1px solid rgba(59,130,246,.26);
  background:rgba(219,234,254,.55);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-checklist{
  display:grid;
  gap:6px;
}

.wi-notif-readpane-checkitem{
  position:relative;
  padding-left:14px;
  font-size:13px;
  line-height:1.62;
  color:#334155;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wi-notif-readpane-checkitem::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#2563eb;
}

.wi-notif-readpane-replyhead{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.wi-notif-readpane-replybtn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid rgba(148,163,184,.3);
  background:#f8fafc;
  color:#334155;
  font-size:12.5px;
  font-weight:680;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}

.wi-notif-readpane-replybtn:hover{
  background:#f1f5f9;
  border-color:rgba(99,102,241,.3);
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}

.wi-notif-readpane-replybtn:active{
  transform:translateY(1px);
}

.wi-notif-readpane-replybtn.is-primary{
  border-color:rgba(37,99,235,.30);
  background:#2563eb;
  color:#ffffff;
}

.wi-notif-readpane-replybtn.is-primary:hover{
  filter:brightness(1.03);
}

.wi-notif-readpane-replysubtitle{
  font-size:11.5px;
  line-height:1.4;
  font-weight:680;
  color:#64748b;
}

.wi-notif-readpane-replynote{
  font-size:12.5px;
  line-height:1.6;
  color:#64748b;
}

.wi-notif-readpane .wi-notif-smartchips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.wi-notif-readpane .wi-notif-smartchip{
  min-height:30px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:660;
}

@media (max-width:980px){
  .wi-notif-readpane{
    padding:14px;
    border-radius:14px;
    gap:12px;
  }

  .wi-notif-readpane-head{
    padding-right:38px;
  }

  .wi-notif-readpane-title{
    font-size:19px;
  }

  .wi-notif-readpane-section{
    padding:12px;
  }
}

@media (max-width:640px){
  .wi-notif-readpane{
    padding:12px;
    gap:10px;
  }

  .wi-notif-readpane-head{
    padding-right:34px;
  }

  .wi-notif-readpane-title{
    font-size:17px;
  }

  .wi-notif-readpane-meta{
    gap:6px;
  }

  .wi-notif-readpane-meta-item{
    min-height:28px;
    padding:0 9px;
  }

  .wi-notif-readpane-bodytext{
    font-size:14px;
    line-height:1.74;
  }
}

/* Notification center viewport optimization:
   increase visible reading space and compact bottom action dock */
.wi-notif-modal{
  width:min(1320px, 97vw) !important;
  height:min(90vh, 940px) !important;
  max-height:min(90vh, 940px) !important;
}

.wi-notif-body{
  grid-template-columns:minmax(300px, 350px) minmax(0, 1fr) !important;
}

.wi-notif-detail{
  padding:10px 14px 8px !important;
}

.wi-notif-readpane{
  gap:10px;
  padding:14px;
}

.wi-notif-readpane-title{
  font-size:20px;
  line-height:1.3;
}

.wi-notif-readpane-section{
  gap:8px;
  padding:11px 12px;
}

.wi-notif-readpane-bodytext{
  font-size:14px;
  line-height:1.72;
}

.wi-notif-actionbar{
  padding:6px 14px calc(10px + env(safe-area-inset-bottom));
}

.wi-notif-actiondock{
  gap:6px;
  padding:8px 10px;
  border-radius:14px;
}

.wi-notif-actiondock-head{
  display:flex;
  align-items:center;
  gap:8px;
}

.wi-notif-actiondock-caption{
  margin-left:auto;
  max-width:68%;
  font-size:11.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wi-notif-actiondock-grid{
  grid-template-columns:minmax(0, 1fr) minmax(250px, auto);
  gap:8px;
  align-items:start;
}

.wi-notif-actiondock-col{
  align-content:start;
}

.wi-notif-actiondock-col--primary{
  gap:8px;
}

.wi-notif-actiondock-col--utility{
  gap:8px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.wi-notif-actiondock-col--utility .wi-notif-actionbtn{
  white-space:nowrap;
}

.wi-notif-actionbtn{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
}

.wi-notif-actiondock.is-sent-row .wi-notif-actiondock-grid{
  grid-template-columns:1fr;
}

.wi-notif-actiondock.is-sent-row .wi-notif-actiondock-col--primary{
  display:none;
}

.wi-notif-actiondock.is-sent-row .wi-notif-actiondock-col--utility{
  grid-template-columns:minmax(0,1fr);
  max-width:min(460px, 100%);
  width:100%;
  margin-inline:auto;
}

.wi-notif-actiondock.is-sent-row .wi-notif-actionbtn--danger{
  width:100%;
}

.wi-notif-actiondock.is-sent-row .wi-notif-actiondock-caption{
  max-width:none;
}

@media (max-width:980px){
  .wi-notif-modal{
    width:min(98vw, 1200px) !important;
    height:min(92vh, 980px) !important;
    max-height:min(92vh, 980px) !important;
  }

  .wi-notif-body{
    grid-template-columns:1fr !important;
  }

  .wi-notif-detail{
    padding:10px 12px 8px !important;
  }

  .wi-notif-readpane{
    padding:12px;
    gap:9px;
  }

  .wi-notif-actiondock-head{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .wi-notif-actiondock-caption{
    margin-left:0;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .wi-notif-actiondock-grid{
    grid-template-columns:1fr;
  }

  .wi-notif-actionbtn{
    min-height:36px;
    font-size:12px;
  }
}

/* Notification reply composer refresh:
   focused typing layout, cleaner hierarchy, professional compose controls */
.wi-notif-detailpane.is-replying{
  grid-template-rows:minmax(0,1fr) auto !important;
}

.wi-notif-detailpane.is-replying #wiNotifActionBar{
  display:none !important;
}

.wi-notif-replybox{
  display:grid;
  gap:10px;
  padding:12px 14px 14px !important;
  border-top:1px solid rgba(148,163,184,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  box-shadow:0 -14px 26px rgba(15,23,42,.06);
}

.wi-notif-replymeta{
  display:grid;
  gap:6px;
  margin:0;
  line-height:1.45 !important;
}

.wi-notif-replymeta-row{
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  gap:8px;
  align-items:start;
}

.wi-notif-replymeta-label{
  font-size:11px;
  line-height:1.4;
  font-weight:760;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#64748b !important;
}

.wi-notif-replymeta-value{
  min-width:0;
  font-size:13px;
  line-height:1.5;
  color:#0f172a !important;
  font-weight:630;
}

.wi-notif-replymeta-value.is-title{
  font-weight:700;
}

.wi-notif-replyinput{
  width:100%;
  box-sizing:border-box;
  min-height:132px !important;
  max-height:320px !important;
  padding:12px 13px !important;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.34) !important;
  background:#ffffff !important;
  color:#0f172a !important;
  font-size:14px !important;
  line-height:1.72 !important;
  resize:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.05) !important;
}

.wi-notif-replyinput::placeholder{
  color:#94a3b8 !important;
}

.wi-notif-replyinput:focus{
  outline:none;
  border-color:rgba(37,99,235,.52) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.wi-notif-replyacts{
  margin-top:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.wi-notif-replyassist{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.wi-notif-replyshortcut{
  font-size:11px;
  line-height:1.3;
  color:#64748b;
  white-space:nowrap;
}

.wi-notif-replycount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.30);
  background:#f8fafc;
  color:#475569;
  font-size:11px;
  font-weight:660;
}

.wi-notif-replybuttons{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.wi-notif-replyacts #wiNotifReplyCancel,
.wi-notif-replyacts #wiNotifReplySend{
  min-height:36px;
  padding:0 14px;
  border-radius:10px !important;
  border:1px solid rgba(148,163,184,.34);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0;
  box-shadow:none !important;
}

.wi-notif-replyacts #wiNotifReplyCancel{
  background:#ffffff !important;
  color:#334155 !important;
}

.wi-notif-replyacts #wiNotifReplyCancel:hover{
  background:#f8fafc !important;
  border-color:rgba(100,116,139,.40) !important;
  filter:none !important;
}

.wi-notif-replyacts #wiNotifReplySend{
  border-color:rgba(37,99,235,.38) !important;
  background:#1d4ed8 !important;
  color:#ffffff !important;
}

.wi-notif-replyacts #wiNotifReplySend:hover{
  filter:brightness(1.02) !important;
}

.wi-notif-replyacts #wiNotifReplySend:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:none !important;
}

@media (max-width:980px){
  .wi-notif-replybox{
    padding:10px 12px 12px !important;
    gap:8px;
  }

  .wi-notif-replymeta-row{
    grid-template-columns:52px minmax(0,1fr);
  }

  .wi-notif-replyinput{
    min-height:120px !important;
    font-size:13.5px !important;
  }

  .wi-notif-replyacts{
    align-items:flex-start;
  }

  .wi-notif-replyshortcut{
    white-space:normal;
  }
}

@media (prefers-color-scheme: dark){
  .wi-notif-modal{
    border-color:rgba(71,85,105,.55);
    background:linear-gradient(180deg, rgba(8,13,26,.98), rgba(4,8,18,.98));
    box-shadow:0 34px 68px rgba(2,6,23,.72);
  }

  .wi-notif-close--floating{
    border-color:rgba(100,116,139,.6);
    background:rgba(15,23,42,.9);
    color:#e2e8f0;
    box-shadow:0 10px 20px rgba(2,6,23,.5);
  }

  .wi-notif-close--floating:hover{
    background:#172554;
    border-color:rgba(96,165,250,.52);
  }

  .wi-notif-listpane{
    border-right-color:rgba(71,85,105,.44);
    background:
      linear-gradient(180deg, rgba(10,16,29,.94), rgba(6,11,22,.96)),
      rgba(2,6,23,.92);
  }

  .wi-notif-detailpane{
    border-left-color:rgba(71,85,105,.44) !important;
    background:
      radial-gradient(circle at top right, rgba(37,99,235,.24), transparent 34%),
      linear-gradient(180deg, rgba(8,13,25,.96), rgba(4,8,17,.98));
  }

  .wi-notif-mailboxswitch{
    border-color:rgba(100,116,139,.68) !important;
    background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(9,14,27,.94)) !important;
    box-shadow:inset 0 1px 2px rgba(2,6,23,.8) !important;
  }

  .wi-notif-mailboxswitch::before{
    background:linear-gradient(180deg, rgba(30,41,59,.94), rgba(15,23,42,.96)) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 18px rgba(2,6,23,.56) !important;
  }

  .wi-notif-mailboxswitch-tab{
    color:#8da3c0 !important;
  }

  .wi-notif-mailboxswitch:not(.is-reply):not(.is-sent) .wi-notif-mailboxswitch-tab--inbox{
    color:#dbeafe !important;
  }

  .wi-notif-mailboxswitch.is-reply .wi-notif-mailboxswitch-tab--reply{
    color:#bbf7d0 !important;
  }

  .wi-notif-mailboxswitch.is-sent .wi-notif-mailboxswitch-tab--sent{
    color:#bae6fd !important;
  }

  .wi-notif-mailboxswitch-count{
    color:#d0d9e8;
    background:rgba(100,116,139,.32);
  }

  .wi-notif-multiselect-toggle,
  .wi-notif-sidebartoggle{
    border-color:rgba(100,116,139,.62) !important;
    background:rgba(15,23,42,.84) !important;
    color:#cbd5e1 !important;
    box-shadow:none !important;
  }

  .wi-notif-multiselect-toggle:hover,
  .wi-notif-sidebartoggle:hover{
    background:rgba(30,41,59,.9) !important;
    border-color:rgba(96,165,250,.54) !important;
  }

  .wi-notif-multiselect-toggle.is-active,
  .wi-notif-sidebartoggle[aria-pressed="true"]{
    background:rgba(30,64,175,.36) !important;
    border-color:rgba(96,165,250,.58) !important;
    color:#dbeafe !important;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-search{
    border-color:rgba(100,116,139,.62) !important;
    background:rgba(15,23,42,.86) !important;
    color:#e2e8f0 !important;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-search::placeholder{
    color:#8095b2 !important;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-search:focus{
    border-color:rgba(96,165,250,.72) !important;
    background:rgba(15,23,42,.94) !important;
    box-shadow:0 0 0 2px rgba(59,130,246,.2) !important;
  }

  .wi-notif-searchwrap--sidebar .wi-notif-filterbtn{
    color:#9db2cc !important;
    background:rgba(30,41,59,.82) !important;
    border-color:rgba(100,116,139,.54) !important;
  }

  .wi-notif-filterpanel{
    border-color:rgba(100,116,139,.62);
    background:rgba(10,16,30,.95);
  }

  .wi-notif-filterpanel .wi-notif-filtergrp + .wi-notif-filtergrp{
    border-top-color:rgba(71,85,105,.55);
  }

  .wi-notif-filterpanel .wi-notif-filtertitle{
    color:#93a8c5;
  }

  .wi-notif-filterchip{
    border-color:rgba(100,116,139,.62);
    background:rgba(15,23,42,.9);
    color:#cdd7e6;
  }

  .wi-notif-filterchip:hover{
    background:rgba(30,41,59,.88);
    border-color:rgba(96,165,250,.52);
  }

  .wi-notif-filterchip[aria-checked="true"]{
    background:rgba(30,64,175,.32);
    border-color:rgba(96,165,250,.64);
    color:#dbeafe;
  }

  .wi-notif-batchbar{
    border-color:rgba(96,165,250,.44);
    background:rgba(30,41,59,.78);
  }

  .wi-notif-batchmeta{
    color:#dbeafe;
  }

  .wi-notif-batchbtn{
    border-color:rgba(100,116,139,.58);
    background:rgba(15,23,42,.86);
    color:#d4deeb;
  }

  .wi-notif-batchbtn.is-danger{
    border-color:rgba(248,113,113,.52);
    background:rgba(127,29,29,.48);
    color:#fecaca;
  }

  .wi-notif-item{
    border-bottom-color:rgba(71,85,105,.38) !important;
  }

  .wi-notif-item:hover{
    background:rgba(30,41,59,.46) !important;
  }

  .wi-notif-item.is-active{
    background:rgba(30,64,175,.3) !important;
    border-bottom-color:rgba(96,165,250,.46) !important;
  }

  .wi-notif-item.is-selected{
    background:rgba(30,64,175,.34) !important;
    border-bottom-color:rgba(96,165,250,.5) !important;
  }

  .wi-notif-item.is-unread{
    border-left-color:#60a5fa !important;
    background:rgba(30,64,175,.22) !important;
  }

  .wi-notif-item-row1 .wi-notif-item-fromname{
    color:#e2e8f0 !important;
  }

  .wi-notif-item-row1 .wi-notif-item-time{
    color:#95a9c5 !important;
  }

  .wi-notif-item-row2 .wi-notif-item-subject-label{
    color:#8ea3bd;
  }

  .wi-notif-item-row2 .wi-notif-item-subject{
    color:#f1f5f9 !important;
  }

  .wi-notif-item-when-inline{
    color:#89a0bb;
  }

  .wi-notif-item-row3 .wi-notif-item-preview{
    color:#b1c0d5 !important;
  }

  .wi-notif-item-row3 .wi-notif-item-signal{
    border-color:rgba(100,116,139,.56);
    background:rgba(15,23,42,.84);
    color:#d3deeb;
  }

  .wi-notif-item.is-read .wi-notif-item-fromname{
    color:#b9c8dc !important;
  }

  .wi-notif-item.is-read .wi-notif-item-subject{
    color:#9fb0c8 !important;
  }

  .wi-notif-item.is-read .wi-notif-item-time{
    color:#8197b3 !important;
  }

  .wi-notif-item.is-unread .wi-notif-item-fromname,
  .wi-notif-item.is-unread .wi-notif-item-subject{
    color:#f8fafc !important;
  }

  .wi-notif-item.is-unread .wi-notif-item-time{
    color:#93c5fd !important;
  }

  .wi-notif-item-roleflag{
    border-color:rgba(100,116,139,.62);
    background:rgba(15,23,42,.9);
    color:#cbd5e1;
  }

  .wi-notif-item-roleflag.is-assigner{
    border-color:rgba(251,146,60,.54);
    background:rgba(124,45,18,.52);
    color:#fed7aa;
  }

  .wi-notif-item-roleflag.is-assignee{
    border-color:rgba(96,165,250,.5);
    background:rgba(30,58,138,.52);
    color:#bfdbfe;
  }

  .wi-notif-selectbox{
    border-color:rgba(100,116,139,.64);
    background:rgba(15,23,42,.9);
  }

  .wi-notif-selectbox.is-selected{
    border-color:#60a5fa;
    background:#2563eb;
  }

  .wi-notif-readpane{
    border-color:rgba(71,85,105,.52) !important;
    background:linear-gradient(180deg, rgba(10,17,31,.96), rgba(6,11,22,.97)) !important;
    box-shadow:0 22px 44px rgba(2,6,23,.58) !important;
  }

  .wi-notif-readpane-title{
    color:#f8fafc !important;
  }

  .wi-notif-readpane-meta-item{
    border-color:rgba(100,116,139,.48) !important;
    background:rgba(15,23,42,.86) !important;
  }

  .wi-notif-readpane-meta-label{
    color:#93a8c5 !important;
  }

  .wi-notif-readpane-meta-value{
    color:#e2e8f0 !important;
  }

  .wi-notif-readpane-context{
    color:#c4d3e7;
    border-color:rgba(96,165,250,.4);
    background:rgba(15,23,42,.68);
  }

  .wi-notif-readpane-section{
    border-color:rgba(71,85,105,.5) !important;
    background:rgba(8,14,27,.84) !important;
  }

  .wi-notif-readpane-sectiontitle{
    color:#9bb1cc;
  }

  .wi-notif-readpane-section--ai{
    border-color:rgba(96,165,250,.5);
    background:
      linear-gradient(145deg, rgba(30,58,138,.34), rgba(15,23,42,.76));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 12px 24px rgba(2,6,23,.36);
  }

  .wi-notif-readpane-section--ai .wi-notif-readpane-sectiontitle{
    color:#bfdbfe;
  }

  .wi-notif-readpane-ai-toggle{
    border-color:rgba(96,165,250,.58);
    background:rgba(30,64,175,.34);
    color:#dbeafe;
  }

  .wi-notif-readpane-ai-preview{
    color:#dbeafe;
    border-color:rgba(96,165,250,.48);
    background:rgba(30,64,175,.28);
  }

  .wi-notif-readpane-ai-signal{
    border-color:rgba(96,165,250,.48);
    background:rgba(30,64,175,.34);
    color:#dbeafe;
  }

  .wi-notif-readpane-section--completion{
    border-color:rgba(74,222,128,.5);
    background:
      linear-gradient(145deg, rgba(20,83,45,.34), rgba(8,24,18,.84));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 12px 24px rgba(2,6,23,.36);
  }

  .wi-notif-readpane-section--completion .wi-notif-readpane-sectiontitle{
    color:#bbf7d0;
  }

  .wi-notif-complete-item{
    border-color:rgba(74,222,128,.32);
    background:rgba(15,23,42,.74);
  }

  .wi-notif-complete-label{
    color:#9fd9bc;
  }

  .wi-notif-complete-value{
    color:#dcfce7;
  }

  .wi-notif-complete-value.is-note{
    color:#d7f9e7;
  }

  .wi-notif-readpane-completion-signal{
    border-color:rgba(74,222,128,.45);
    background:rgba(21,128,61,.30);
    color:#dcfce7;
  }

  .wi-notif-readpane-ai-strategy,
  .wi-notif-readpane-ai-note{
    color:#dbeafe;
    border-color:rgba(96,165,250,.46);
    background:rgba(30,64,175,.22);
  }

  .wi-notif-readpane-ai-focus{
    color:#eff6ff;
  }

  .wi-notif-readpane-ai-text{
    color:#d4deeb;
  }

  .wi-notif-readpane-checkitem{
    color:#d4deeb;
  }

  .wi-notif-readpane-checkitem::before{
    background:#60a5fa;
  }

  .wi-notif-readpane-bodytext{
    color:#e5edf8;
  }

  .wi-notif-readpane-quote{
    border-left-color:rgba(100,116,139,.62);
    background:rgba(15,23,42,.78);
  }

  .wi-notif-readpane-quote-title{
    color:#8ea3bd;
  }

  .wi-notif-readpane-quote-subject{
    color:#e2e8f0;
  }

  .wi-notif-readpane-quote-body{
    color:#b9c9dd;
  }

  .wi-notif-readpane-replybtn{
    border-color:rgba(100,116,139,.56);
    background:rgba(15,23,42,.88);
    color:#d4deeb;
  }

  .wi-notif-readpane-replybtn:hover{
    border-color:rgba(96,165,250,.52);
    background:rgba(30,41,59,.92);
    box-shadow:0 8px 16px rgba(2,6,23,.34);
  }

  .wi-notif-readpane-replybtn.is-primary{
    border-color:rgba(96,165,250,.58);
    background:#2563eb;
    color:#eff6ff;
  }

  .wi-notif-readpane-replysubtitle{
    color:#9bb1cc;
  }

  .wi-notif-readpane-replynote{
    color:#a4b6ce;
  }

  .wi-notif-actionbar{
    border-top-color:rgba(71,85,105,.42);
    background:
      linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.56) 28%, rgba(2,6,23,.9));
  }

  .wi-notif-actiondock{
    border-color:rgba(71,85,105,.5);
    background:rgba(2,6,23,.88);
    box-shadow:0 18px 34px rgba(2,6,23,.5);
  }

  .wi-notif-actiondock-caption{
    color:#b7c7da;
  }

  .wi-notif-actionbtn{
    border-color:rgba(100,116,139,.56);
    background:rgba(15,23,42,.86);
    color:#dbe7f5;
  }

  .wi-notif-actionbtn:hover{
    border-color:rgba(125,147,177,.72);
    box-shadow:0 12px 20px rgba(2,6,23,.35);
  }

  .wi-notif-actionbtn--status{
    background:rgba(30,41,59,.82);
  }

  .wi-notif-actionbtn--utility{
    background:rgba(51,65,85,.76);
  }

  .wi-notif-replybox{
    border-top-color:rgba(71,85,105,.52) !important;
    background:
      linear-gradient(180deg, rgba(8,13,24,.95), rgba(3,8,17,.98)) !important;
    box-shadow:0 -18px 34px rgba(2,6,23,.58) !important;
  }

  .wi-notif-replymeta-label{
    color:#8ea3bd !important;
  }

  .wi-notif-replymeta-value{
    color:#e2e8f0 !important;
  }

  .wi-notif-replyinput{
    border-color:rgba(100,116,139,.58) !important;
    background:rgba(15,23,42,.9) !important;
    color:#e2e8f0 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(2,6,23,.38) !important;
  }

  .wi-notif-replyinput::placeholder{
    color:#7f96b4 !important;
  }

  .wi-notif-replyinput:focus{
    border-color:rgba(96,165,250,.72) !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .wi-notif-replyshortcut{
    color:#8ea3bd;
  }

  .wi-notif-replycount{
    border-color:rgba(100,116,139,.56);
    background:rgba(15,23,42,.86);
    color:#cbd5e1;
  }

  .wi-notif-replyacts #wiNotifReplyCancel{
    border-color:rgba(100,116,139,.58);
    background:rgba(15,23,42,.9) !important;
    color:#d4deeb !important;
  }

  .wi-notif-replyacts #wiNotifReplyCancel:hover{
    background:rgba(30,41,59,.92) !important;
    border-color:rgba(125,147,177,.72) !important;
  }
}

/* Keep delete action synced with "Xoá tất cả" palette */
.wi-notif-actionbtn--danger{
  border-color:rgba(248,113,113,.35) !important;
  background:rgba(254,242,242,.9) !important;
  color:#991b1b !important;
}

.wi-notif-actionbtn--danger:hover{
  border-color:rgba(248,113,113,.44) !important;
  background:rgba(254,226,226,.94) !important;
  filter:brightness(1.02) !important;
}

.wi-notif-actionbtn--danger:focus-visible{
  box-shadow:0 0 0 3px rgba(248,113,113,.24), 0 10px 20px rgba(2,6,23,.18) !important;
}

.wi-notif-actionbtn--danger:disabled{
  border-color:rgba(248,113,113,.28) !important;
  background:rgba(254,242,242,.7) !important;
  color:rgba(127,29,29,.65) !important;
}

@media (prefers-color-scheme: dark){
  .wi-notif-actionbtn--danger{
    border-color:rgba(248,113,113,.52) !important;
    background:rgba(127,29,29,.48) !important;
    color:#fecaca !important;
  }

  .wi-notif-actionbtn--danger:hover{
    border-color:rgba(252,165,165,.66) !important;
    background:rgba(127,29,29,.56) !important;
  }

  .wi-notif-actionbtn--danger:focus-visible{
    box-shadow:0 0 0 3px rgba(248,113,113,.28), 0 10px 20px rgba(2,6,23,.30) !important;
  }

  .wi-notif-actionbtn--danger:disabled{
    border-color:rgba(248,113,113,.34) !important;
    background:rgba(127,29,29,.34) !important;
    color:rgba(254,202,202,.7) !important;
  }
}

/* Priority pill in notification list (compact row1 badges) */
.wi-notif-item-row1-badges .wi-notif-priopill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:1px 6px;
  border-radius:4px;
  border:1px solid rgba(148,163,184,.38);
  background:rgba(226,232,240,.86);
  color:#334155;
  font-size:9.5px;
  font-weight:760;
  line-height:1.2;
  white-space:nowrap;
  letter-spacing:.01em;
}

.wi-notif-item-row1-badges .wi-notif-priopill.is-urgent{
  border-color:rgba(239,68,68,.46);
  background:rgba(254,226,226,.94);
  color:#b91c1c;
}

.wi-notif-item-row1-badges .wi-notif-priopill.is-high{
  border-color:rgba(249,115,22,.45);
  background:rgba(255,237,213,.94);
  color:#9a3412;
}

.wi-notif-item-row1-badges .wi-notif-priopill.is-low{
  border-color:rgba(20,184,166,.42);
  background:rgba(204,251,241,.92);
  color:#115e59;
}

.wi-notif-item-row1-badges .wi-notif-statuspill{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wi-notif-actiondock-status.is-assigner{
  border-style:solid;
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.18);
}

.wi-notif-actiondock-status.is-assignee{
  border-style:solid;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.14);
}

@media (prefers-color-scheme: dark){
  .wi-notif-item-row1-badges .wi-notif-priopill{
    border-color:rgba(100,116,139,.62);
    background:rgba(15,23,42,.86);
    color:#cbd5e1;
  }

  .wi-notif-item-row1-badges .wi-notif-priopill.is-urgent{
    border-color:rgba(248,113,113,.58);
    background:rgba(127,29,29,.52);
    color:#fecaca;
  }

  .wi-notif-item-row1-badges .wi-notif-priopill.is-high{
    border-color:rgba(251,146,60,.56);
    background:rgba(124,45,18,.50);
    color:#fed7aa;
  }

  .wi-notif-item-row1-badges .wi-notif-priopill.is-low{
    border-color:rgba(45,212,191,.52);
    background:rgba(17,94,89,.52);
    color:#99f6e4;
  }
}

@media (max-width:980px){
  .wi-notif-item-row1-badges{
    max-width:none;
  }
}

/* Detail pane should stay focused on content, hide top pill tags */
.wi-notif-readpane-tags{
  display:none !important;
}

.chat-agent-approval{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.32);
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
}

body.chat-agent-approval-open{
  overflow:hidden;
}

.chat-agent-approval.hidden{
  display:none !important;
}

.chat-agent-approval-card{
  width:min(560px, calc(100vw - 32px));
  border-radius:22px;
  padding:22px 22px 18px;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(248,250,252,.98) 100%);
  box-shadow:0 28px 80px rgba(15,23,42,.24);
}

.chat-agent-approval-eyebrow{
  margin-bottom:10px;
  color:#0f766e;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.chat-agent-approval-title{
  color:#0f172a;
  font-size:21px;
  font-weight:860;
  line-height:1.25;
}

.chat-agent-approval-sub{
  margin-top:10px;
  color:#334155;
  font-size:14px;
  line-height:1.55;
  white-space:pre-line;
}

.chat-agent-approval-body{
  margin-top:14px;
  color:#475569;
  font-size:13px;
  line-height:1.65;
  white-space:pre-line;
}

.chat-agent-approval-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.chat-agent-approval-btn{
  appearance:none;
  border:1px solid rgba(148,163,184,.36);
  background:#fff;
  color:#0f172a;
  min-height:42px;
  padding:0 16px;
  border-radius:13px;
  font-size:14px;
  font-weight:760;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.chat-agent-approval-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
  border-color:rgba(100,116,139,.42);
}

.chat-agent-approval-btn.is-primary{
  border-color:rgba(15,118,110,.28);
  background:linear-gradient(135deg, #0f766e 0%, #0ea5a4 100%);
  color:#f8fafc;
}

@media (prefers-color-scheme: dark){
  .chat-agent-approval{
    background:rgba(2,6,23,.48);
  }

  .chat-agent-approval-card{
    border-color:rgba(148,163,184,.18);
    background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(17,24,39,.98) 100%);
    box-shadow:0 28px 80px rgba(2,6,23,.58);
  }

  .chat-agent-approval-eyebrow{
    color:#5eead4;
  }

  .chat-agent-approval-title{
    color:#f8fafc;
  }

  .chat-agent-approval-sub{
    color:#cbd5e1;
  }

  .chat-agent-approval-body{
    color:#94a3b8;
  }

  .chat-agent-approval-btn{
    border-color:rgba(71,85,105,.74);
    background:rgba(15,23,42,.92);
    color:#e2e8f0;
  }
}

@media (max-width:640px){
  .chat-agent-approval{
    padding:16px;
    align-items:flex-end;
  }

  .chat-agent-approval-card{
    width:100%;
    border-radius:20px;
    padding:18px 18px 16px;
  }

  .chat-agent-approval-actions{
    flex-direction:column-reverse;
  }

  .chat-agent-approval-btn{
    width:100%;
  }
}