/* STAS Chat v1.2.0 */
#stas-chat-wrap{position:fixed;bottom:24px;right:24px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}

/* Bubble */
#stas-bubble{width:58px;height:58px;border-radius:50%;background:var(--stas-color,#1a73e8);border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;position:relative;margin-left:auto;}
#stas-bubble:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(0,0,0,.35);}
#stas-badge{position:absolute;top:-2px;right:-2px;background:#e53935;color:#fff;border-radius:50%;width:18px;height:18px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* Window — rộng hơn */
#stas-window{display:none;flex-direction:column;position:absolute;bottom:70px;right:0;width:420px;max-height:620px;background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.2);overflow:hidden;animation:stasUp .25s ease;}
@keyframes stasUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
#stas-window.open{display:flex;}

/* Header */
#stas-header{background:var(--stas-color,#1a73e8);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
#stas-avatar{font-size:24px;line-height:1;}
#stas-title{font-weight:700;font-size:14px;line-height:1.2;}
#stas-status{font-size:11px;opacity:.85;}
#stas-header-actions{margin-left:auto;display:flex;gap:6px;}
#stas-clear,#stas-close{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .15s;}
#stas-clear:hover,#stas-close:hover{background:rgba(255,255,255,.35);}

/* Quick shortcuts */
#stas-shortcuts{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #eee;background:#fafafa;flex-shrink:0;}
.stas-shortcut{background:#fff;border:1.5px solid var(--stas-color,#1a73e8);color:var(--stas-color,#1a73e8);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.stas-shortcut:hover{background:var(--stas-color,#1a73e8);color:#fff;}

/* Messages */
#stas-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;}
#stas-messages::-webkit-scrollbar{width:4px;}
#stas-messages::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px;}

.stas-msg{display:flex;flex-direction:column;max-width:90%;animation:stasMsgIn .18s ease;}
@keyframes stasMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.stas-msg.user{align-self:flex-end;align-items:flex-end;}
.stas-msg.bot{align-self:flex-start;}
.stas-msg.restored{opacity:.72;}

.stas-bubble-text{padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.55;word-break:break-word;white-space:pre-wrap;}
.stas-msg.user .stas-bubble-text{background:var(--stas-color,#1a73e8);color:#fff;border-bottom-right-radius:4px;}
.stas-msg.bot .stas-bubble-text{background:#f1f3f4;color:#202124;border-bottom-left-radius:4px;}

/* Link buttons trong chat */
.stas-pay-btn{display:inline-block;background:var(--stas-color,#1a73e8);color:#fff!important;padding:6px 14px;border-radius:20px;text-decoration:none!important;font-size:13px;font-weight:600;margin:4px 0;}
.stas-pay-btn:hover{opacity:.88;}
.stas-order-link{display:inline-block;background:#f1f3f4;color:#333!important;padding:4px 12px;border-radius:16px;text-decoration:none!important;font-size:12px;margin:2px 0;}
.stas-link{color:var(--stas-color,#1a73e8)!important;text-decoration:underline;font-size:13px;}

/* Typing */
.stas-typing{display:flex;gap:5px;padding:10px 14px;align-items:center;}
.stas-typing span{width:8px;height:8px;border-radius:50%;background:#bbb;animation:stasTyping 1.2s infinite;}
.stas-typing span:nth-child(2){animation-delay:.2s;}
.stas-typing span:nth-child(3){animation-delay:.4s;}
@keyframes stasTyping{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* Notice */
.stas-notice{text-align:center;font-size:12px;color:#888;background:#f8f9fa;border-radius:8px;padding:5px 12px;margin:2px auto;width:fit-content;animation:stasMsgIn .3s ease;}

/* Product Cards — rộng hơn */
.stas-cards-wrap{display:flex;flex-direction:column;gap:8px;align-self:flex-start;width:100%;animation:stasMsgIn .2s ease;}
.stas-card{display:flex;gap:10px;background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:10px;box-shadow:0 1px 4px rgba(0,0,0,.07);transition:box-shadow .2s,border-color .2s;}
.stas-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.12);border-color:var(--stas-color,#1a73e8);}
.stas-card-img-link{flex-shrink:0;}
.stas-card-img{width:76px;height:76px;object-fit:cover;border-radius:8px;display:block;border:1px solid #f0f0f0;}
.stas-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.stas-card-name{font-size:13px;font-weight:600;color:#202124;text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.stas-card-name:hover{color:var(--stas-color,#1a73e8);}
.stas-card-price{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.stas-price-old{font-size:12px;color:#999;text-decoration:line-through;}
.stas-price-now{font-size:14px;font-weight:700;color:#e53935;}
.stas-card-stock{font-size:12px;font-weight:500;}
.stas-card-stock.in-stock{color:#2e7d32;}
.stas-card-stock.out-stock{color:#c62828;}
.stas-card-btns{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
.stas-btn-cart,.stas-btn-order{border:none;border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;padding:5px 12px;transition:opacity .15s,transform .12s;white-space:nowrap;}
.stas-btn-cart{background:var(--stas-color,#1a73e8);color:#fff;}
.stas-btn-cart.added{background:#2e7d32;}
.stas-btn-cart:hover,.stas-btn-order:hover{opacity:.85;transform:scale(1.03);}
.stas-btn-cart:disabled{opacity:.6;cursor:default;transform:none;}
.stas-btn-order{background:#fff;color:var(--stas-color,#1a73e8);border:1.5px solid var(--stas-color,#1a73e8);}

/* Toast */
.stas-toast{position:fixed;bottom:90px;right:24px;z-index:100000;background:#323232;color:#fff;border-radius:8px;padding:10px 18px;font-size:13px;font-family:inherit;box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;max-width:300px;}
.stas-toast.show{opacity:1;transform:translateY(0);}

/* Image preview */
#stas-preview-wrap{position:relative;margin:0 12px 4px;display:inline-flex;width:72px;}
#stas-img-preview{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid var(--stas-color,#1a73e8);}
#stas-remove-img{position:absolute;top:-6px;right:-6px;background:#e53935;color:#fff;border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;}

/* Input */
#stas-input-row{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid #eee;flex-shrink:0;background:#fff;}
#stas-img-btn{font-size:20px;cursor:pointer;flex-shrink:0;line-height:1;padding-bottom:4px;opacity:.7;transition:opacity .15s;}
#stas-img-btn:hover{opacity:1;}
#stas-input{flex:1;border:1px solid #ddd;border-radius:20px;padding:8px 14px;font-size:14px;resize:none;outline:none;max-height:100px;overflow-y:auto;line-height:1.4;font-family:inherit;transition:border-color .2s;}
#stas-input:focus{border-color:var(--stas-color,#1a73e8);}
#stas-send{width:38px;height:38px;border-radius:50%;background:var(--stas-color,#1a73e8);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .15s;}
#stas-send:hover{opacity:.88;transform:scale(1.05);}
#stas-send:disabled{opacity:.5;cursor:not-allowed;}

@media(max-width:480px){
  #stas-chat-wrap{bottom:12px;right:12px;}
  #stas-window{width:calc(100vw - 24px);right:0;bottom:66px;}
  .stas-card-img{width:64px;height:64px;}
}

/* ── Dark theme ──────────────────────────── v1.4 ── */
#stas-window.dark { --stas-bg:#1e1e2e; --stas-msg-bg:#2a2a3e; --stas-text:#e8e8f0; --stas-border:#3a3a4e; }
#stas-window.dark #stas-messages       { background:var(--stas-bg,#1e1e2e); }
#stas-window.dark .stas-msg.bot .stas-bubble-text { background:var(--stas-msg-bg,#2a2a3e); color:var(--stas-text,#e8e8f0); }
#stas-window.dark #stas-input-row      { background:var(--stas-bg,#1e1e2e); border-top-color:var(--stas-border,#3a3a4e); }
#stas-window.dark #stas-input          { background:#2a2a3e; border-color:#4a4a5e; color:#e8e8f0; }
#stas-window.dark #stas-shortcuts      { background:#16162a; border-bottom-color:#3a3a4e; }
#stas-window.dark .stas-shortcut       { background:#2a2a3e; color:inherit; border-color:currentColor; }
#stas-window.dark .stas-card           { background:#2a2a3e; border-color:#3a3a4e; }
#stas-window.dark .stas-card-name      { color:#e0e0f0; }
#stas-window.dark .stas-notice         { background:#2a2a3e; color:#aaa; }

/* Theme toggle button */
#stas-theme-toggle { background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
#stas-theme-toggle:hover { background:rgba(255,255,255,.35); }

/* ── Loading text style ──────────────────── */
.stas-typing-text { display:flex; align-items:center; gap:8px; font-size:13px; color:#666; }
.stas-spin-icon { animation: stas-spin 1s linear infinite; flex-shrink:0; }
@keyframes stas-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ── Payment Choice Buttons ──────────────────── v1.5.3 ── */
.stas-choice-btn {
  display: inline-block; margin: 4px 4px 4px 0;
  background: #fff;
  border: 2px solid var(--stas-color, #1a73e8);
  color: var(--stas-color, #1a73e8);
  border-radius: 20px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap;
  font-family: inherit;
}
.stas-choice-btn:hover {
  background: var(--stas-color, #1a73e8);
  color: #fff; transform: scale(1.03);
}
.stas-choice-btn:active { transform: scale(.98); }

/* Đảm bảo bubble text cho phép multiple buttons */
.stas-msg.bot .stas-bubble-text .stas-choice-btn { display: inline-block; }

/* ── Order Success Card ────────────────────── v1.5.4 ── */
.stas-order-wrap { width: 100%; align-self: flex-start; }

.stas-order-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  background: #fff;
  animation: stasOrderIn .5s cubic-bezier(.34,1.56,.64,1);
  max-width: 340px;
  width: 100%;
}
@keyframes stasOrderIn {
  from { opacity:0; transform:scale(.8) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* Header gradient */
.stas-oc-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: #fff; text-align: center;
  padding: 20px 16px 18px;
}
.stas-oc-emoji { font-size: 42px; line-height: 1; margin-bottom: 6px; }
.stas-oc-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.stas-oc-sub   { font-size: 12px; opacity: .88; margin-top: 3px; }

/* Body rows */
.stas-oc-body  { padding: 14px 16px; background: #fafbff; }
.stas-oc-row   {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid #eef0f8;
  gap: 8px;
}
.stas-oc-row:last-child { border-bottom: none; }
.stas-oc-lbl   { font-size: 12px; color: #888; white-space: nowrap; flex-shrink: 0; }
.stas-oc-val   { font-size: 13px; color: #333; font-weight: 600; text-align: right; }
.stas-oc-id    { color: var(--stas-color,#1a73e8); font-size: 14px; font-weight: 800; }
.stas-oc-total { color: #e53935; font-size: 16px; font-weight: 800; }

/* Delivery section (COD) */
.stas-oc-delivery {
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  color: #2e7d32; padding: 12px 16px;
  font-size: 13px; font-weight: 500; line-height: 1.5;
  text-align: center;
}

/* Bank section (BACS) */
.stas-oc-bank { padding: 12px 16px; background: #fff8e1; }
.stas-oc-bank-info {
  font-size: 12px; color: #555; margin-bottom: 10px;
  background: rgba(0,0,0,.04); border-radius: 8px; padding: 8px 10px; line-height: 1.7;
}
.stas-oc-pay-btn {
  display: block; text-align: center;
  background: linear-gradient(135deg, #1a73e8, #0d47a1);
  color: #fff !important; text-decoration: none !important;
  border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(26,115,232,.35);
  transition: transform .15s, box-shadow .15s;
}
.stas-oc-pay-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(26,115,232,.45); }

/* Footer */
.stas-oc-footer {
  background: #f8f9ff; border-top: 1px dashed #e0e4f0;
  padding: 10px 14px; font-size: 12px; color: #777;
  text-align: center; line-height: 1.5;
}

/* Dark mode */
#stas-window.dark .stas-order-card { background: #2a2a3e; }
#stas-window.dark .stas-oc-body    { background: #1e1e2e; }
#stas-window.dark .stas-oc-row     { border-bottom-color: #3a3a4e; }
#stas-window.dark .stas-oc-val     { color: #e0e0f0; }
#stas-window.dark .stas-oc-footer  { background: #16162a; color: #888; border-top-color: #3a3a4e; }

/* ── Nút Tư Vấn Sản Phẩm (product page) ─────── v1.5.6 ── */
.stas-product-consult-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--stas-btn, #1a73e8) 0%, color-mix(in srgb, var(--stas-btn,#1a73e8) 70%, #000) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .2px;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
  position: relative;
  overflow: hidden;
}
/* Hiệu ứng shimmer */
.stas-product-consult-btn::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: rgba(255,255,255,.15);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.stas-product-consult-btn:hover::before { left: 120%; }
.stas-product-consult-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.stas-product-consult-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* Nếu color-mix không support (cũ), fallback */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .stas-product-consult-btn {
    background: var(--stas-btn, #1a73e8);
  }
}

/* ═══════════════════════════════════════════════════
   UI ENHANCEMENTS v1.7.6 — Mobile & Visual Polish
   Tất cả đều additive, không override chức năng gốc
═══════════════════════════════════════════════════ */

/* Fix touch events mobile */
#stas-bubble, #stas-send, #stas-close, #stas-clear,
#stas-theme-toggle, .stas-shortcut, .stas-btn-cart,
.stas-btn-order, .stas-choice-btn, .stas-product-consult-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Bubble pulse ring — pointer-events:none quan trọng */
#stas-bubble::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--stas-color, #1a73e8);
  animation: sc-pulse 2.5s ease-out infinite;
  pointer-events: none; /* Tránh chặn click */
  opacity: .5;
}
@keyframes sc-pulse {
  0%  { transform: scale(1);    opacity: .5; }
  70% { transform: scale(1.35); opacity: 0; }
  100%{ transform: scale(1.35); opacity: 0; }
}
#stas-bubble.open::after { display: none; }

/* Header: online dot */
#stas-avatar-wrap { position: relative; }
#stas-avatar-wrap::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; background: #34d058;
  border-radius: 50%; border: 2px solid var(--stas-color, #1a73e8);
}

/* Status dot */
#stas-status::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: rgba(255,255,255,.7); border-radius: 50; margin-right: 4px;
  vertical-align: middle;
}

/* Bot bubble: nền trắng rõ hơn (gốc dùng #f1f3f4, hơi xám) */
.stas-msg.bot .stas-bubble-text {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

/* Messages area: nền nhạt nhẹ */
#stas-messages { background: #f5f6fa; }

/* Series header */
.stas-series-header {
  font-size: 11px; font-weight: 700; color: #888;
  letter-spacing: .3px; text-transform: uppercase;
  padding: 8px 4px 4px;
  border-top: 1px dashed #dde0e8;
  margin-top: 4px;
}
.stas-cards-wrap.stas-series .stas-card { background: #f8f9ff; }

/* Card hover cải thiện */
.stas-card {
  transition: box-shadow .18s, border-color .18s, transform .15s;
}
.stas-card:hover { transform: translateY(-1px); }

/* Price: đỏ đậm hơn */
.stas-price-now { color: #e53935; letter-spacing: -.2px; }

/* Buttons cải thiện */
.stas-btn-cart { box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.stas-btn-cart:hover { box-shadow: 0 3px 10px rgba(0,0,0,.2); }

/* Error + Zalo button */
.stas-error-box {
  background: #fff5f5 !important;
  color: #c62828 !important;
  border: 1px solid #ffd0d0 !important;
}
.stas-zalo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 8px 14px;
  background: #0068ff; color: #fff !important;
  text-decoration: none !important;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,104,255,.3);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.stas-zalo-btn:hover { opacity: .88; }

/* Input focus: màu primary */
#stas-input:focus { box-shadow: 0 0 0 2px rgba(26,115,232,.15); }

/* Send: spin khi disabled */
#stas-send:disabled svg { animation: sc-spin 1s linear infinite; opacity: .6; }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* Mobile fixes QUAN TRỌNG */
@media (max-width: 520px) {
  #stas-chat-wrap { bottom: 16px; right: 16px; }

  /* Window: fixed thay vì absolute — không bị keyboard iOS che */
  #stas-window {
    position: fixed !important;
    bottom: 80px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: 75svh !important;
    max-height: 75vh !important;
    border-radius: 18px !important;
    z-index: 100000 !important;
  }

  /* Ngăn iOS zoom khi focus input */
  #stas-input { font-size: 16px !important; }

  /* Touch targets tối thiểu 44px */
  #stas-send { width: 44px !important; height: 44px !important; }
  #stas-bubble { width: 56px !important; height: 56px !important; }
  #stas-close, #stas-clear, #stas-theme-toggle {
    width: 34px !important; height: 34px !important;
  }

  /* Scroll mượt iOS */
  #stas-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Cards compact trên mobile */
  .stas-card { padding: 8px; gap: 8px; }
  .stas-card-img { width: 64px !important; height: 64px !important; }
  .stas-card-name { font-size: 12px; }
  .stas-btn-cart, .stas-btn-order { font-size: 11px; padding: 5px 10px; }

  .stas-toast { right: 10px; bottom: 88px; }
}