دستیار هوش مصنوعی* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #fdf2f8 0%, #ede9fe 100%);
padding: 20px;
}
.chat-card {
width: 100%;
max-width: 480px;
background: rgba(255,255,255,0.55);
backdrop-filter: blur(12px);
border-radius: 32px;
padding: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
border: 1px solid rgba(255,255,255,0.4);
}
.chat-header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.avatar {
width: 52px;
height: 52px;
border-radius: 18px;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
font-weight: 600;
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25);
}
.chat-title h2 { font-size: 18px; color: #1e1b2e; }
.chat-title p { font-size: 13px; color: #6b5b8a; }
.chat-messages {
height: 340px;
overflow-y: auto;
padding: 18px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.message {
max-width: 80%;
padding: 12px 18px;
border-radius: 20px;
font-size: 15px;
line-height: 1.6;
animation: fadeUp 0.3s ease;
}
.message.user {
align-self: flex-end;
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
color: #fff;
border-bottom-right-radius: 6px;
}
.message.bot {
align-self: flex-start;
background: rgba(255,255,255,0.7);
color: #1e1b2e;
border-bottom-left-radius: 6px;
backdrop-filter: blur(4px);
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-input {
display: flex;
gap: 10px;
margin-top: 6px;
}
.chat-input input {
flex: 1;
padding: 14px 18px;
border: none;
border-radius: 18px;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(4px);
font-size: 15px;
outline: none;
transition: 0.2s;
}
.chat-input input:focus { background: rgba(255,255,255,0.8); box-shadow: 0 0 0 3px #a78bfa40; }
.chat-input button {
padding: 14px 22px;
border: none;
border-radius: 18px;
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.chat-input button:hover { transform: scale(1.03); opacity: 0.9; }
.typing {
align-self: flex-start;
color: #6b5b8a;
font-size: 14px;
padding: 8px 16px;
}
سلام! 👋 چطور میتونم کمکت کنم؟
const messages = document.getElementById('messages');
const input = document.getElementById('userInput');
function sendMessage() {
const text = input.value.trim();
if (!text) return;
messages.innerHTML += `
${text}
`;
input.value = '';
messages.innerHTML += `
در حال تایپ ...
`;
messages.scrollTop = messages.scrollHeight;
setTimeout(() => {
const typing = messages.querySelector('.typing');
if (typing) typing.remove();
const replies = [
'این ایده جالبیه! بیشتر توضیح بده 😊',
'متوجه شدم! چیز دیگهای هست؟',
'عالیه! الان بررسی میکنم',
'دقیقاً! نظرت چیه؟'
];
const reply = replies[Math.floor(Math.random() * replies.length)];
messages.innerHTML += `
${reply}
`;
messages.scrollTop = messages.scrollHeight;
}, 800);
}
input.addEventListener('keydown', e => e.key === 'Enter' && sendMessage());