:root,[data-theme=purple]{--chat-primary-start:#667eea;--chat-primary-end:#764ba2}.dark-mode,:root{--chat-text-light:#a0aec0}:root{--chat-bg:#ffffff;--chat-secondary-bg:#f8f9fa;--chat-text:#2d3748;--chat-border:#e2e8f0;--chat-shadow:rgba(0, 0, 0, 0.1)}[data-theme=blue]{--chat-primary-start:#4facfe;--chat-primary-end:#00f2fe}[data-theme=green]{--chat-primary-start:#11998e;--chat-primary-end:#38ef7d}[data-theme=orange]{--chat-primary-start:#fa709a;--chat-primary-end:#fee140}[data-theme=pink]{--chat-primary-start:#f093fb;--chat-primary-end:#f5576c}.dark-mode{--chat-bg:#1a202c;--chat-secondary-bg:#2d3748;--chat-text:#e2e8f0;--chat-border:#4a5568;--chat-shadow:rgba(0, 0, 0, 0.3)}.chat-bubble-btn,.chat-settings,.chat-settings *,.chat-widget,.chat-widget *{box-sizing:border-box}.chat-bubble-btn{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);border:none;cursor:pointer;box-shadow:0 4px 12px var(--chat-shadow);display:flex;align-items:center;justify-content:center;transition:.3s cubic-bezier(.4, 0, .2, 1);z-index:999999}.chat-bubble-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(102,126,234,.4)}.chat-bubble-icon,.chat-close-icon{width:28px;height:28px;color:#fff;transition:.3s}.chat-bubble-btn.active .chat-close-icon,.chat-bubble-icon{opacity:1;transform:rotate(0) scale(1)}.chat-close-icon{position:absolute;opacity:0;transform:rotate(-90deg) scale(0)}.chat-bubble-btn.active .chat-bubble-icon{opacity:0;transform:rotate(90deg) scale(0)}.unread-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;width:22px;height:22px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid #fff}.unread-badge.active{display:flex;animation:2s infinite badgePulse}@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.chat-bubble-btn.bottom-left,.chat-widget.bottom-left{left:24px;right:auto}.chat-widget{position:fixed;bottom:100px;right:24px;width:400px;max-width:calc(100vw - 48px);height:650px;max-height:calc(100vh - 140px);background:var(--chat-bg);border-radius:16px;box-shadow:0 10px 40px var(--chat-shadow);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:.3s cubic-bezier(.4, 0, .2, 1);z-index:999998}.chat-widget.active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.chat-header{background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);color:#fff;padding:20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.message-bubble,.user-message .message-avatar svg{color:var(--chat-text)}.chat-header-content{display:flex;align-items:center;gap:12px}.bot-avatar,.status-indicator{align-items:center;display:flex}.bot-avatar{width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;justify-content:center;flex-shrink:0}.bot-avatar svg{width:24px;height:24px;color:#fff}.chat-header-text h3{font-size:16px;font-weight:600;margin:0 0 4px}.status-indicator{font-size:13px;opacity:.9;gap:6px}.status-indicator::before{content:'';width:8px;height:8px;background:#4ade80;border-radius:50%;animation:2s infinite pulse}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.chat-header-actions{display:flex;gap:8px}.chat-close-btn,.header-action-btn{width:36px;height:36px;border:none;background:rgba(255,255,255,.2);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.chat-close-btn:hover,.header-action-btn:hover{background:rgba(255,255,255,.3)}.chat-close-btn svg,.header-action-btn svg{width:20px;height:20px;color:#fff}.chat-messages{flex:1;overflow-y:auto;padding:20px;background:var(--chat-secondary-bg);display:flex;flex-direction:column;gap:16px}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:0 0}.chat-messages::-webkit-scrollbar-thumb{background:var(--chat-border);border-radius:3px}.message{display:flex;gap:10px;animation:.3s messageSlideIn}@keyframes messageSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-message{flex-direction:row-reverse}.message-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.chat-send-btn svg,.message-avatar svg{width:18px;height:18px;color:#fff}.user-message .message-avatar{background:var(--chat-border)}.message-content{display:flex;flex-direction:column;gap:4px;max-width:75%}.message-bubble{padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.6;word-wrap:break-word}.bot-message .message-bubble{background:var(--chat-bg);border-bottom-left-radius:4px;box-shadow:0 1px 2px var(--chat-shadow)}.user-message .message-bubble{background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);color:#fff;border-bottom-right-radius:4px}.message-bubble code{background:rgba(0,0,0,.1);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:13px}.message-time{font-size:11px;color:var(--chat-text-light);padding:0 4px}.user-message .message-time{text-align:right}.quick-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.quick-action-btn{padding:6px 12px;background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.2);border-radius:12px;font-size:12px;cursor:pointer;transition:.2s;color:var(--chat-text)}.dark-mode .quick-action-btn{background:rgba(102,126,234,.2);border-color:rgba(102,126,234,.3)}.quick-action-btn:hover{background:rgba(102,126,234,.2);transform:translateY(-1px)}.emoji-btn:hover,.emoji-cat-btn.active,.emoji-cat-btn:hover,.input-action-btn:hover{background:var(--chat-secondary-bg)}.typing-indicator{display:flex;gap:4px;padding:12px 16px}.typing-indicator span{width:8px;height:8px;background:var(--chat-text-light);border-radius:50%;animation:1.4s infinite typing}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,100%,60%{transform:translateY(0)}30%{transform:translateY(-10px)}}.chat-input-container{padding:16px;background:var(--chat-bg);border-top:1px solid var(--chat-border);flex-shrink:0}.chat-form{display:flex;gap:8px;align-items:center}.input-action-btn{width:36px;height:36px;border:none;background:0 0;border-radius:8px;font-size:18px;cursor:pointer;transition:.2s;flex-shrink:0}.chat-input{flex:1;padding:10px 16px;border:1px solid var(--chat-border);border-radius:24px;font-size:14px;font-family:inherit;outline:0;transition:.2s;background:var(--chat-bg);color:var(--chat-text)}.chat-input:focus{border-color:var(--chat-primary-start);box-shadow:0 0 0 3px rgba(102,126,234,.1)}.chat-send-btn{width:40px;height:40px;border:none;background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}.chat-send-btn:hover{transform:scale(1.05)}.emoji-picker{position:absolute;bottom:80px;left:16px;right:16px;background:var(--chat-bg);border:1px solid var(--chat-border);border-radius:12px;box-shadow:0 4px 12px var(--chat-shadow);padding:12px;display:none;flex-direction:column;gap:10px;max-height:280px;z-index:10}.emoji-btn,.emoji-cat-btn{padding:8px;background:0 0;font-size:20px;cursor:pointer}.emoji-picker.active{display:flex}.emoji-categories{display:flex;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--chat-border)}.emoji-cat-btn{border:none;border-radius:8px;transition:background .2s}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;overflow-y:auto;max-height:200px}.emoji-btn{border:none;border-radius:6px;transition:.2s}.emoji-btn:hover{transform:scale(1.2)}.chat-settings{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:400px;max-width:calc(100vw - 40px);background:var(--chat-bg);border-radius:16px;box-shadow:0 20px 60px var(--chat-shadow);opacity:0;visibility:hidden;transition:.3s;z-index:1000000}.settings-btn,.theme-btn{cursor:pointer;transition:.2s}.chat-settings.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.settings-header{background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);color:#fff;padding:20px;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;align-items:center}.settings-header h3{font-size:18px;font-weight:600}.settings-close-btn{width:32px;height:32px;border:none;background:rgba(255,255,255,.2);color:#fff;border-radius:8px;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.settings-content{padding:20px;display:flex;flex-direction:column;gap:20px}.settings-group{display:flex;flex-direction:column;gap:10px}.settings-group label{font-size:14px;font-weight:600;color:var(--chat-text);display:flex;align-items:center;gap:10px}.settings-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.settings-group select{padding:10px;border:1px solid var(--chat-border);border-radius:8px;font-size:14px;background:var(--chat-bg);color:var(--chat-text);cursor:pointer}.theme-selector{display:flex;gap:12px}.theme-btn{width:50px;height:50px;border:3px solid transparent;border-radius:12px}.theme-btn:hover{transform:scale(1.1)}.theme-btn.active{border-color:var(--chat-text)}.settings-btn{padding:12px;border:none;background:linear-gradient(135deg,var(--chat-primary-start) 0,var(--chat-primary-end) 100%);color:#fff;border-radius:8px;font-size:14px;font-weight:600}.settings-btn:hover{transform:translateY(-2px)}.settings-btn.danger{background:linear-gradient(135deg,#ef4444 0,#dc2626 100%)}@media (max-width:600px){.container{padding:15px}.demo-header{padding:20px}.demo-header h1{font-size:1.5em}.chat-widget{width:calc(100vw - 32px);height:calc(100vh - 100px)}.emoji-grid{grid-template-columns:repeat(6,1fr)}}