/* ====================================================
   HUA TECH — AI Chatbot Widget v2  (chatbot.css)
   ✅ Cursor fix | ✅ 3D effects | ✅ Premium UI
   ==================================================== */

/* CRITICAL: Cursor restore (body has cursor:none globally) */
.hua-chat-window, .hua-chat-window * { cursor: auto !important; }
.hua-cb-input, .hua-cb-input:focus { cursor: text !important; }
.hua-cb-send, .hua-cb-close, .hua-cb-sugg-btn, .hua-chat-fab { cursor: pointer !important; }

:root {
  --cb-bg: #07071a; --cb-border: rgba(168,85,247,0.3);
  --cb-primary: #a855f7; --cb-accent: #f72585; --cb-blue: #4cc9f0;
  --cb-text: #e2e8f0; --cb-muted: #94a3b8; --cb-radius: 22px; --cb-z: 99999;
  --cb-shadow: 0 25px 80px rgba(0,0,0,.8), 0 0 60px rgba(168,85,247,.15);
}

/* === FAB 3D ORB === */
.hua-chat-fab {
  position:fixed; bottom:28px; right:28px; width:62px; height:62px;
  border-radius:50%; background:linear-gradient(145deg,#9b30e8,#e0207a,#7209b7);
  border:none; z-index:var(--cb-z); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(247,37,133,.5),0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .3s; outline:none;
}
.hua-chat-fab:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 10px 36px rgba(247,37,133,.65),inset 0 1px 0 rgba(255,255,255,.28); }
.hua-chat-fab:active { transform:scale(.95) translateY(1px); }
.hua-chat-fab svg {
  width:27px; height:27px; fill:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
  transition:opacity .25s,transform .35s cubic-bezier(0.34,1.56,0.64,1); position:absolute;
}
.hua-chat-fab .fab-icon-close { opacity:0; transform:rotate(-90deg) scale(.8); }
.hua-chat-fab.open .fab-icon-chat { opacity:0; transform:rotate(90deg) scale(.8); }
.hua-chat-fab.open .fab-icon-close { opacity:1; transform:rotate(0) scale(1); }

.hua-chat-fab::before,.hua-chat-fab::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  animation:cb-ring 2.8s ease-out infinite;
}
.hua-chat-fab::before { inset:-8px; border:2px solid rgba(168,85,247,.45); }
.hua-chat-fab::after  { inset:-16px; border:1.5px solid rgba(247,37,133,.25); animation-delay:.7s; }
@keyframes cb-ring { 0%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(1.6)} }

.hua-chat-badge {
  position:absolute; top:-3px; right:-3px; width:20px; height:20px;
  background:linear-gradient(135deg,#f72585,#ff6b6b); border-radius:50%; border:2px solid #07071a;
  font-size:10px; font-weight:800; color:#fff; font-family:system-ui,sans-serif;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(247,37,133,.6); animation:cb-badge 2s ease-in-out infinite;
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),opacity .3s;
}
@keyframes cb-badge { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.hua-chat-fab.open .hua-chat-badge { transform:scale(0); opacity:0; }

/* === CHAT WINDOW 3D ENTRY === */
.hua-chat-window {
  position:fixed; bottom:104px; right:28px; width:385px; height:580px;
  background:var(--cb-bg); border:1px solid var(--cb-border); border-radius:var(--cb-radius);
  box-shadow:var(--cb-shadow); z-index:var(--cb-z); display:flex; flex-direction:column;
  overflow:hidden; transform-origin:bottom right; font-family:'Segoe UI',system-ui,sans-serif;
  transform:scale(.7) translateY(30px) perspective(600px) rotateX(8deg);
  opacity:0; pointer-events:none;
  transition:transform .45s cubic-bezier(0.34,1.4,0.64,1),opacity .3s ease;
}
.hua-chat-window.open {
  transform:scale(1) translateY(0) perspective(600px) rotateX(0);
  opacity:1; pointer-events:all;
}
.hua-chat-window::before {
  content:''; position:absolute; inset:0; border-radius:var(--cb-radius); padding:1px;
  background:linear-gradient(135deg,rgba(168,85,247,.6),rgba(247,37,133,.4),rgba(76,201,240,.2),rgba(168,85,247,.1));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  animation:cb-bspin 6s linear infinite;
}
@keyframes cb-bspin { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }

/* === HEADER === */
.hua-cb-header {
  background:linear-gradient(135deg,rgba(18,5,42,.98),rgba(26,5,51,.98),rgba(13,26,64,.98));
  padding:14px 16px; display:flex; align-items:center; gap:11px;
  border-bottom:1px solid rgba(168,85,247,.2); flex-shrink:0; position:relative; overflow:hidden; z-index:2;
}
.hua-cb-header::after {
  content:''; position:absolute; bottom:0; left:-100%; width:60%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.8),rgba(247,37,133,.8),transparent);
  animation:cb-hline 4s ease-in-out infinite;
}
@keyframes cb-hline { 0%{left:-60%} 100%{left:140%} }

