:root { --brand: #3b82f6; /* blue-500 */ --bg: #ffffff; --text: #111827; /* gray-900 */ --muted: #6b7280; /* gray-500 */ --border: #e5e7eb; /* gray-200 */ --shadow: 0 10px 30px rgba(0,0,0,0.12); /* เพิ่มโทนสีสำหรับแอนิเมชัน (ปรับได้ตามใจ) */ --ai-aurora-1: #7C4DFF; --ai-aurora-2: #00E5FF; --ai-aurora-3: #00C853; } /* Floating button */ .chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); isolation: isolate; /* ให้ pseudo-elements ซ้อนทับสวยขึ้น */ } .chat-fab svg { width: 26px; height: 26px; } /* ====== Animation: Glow + Ping รอบปุ่ม (นุ่ม ๆ) ====== */ .chat-fab::before, .chat-fab::after { content: ""; position: absolute; inset: -6px; /* กว้างกว่าเดิมเล็กน้อย */ border-radius: inherit; z-index: -1; } .chat-fab::before { /* ใช้โทนแบรนด์เป็นแสงฟุ้ง */ background: radial-gradient(100% 100% at 50% 50%, rgba(59,130,246,.45), transparent 60%); filter: blur(10px); animation: breathe 3.2s ease-in-out infinite; opacity: .7; } .chat-fab::after { border: 2px solid rgba(59,130,246,.35); animation: ping 2.4s ease-out infinite; opacity: 0; } /* ====== Animation: Icon Bob (ขยับเบา ๆ) ====== */ .chat-fab .ai-icon { animation: bob 3s ease-in-out infinite; } /* ====== Animation: Stroke Draw (วาดเส้นซ้ำ ๆ) ====== */ .chat-fab .ai-icon path { stroke: currentColor; stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 5s ease-in-out infinite; } /* ====== Animation: Hover Wiggle (เฉพาะตอนชี้เมาส์) ====== */ .chat-fab:hover .ai-icon { animation: wiggle .6s ease both; } /* ====== เคารพการตั้งค่าลดการเคลื่อนไหว ====== */ @media (prefers-reduced-motion: reduce) { .chat-fab, .chat-fab::before, .chat-fab::after, .chat-fab .ai-icon, .chat-fab .ai-icon path { animation: none !important; } } /* ====== เมื่อเปิดแชท: หยุดแอนิเมชัน (โฟกัสที่เนื้อหา) ====== */ /* ให้ JS เพิ่มคลาส chat-open บน หรือ ตอนเปิดวิดเจ็ต */ .chat-open #chatFab, .chat-open #chatFab::before, .chat-open #chatFab::after, .chat-open #chatFab .ai-icon, .chat-open #chatFab .ai-icon path, .chat-open .chat-fab, .chat-open .chat-fab::before, .chat-open .chat-fab::after, .chat-open .chat-fab .ai-icon, .chat-open .chat-fab .ai-icon path { animation: none !important; opacity: 1; } /* ====== Keyframes ====== */ @keyframes breathe { 0%, 100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.06); opacity: .85; } } @keyframes ping { 0% { transform: scale(1); opacity: .0; } 30% { opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes draw { 0% { stroke-dashoffset: 120; opacity: .85; } 40% { stroke-dashoffset: 0; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 120; opacity: .85; } } @keyframes wiggle { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-6deg) scale(1.02); } 50% { transform: rotate(5deg) scale(1.02); } 75% { transform: rotate(-3deg) scale(1.01); } 100% { transform: rotate(0deg) scale(1); } } /* Widget */ .chat-widget { position: fixed; right: 20px; bottom: 90px; z-index: 9999; width: 340px; max-width: calc(100vw - 40px); background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); display: none; overflow: hidden; } .chat-widget.open { display: flex; flex-direction: column; } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); background: #fff; } .chat-title { font-weight: 600; } .chat-close { border: none; background: transparent; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; } .chat-body { height: 360px; overflow-y: auto; padding: 12px; background: #f8fafc; } .msg { max-width: 80%; margin: 8px 0; padding: 10px 12px; border-radius: 12px; line-height: 1.35; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; } .msg.user { margin-left: auto; background: #dbeafe; color: #0b1e3a; } .msg.bot { margin-right: auto; background: #fff; border: 1px solid var(--border); color: #111827; } .typing { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); font-size: 13px; margin: 8px 0; } .dot { width: 6px; height: 6px; background: var(--muted); border-radius: 50%; animation: bounce 1.2s infinite; } .dot:nth-child(2) { animation-delay: .15s; } .dot:nth-child(3) { animation-delay: .3s; } @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } } .chat-input { border-top: 1px solid var(--border); background: #fff; padding: 10px; } .input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; } textarea { resize: none; min-height: 42px; max-height: 140px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); font: inherit; outline: none; } textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } .send-btn { height: 42px; border: none; border-radius: 10px; padding: 0 14px; background: var(--brand); color: white; cursor: pointer; } .send-btn[disabled] { opacity: .6; cursor: not-allowed; }