/* =====================================================================
   AI CHATBOT FLOATING WIDGET
   - Desktop: chat window cố định bottom-right (380x560)
   - Mobile: bottom sheet full-width
   - Dùng biến CSS từ theme-settings.css
   - KHÔNG đè nút Push to Top / Setting đã có sẵn (offset trái hoặc bottom)
   ===================================================================== */

.chat-fab{
  position:fixed; right:18px; bottom:24px; z-index:88;
  width:58px; height:58px; border:0; cursor:pointer;
  border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.92), var(--primary));
  color:#fff;
  box-shadow:0 16px 36px -10px rgba(var(--primary-rgb),.65);
  transition:transform .2s ease, box-shadow .25s ease, background .25s;
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 22px 44px -10px rgba(var(--primary-rgb),.8); }
.chat-fab:active{ transform:scale(.94); }
.chat-fab .chat-fab-badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px;
  border-radius:9px; background:#fff; color:var(--primary);
  font-size:.68rem; font-weight:800; line-height:18px;
  padding:0 5px; box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* Tránh trùng với FAB Setting/Top đã có (right:18px bottom:24px).
   Khi cả 2 đều có, chatbot lên cao hơn để không che. */
body.has-fab-stack .chat-fab{ bottom:calc(24px + 56px + 12px); }
@media(max-width:680px){
  .chat-fab{ right:14px; bottom:calc(78px + env(safe-area-inset-bottom)); }
  body.has-fab-stack .chat-fab{ bottom:calc(78px + env(safe-area-inset-bottom) + 60px + 12px); }
}
body.has-sticky-buy .chat-fab{ bottom:calc(150px + env(safe-area-inset-bottom)); }
@media(min-width:681px){ body.has-sticky-buy .chat-fab{ bottom:24px; } }

/* FIX: thuộc tính [hidden] phải thắng display:flex/grid bên dưới,
   nếu không nút × và FAB sẽ KHÔNG đóng được cửa sổ chat. */
.chat-window[hidden],
.chat-backdrop[hidden],
.chat-fab[hidden]{ display:none !important; }

/* ============ CHAT WINDOW ============ */
.chat-backdrop{
  position:fixed; inset:0; z-index:108;
  background:rgba(20,16,28,.34);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  animation:cb-fade .25s ease;
}
@keyframes cb-fade{ from{ opacity:0; } to{ opacity:1; } }

.chat-window{
  position:fixed; z-index:110;
  right:18px; bottom:90px;
  width:380px; max-width:calc(100vw - 24px);
  height:560px; max-height:80vh;
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 30px 70px -20px rgba(30,20,40,.45);
  display:flex; flex-direction:column;
  overflow:hidden;
  color:var(--text);
  animation:cb-pop .35s cubic-bezier(.22,1,.36,1);
}
@keyframes cb-pop{ from{ opacity:0; transform:translateY(20px) scale(.96); } to{ opacity:1; transform:none; } }

.chat-head{
  padding:14px 18px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.18), rgba(var(--secondary-rgb),.18));
  border-bottom:1px solid var(--border);
}
.chat-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex:0 0 auto;
  box-shadow:0 4px 12px rgba(var(--primary-rgb),.25);
}
.chat-head-txt{ flex:1; min-width:0; }
.chat-head-txt h3{ margin:0; font-size:1rem; color:var(--text); font-weight:700; }
.chat-head-txt p{ margin:2px 0 0; font-size:.78rem; color:var(--muted); line-height:1.4; }
.chat-close{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  cursor:pointer; font-size:1.2rem; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; transition:transform .2s, background .2s;
}
.chat-close:hover{ transform:rotate(90deg); background:rgba(var(--primary-rgb),.12); color:var(--primary); }

.chat-body{
  flex:1; overflow-y:auto; padding:14px 14px 0;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background:rgba(var(--primary-rgb),.25); border-radius:3px; }

