.cs-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 99;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; border: none; cursor: pointer;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; transition: all 0.3s;
}
.cs-float:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(102,126,234,0.5); }

.cs-chat {
    display: none; position: fixed; bottom: 92px; right: 24px; z-index: 100;
    width: 360px; max-width: calc(100vw - 48px);
    background: white; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    flex-direction: column; overflow: hidden;
}
.cs-chat.active { display: flex; animation: csDropIn 0.3s ease-out; }
@keyframes csDropIn { 0%{opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:translateY(0)} }

.cs-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.cs-header h4 { margin: 0; font-size: 15px; font-weight: 600; }
.cs-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

.cs-messages {
    flex: 1; padding: 15px; overflow-y: auto;
    max-height: 300px; min-height: 200px;
}
.cs-msg { margin-bottom: 12px; }
.cs-msg.user { text-align: right; }
.cs-msg .bubble {
    display: inline-block; padding: 10px 14px; border-radius: 16px;
    max-width: 85%; font-size: 14px; line-height: 1.4;
}
.cs-msg.user .bubble { background: #667eea; color: white; }
.cs-msg.bot .bubble { background: #f0f0f0; color: #333; text-align: left; }

.cs-input-area {
    padding: 12px; border-top: 1px solid #eee;
    display: flex; gap: 8px;
}
.cs-input-area input {
    flex: 1; padding: 10px 14px; border: 1px solid #ddd;
    border-radius: 20px; font-size: 14px; margin: 0;
}
.cs-input-area button {
    padding: 10px 16px; background: #667eea; color: white;
    border: none; border-radius: 20px; cursor: pointer; font-size: 14px;
}

@media (max-width: 768px) {
    .cs-float { bottom: 88px; right: 18px; }
    .cs-chat { right: 10px; bottom: calc(88px + 64px); width: calc(100vw - 20px); }
}

body.dark-mode .cs-chat { background: #1e293b; }
body.dark-mode .cs-msg.bot .bubble { background: #334155; color: #f1f5f9; }
body.dark-mode .cs-input-area { border-top-color: #334155; }
body.dark-mode .cs-input-area input {
    border-color: #475569; background: #0f172a; color: #f1f5f9;
}