body { font-family: Arial, sans-serif; background: #f0f2f5; margin: 0; padding: 0; color: #333; }
.site-header { text-align: center; padding: 25px; background: #1a365d; color: #fff; }
.site-header h1 { margin: 0 0 5px 0; font-size: 24px; }
.site-header p { margin: 0; font-size: 14px; color: #cbd5e0; }

.main-container { display: flex; gap: 20px; max-width: 1000px; margin: 30px auto; padding: 0 15px; flex-wrap: wrap; }
.chat-card, .lead-card { background: #fff; padding: 20px; border-radius: 8px; flex: 1; min-width: 300px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

.chat-messages { height: 320px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; overflow-y: scroll; margin-bottom: 12px; background: #f8fafc; }
.message { margin-bottom: 12px; padding: 10px 14px; border-radius: 6px; max-width: 85%; line-height: 1.4; font-size: 14px; }
.bot-msg { background: #edf2f7; color: #2d3748; }
.user-msg { background: #3182ce; color: #fff; margin-left: auto; text-align: right; }

.chat-input-area { display: flex; gap: 8px; }
.chat-input-area input { flex: 1; padding: 10px; border: 1px solid #cbd5e0; border-radius: 6px; outline: none; }

.form-group { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; font-weight: bold; color: #4a5568; }
.lead-card input, .lead-card textarea { padding: 9px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; outline: none; }

button { padding: 10px 18px; background: #3182ce; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
button:hover { background: #2b6cb0; }
.lead-card button { width: 100%; margin-top: 5px; }
#leadResponse { margin-top: 12px; font-size: 14px; font-weight: bold; text-align: center; }