/* 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; }