.chat-msg{
  display:flex; gap:8px; align-items:flex-end;
  animation:cb-msg .3s ease;
}
@keyframes cb-msg{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.chat-msg .av{
  width:28px; height:28px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex:0 0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.chat-msg .bub{
  background:var(--surface); color:var(--text); padding:10px 14px; border-radius:16px;
  max-width:80%; line-height:1.55; font-size:.92rem;
  border:1px solid var(--border);
  word-break:break-word;
}
.chat-msg.user{ justify-content:flex-end; }
.chat-msg.user .av{ order:2; background:rgba(var(--primary-rgb),.20); }
.chat-msg.user .bub{
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.92), var(--primary));
  color:#fff; border-color:transparent;
}
.chat-msg.bot .bub strong{ color:var(--primary); }
.chat-msg.bot .bub .ai-warn{
  margin-top:8px; font-size:.82rem; color:var(--muted);
  padding:8px 10px; border-radius:10px; background:rgba(var(--primary-rgb),.08);
}
.chat-msg.bot .bub .ai-urgent{
  margin-top:8px; padding:10px 12px; border-radius:10px;
  background:rgba(255,90,90,.14); color:#c62828; font-weight:600;
}

.chat-typing{ display:inline-flex; gap:3px; }
.chat-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:cb-typ 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes cb-typ{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }

/* Product cards trong chat */
.chat-products{
  margin-top:8px; display:grid; grid-template-columns:1fr; gap:8px;
}
.chat-prod{
  display:flex; gap:10px; padding:10px;
  border-radius:14px; background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  transition:transform .2s, box-shadow .2s;
}
.chat-prod:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(var(--primary-rgb),.30); }
.chat-prod img{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--surface); }
.chat-prod-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
/* Tên gọn: tối đa 2 dòng, có "…" */
.chat-prod-name{
  font-size:.85rem; font-weight:600; line-height:1.32; margin:0; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
/* Giá: 1 dòng, KHÔNG xuống dòng */
.chat-prod-price{
  font-size:.95rem; font-weight:800; color:var(--primary);
  white-space:nowrap;
}
/* Chỉ còn 1 nút Xem chi tiết */
.chat-prod .cp-view{
  align-self:flex-start; margin-top:4px;
  display:inline-flex; align-items:center;
  font-size:.76rem; font-weight:700; line-height:1.2;
  padding:6px 14px; border-radius:999px;
  text-decoration:none;
  background:rgba(var(--primary-rgb),.14); color:var(--primary);
  transition:background .18s, transform .18s;
}
.chat-prod .cp-view:hover{ background:rgba(var(--primary-rgb),.24); transform:translateX(2px); }

/* Quick suggestions */
.chat-quick{
  display:flex; flex-wrap:wrap; gap:6px; padding:0 4px 12px;
}
.chat-quick button{
  background:rgba(var(--primary-rgb),.10); color:var(--primary);
  border:1px solid rgba(var(--primary-rgb),.20);
  border-radius:18px; padding:7px 13px;
  font-size:.78rem; font-weight:500; cursor:pointer;
  transition:all .2s;
}
.chat-quick button:hover{ background:rgba(var(--primary-rgb),.18); transform:translateY(-1px); }

/* Input */
.chat-input{
  padding:12px 14px 14px; border-top:1px solid var(--border);
  display:flex; gap:8px; align-items:center;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
}
@supports not (background:color-mix(in srgb,red,blue)){ .chat-input{ background:var(--surface); } }
.chat-input input{
  flex:1; border:1px solid var(--border); background:var(--surface);
  border-radius:14px; padding:10px 14px; font:inherit; font-size:.92rem;
  color:var(--text);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.chat-input input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18); }
.chat-send{
  width:42px; height:42px; border:0; border-radius:50%;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.92), var(--primary));
  color:#fff; cursor:pointer; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .25s;
  box-shadow:0 8px 18px -6px rgba(var(--primary-rgb),.6);
}
.chat-send:hover{ transform:translateY(-2px) scale(1.05); }
.chat-send:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* Mobile: bottom sheet full */
@media(max-width:680px){
  .chat-window{
    right:0; left:0; bottom:0; width:100%; max-width:100%;
    height:88vh; max-height:88vh;
    border-radius:24px 24px 0 0;
    animation:cb-up .35s cubic-bezier(.22,1,.36,1);
  }
  @keyframes cb-up{ from{ transform:translateY(100%); } to{ transform:none; } }
  .chat-window::before{
    content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:42px; height:5px; border-radius:3px; background:var(--border);
  }
  .chat-head{ padding-top:24px; }
}

@media(prefers-reduced-motion:reduce){
  .chat-window, .chat-backdrop, .chat-fab, .chat-msg, .chat-typing span{
    animation:none; transition:none;
  }
}