.hua-cb-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,#7209b7,#f72585);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(168,85,247,.3),0 0 16px rgba(168,85,247,.5);
  animation:cb-apulse 3s ease-in-out infinite;
}
@keyframes cb-apulse {
  0%,100%{box-shadow:0 0 0 2px rgba(168,85,247,.3),0 0 16px rgba(168,85,247,.5)}
  50%    {box-shadow:0 0 0 4px rgba(168,85,247,.2),0 0 28px rgba(168,85,247,.7),0 0 44px rgba(247,37,133,.3)}
}
.hua-cb-header-info { flex:1; min-width:0; }
.hua-cb-title { font-size:14.5px; font-weight:700; color:#fff; letter-spacing:.3px; }
.hua-cb-subtitle { font-size:11px; color:var(--cb-muted); display:flex; align-items:center; gap:5px; margin-top:2px; }
.hua-cb-online-dot {
  width:7px; height:7px; background:#10b981; border-radius:50%;
  box-shadow:0 0 6px rgba(16,185,129,.8); animation:cb-blink 2.5s ease-in-out infinite;
}
@keyframes cb-blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.hua-cb-close {
  width:30px; height:30px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:9px; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
}
.hua-cb-close:hover { background:rgba(247,37,133,.2); border-color:rgba(247,37,133,.4); transform:scale(1.08) rotate(5deg); }
.hua-cb-close svg { width:13px; height:13px; stroke:#94a3b8; stroke-width:2.5; }

/* === MESSAGES === */
.hua-cb-messages {
  flex:1; overflow-y:auto; padding:16px 13px; display:flex; flex-direction:column;
  gap:11px; scroll-behavior:smooth; position:relative;
}
.hua-cb-messages::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(168,85,247,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.025) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.hua-cb-messages::-webkit-scrollbar { width:3px; }
.hua-cb-messages::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#a855f7,#f72585); border-radius:2px; }

/* === BUBBLES === */
.hua-cb-msg { display:flex; gap:8px; align-items:flex-end; animation:cb-min .4s cubic-bezier(0.34,1.3,0.64,1) both; }
@keyframes cb-min { from{opacity:0;transform:translateY(14px) scale(.92)} to{opacity:1;transform:translateY(0) scale(1)} }
.hua-cb-msg.bot  { flex-direction:row; }
.hua-cb-msg.user { flex-direction:row-reverse; }
.hua-cb-msg.bot .hua-cb-bubble {
  background:linear-gradient(135deg,rgba(15,15,45,.98),rgba(20,20,58,.98));
  border:1px solid rgba(168,85,247,.18); color:var(--cb-text);
  border-radius:16px 16px 16px 3px; box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.hua-cb-msg.user .hua-cb-bubble {
  background:linear-gradient(135deg,#6d0fc7,#c41b75); color:#fff;
  border-radius:16px 16px 3px 16px; max-width:80%;
  box-shadow:0 4px 20px rgba(247,37,133,.35);
}
.hua-cb-msg-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#7209b7,#f72585);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
  box-shadow:0 0 10px rgba(168,85,247,.4);
}
.hua-cb-bubble { padding:10px 14px; font-size:13.5px; line-height:1.6; max-width:88%; word-break:break-word; }
.hua-cb-bubble a { color:var(--cb-blue); text-decoration:none; border-bottom:1px solid rgba(76,201,240,.3); }
.hua-cb-bubble strong { color:#c4b5fd; font-weight:700; }
.hua-cb-bubble ul { margin:6px 0 2px; padding-left:0; list-style:none; }
.hua-cb-bubble ul li { margin-bottom:4px; padding-left:14px; position:relative; }
.hua-cb-bubble ul li::before { content:'▸'; position:absolute; left:0; color:#a855f7; font-size:10px; top:2px; }

/* === TYPING === */
.hua-cb-typing { display:flex; gap:8px; align-items:flex-end; }
.hua-cb-typing-dots {
  background:linear-gradient(135deg,rgba(15,15,45,.98),rgba(20,20,58,.98));
  border:1px solid rgba(168,85,247,.18); border-radius:16px 16px 16px 3px;
  padding:13px 18px; display:flex; gap:5px; align-items:center;
}
.hua-cb-typing-dots span {
  width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#a855f7,#f72585);
  animation:cb-dot 1.5s ease-in-out infinite; box-shadow:0 0 8px rgba(168,85,247,.6);
}
.hua-cb-typing-dots span:nth-child(2){animation-delay:.22s} .hua-cb-typing-dots span:nth-child(3){animation-delay:.44s}
@keyframes cb-dot { 0%,80%,100%{transform:scale(.5) translateY(0);opacity:.4} 40%{transform:scale(1) translateY(-5px);opacity:1} }

/* === SUGGESTIONS === */
.hua-cb-suggestions { padding:2px 12px 10px; display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.hua-cb-sugg-btn {
  background:rgba(168,85,247,.07); border:1px solid rgba(168,85,247,.25); color:#c4b5fd;
  font-size:11.5px; font-family:'Segoe UI',system-ui,sans-serif;
  padding:5px 12px; border-radius:50px; transition:all .22s; white-space:nowrap;
}
.hua-cb-sugg-btn:hover { background:rgba(168,85,247,.18); border-color:rgba(168,85,247,.6); color:#fff; transform:translateY(-2px); }

/* === INPUT === */
.hua-cb-input-area {
  padding:8px 12px 12px; border-top:1px solid rgba(168,85,247,.15);
  background:rgba(7,7,26,.97); flex-shrink:0; position:relative; z-index:2;
}
.hua-cb-input-row {
  display:flex; gap:8px; align-items:flex-end;
  background:rgba(15,15,45,.9); border:1px solid rgba(168,85,247,.2);
  border-radius:15px; padding:8px 8px 8px 14px; transition:border-color .25s,box-shadow .25s;
}
.hua-cb-input-row:focus-within { border-color:rgba(168,85,247,.55); box-shadow:0 0 0 3px rgba(168,85,247,.1); }
.hua-cb-input {
  flex:1; background:transparent; border:none; outline:none; color:var(--cb-text);
  font-size:13.5px; font-family:'Segoe UI',system-ui,sans-serif;
  resize:none; max-height:90px; min-height:20px; line-height:1.5; caret-color:#a855f7;
}
.hua-cb-input::placeholder { color:rgba(148,163,184,.45); }
.hua-cb-send {
  width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#7209b7,#f72585);
  border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position:relative; overflow:hidden; transition:all .25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 3px 12px rgba(247,37,133,.35);
}
.hua-cb-send::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
  transform:translateX(-100%); transition:transform .4s;
}
.hua-cb-send:hover::after { transform:translateX(100%); }
.hua-cb-send:hover { transform:scale(1.1) rotate(-5deg); box-shadow:0 5px 20px rgba(247,37,133,.55); }
.hua-cb-send:active { transform:scale(.94); }
.hua-cb-send:disabled { opacity:.35; transform:none; box-shadow:none; }
.hua-cb-send svg { width:16px; height:16px; fill:#fff; }

.cb-price-tag {
  display:inline-block; background:rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.35);
  color:#c4b5fd; border-radius:5px; padding:1px 7px; font-size:12.5px;
  font-family:'Space Mono',monospace; font-weight:700;
}

/* === FOOTER === */
.hua-cb-footer {
  padding:5px 0 8px; text-align:center; font-size:10px;
  color:rgba(148,163,184,.35); font-family:'Space Mono','Courier New',monospace; flex-shrink:0;
}
.hua-cb-footer span { background:linear-gradient(135deg,#a855f7,#f72585); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }

/* === MOBILE === */
@media (max-width:480px) {
  .hua-chat-window { bottom:88px; right:10px; left:10px; width:auto; height:calc(100dvh - 116px); max-height:570px; }
  .hua-chat-fab { bottom:18px; right:18px; width:56px; height:56px; }
  .hua-cb-messages { padding:12px 10px; }
  .hua-cb-input-area { padding:7px 10px 10px; }
}
@media (max-height:600px) { .hua-chat-window { height:calc(100dvh - 100px); } }

/* Hide FAB when chat is open */
.hua-chat-fab.open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

/* ============================================================
   3D ROBOT FAB ANIMATION
   ============================================================ */
.fab-robot {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.robot-3d-wrap {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  animation: robot-float 2.8s ease-in-out infinite;
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
}

@keyframes robot-float {
  0%,100% { transform: translateY(0px) rotate(-1deg); }
  30%      { transform: translateY(-5px) rotate(1.5deg); }
  60%      { transform: translateY(-3px) rotate(-0.5deg); }
}

/* --- Antenna --- */
.r-antenna {
  width: 3px; height: 10px;
  background: linear-gradient(180deg,#fff,#c4b5fd);
  border-radius: 2px; margin-bottom: -1px; position: relative; z-index: 2;
}
.r-antenna-ball {
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #4cc9f0;
  box-shadow: 0 0 0 3px rgba(76,201,240,0.3), 0 0 10px #4cc9f0;
  animation: antenna-ping 1.4s ease-in-out infinite alternate;
}
@keyframes antenna-ping {
  from { background:#4cc9f0; box-shadow:0 0 0 3px rgba(76,201,240,.3),0 0 8px #4cc9f0; }
  to   { background:#f72585; box-shadow:0 0 0 3px rgba(247,37,133,.3),0 0 14px #f72585; }
}

/* --- Head --- */
.r-head {
  width: 42px; height: 34px;
  background: linear-gradient(160deg,#ffffff 0%,#dde8ff 60%,#c4d4ff 100%);
  border-radius: 10px 10px 8px 8px;
  position: relative; z-index: 3;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(100,120,200,0.2),
    0 4px 12px rgba(60,80,180,0.3);
}

/* Ears */
.r-ear {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 14px;
  background: linear-gradient(180deg,#e0e8ff,#b8c8f0);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7);
}
.r-ear-l { left: -7px; border-radius: 4px 2px 2px 4px; }
.r-ear-r { right: -7px; border-radius: 2px 4px 4px 2px; }

/* Visor / eye panel */
.r-visor {
  position: absolute; top: 7px; left: 6px; right: 6px; height: 14px;
  background: linear-gradient(135deg,#1a1a3e,#0d1b4b);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 6px rgba(76,201,240,0.3);
}

/* Eyes */
.r-eye {
  width: 7px; height: 7px; border-radius: 2px;
  background: #4cc9f0;
  box-shadow: 0 0 6px #4cc9f0, 0 0 12px rgba(76,201,240,0.6);
  animation: eye-blink 3.5s ease-in-out infinite;
}
.r-eye:nth-child(2) { animation-delay: 0.12s; }
@keyframes eye-blink {
  0%,88%,100%{ transform:scaleY(1); opacity:1; }
  93%        { transform:scaleY(0.08); opacity:0.6; }
}

/* Mouth dots */
.r-mouth-row {
  position: absolute; bottom: 6px;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; align-items: center;
}
.r-mouth-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: linear-gradient(135deg,#a855f7,#f72585);
  animation: mouth-pulse 1.8s ease-in-out infinite;
}
.r-mouth-dot:nth-child(1) { animation-delay: 0s;    width:3px; height:3px; }
.r-mouth-dot:nth-child(2) { animation-delay: 0.2s;  width:4px; height:4px; }
.r-mouth-dot:nth-child(3) { animation-delay: 0.4s;  width:3px; height:3px; }
@keyframes mouth-pulse {
  0%,100%{ transform:scale(1);   opacity:0.7; }
  50%    { transform:scale(1.4); opacity:1; }
}

/* --- Body --- */
.r-body {
  width: 34px; height: 22px; margin-top: 2px;
  background: linear-gradient(160deg,#ffffff 0%,#dde8ff 50%,#b8c8f0 100%);
  border-radius: 6px 6px 8px 8px;
  position: relative;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(100,120,200,0.2),
    0 4px 10px rgba(60,80,180,0.25);
}

/* Chest light */
.r-chest-light {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 6px; border-radius: 3px;
  background: linear-gradient(135deg,#4cc9f0,#a855f7);
  box-shadow: 0 0 8px rgba(76,201,240,0.8);
  animation: chest-glow 1.6s ease-in-out infinite alternate;
}
@keyframes chest-glow {
  from{ box-shadow:0 0 4px rgba(76,201,240,.6); background:linear-gradient(135deg,#4cc9f0,#a855f7); }
  to  { box-shadow:0 0 12px rgba(168,85,247,.9); background:linear-gradient(135deg,#a855f7,#f72585); }
}

/* Arms */
.r-arm {
  position: absolute; top: 3px;
  width: 8px; height: 16px;
  background: linear-gradient(180deg,#e0e8ff,#b8c8f0);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.7);
}
.r-arm-l {
  left: -9px; border-radius: 4px 2px 4px 4px;
  transform-origin: top center;
  animation: arm-wave-l 2.8s ease-in-out infinite;
}
.r-arm-r {
  right: -9px; border-radius: 2px 4px 4px 4px;
  transform-origin: top center;
  animation: arm-wave-r 2.8s ease-in-out infinite;
}
@keyframes arm-wave-l {
  0%,100%{ transform:rotate(-8deg); }
  40%    { transform:rotate(15deg); }
  70%    { transform:rotate(-12deg); }
}
@keyframes arm-wave-r {
  0%,100%{ transform:rotate(8deg); }
  40%    { transform:rotate(-20deg); }
  70%    { transform:rotate(10deg); }
}

/* --- Speech bubble (top right) --- */
.r-bubble {
  position: absolute;
  top: -8px; right: -18px;
  width: 20px; height: 14px;
  background: rgba(255,255,255,0.92);
  border-radius: 8px 8px 8px 2px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  animation: bubble-pop 2.8s ease-in-out infinite;
}
.r-bubble::after {
  content:''; position:absolute;
  bottom:-4px; left:3px;
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid rgba(255,255,255,0.92);
}
.r-bubble-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #a855f7;
  animation: bubble-dots 1.4s ease-in-out infinite;
}
.r-bubble-dot:nth-child(2){ animation-delay:.2s; background:#f72585; }
.r-bubble-dot:nth-child(3){ animation-delay:.4s; background:#4cc9f0; }
@keyframes bubble-dots {
  0%,80%,100%{ transform:scale(0.6); opacity:0.5; }
  40%        { transform:scale(1.2); opacity:1; }
}
@keyframes bubble-pop {
  0%,60%,100%{ transform:scale(1)   translateY(0); opacity:1; }
  80%        { transform:scale(1.08) translateY(-2px); }
}