body { font-family: tahoma; background: #f2f2f2; margin: 0; direction: rtl; }
header { background: #444; color: #fff; padding: 15px; text-align: center; }
#chat-container { max-width: 600px; margin: 20px auto; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
#chat-box { height: 400px; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; }
.msg { margin: 10px; padding: 10px; border-radius: 8px; max-width: 80%; line-height: 1.6; }
.user { background: #007bff; color: white; align-self: flex-start; }
.ai { background: #eee; color: #333; align-self: flex-end; }
.input-area { display: flex; border-top: 1px solid #ddd; }
input { flex: 1; padding: 15px; border: none; outline: none; }
button { padding: 0 20px; background: #444; color: #fff; border: none; cursor: pointer; }
.auth { max-width: 300px; margin: 80px auto; background: #fff; padding: 20px; border-radius: 8px; }
.auth input { display: block; width: 90%; margin-bottom: 10px; border: 1px solid #ddd; padding: 10px; }