* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, system-ui, sans-serif; background: #fafafa; }
.navbar { background: #fff; border-bottom: 1px solid #dbdbdb; padding: 10px; position: sticky; top: 0; display: flex; justify-content: space-around; z-index: 100; }
.container { max-width: 900px; margin: 20px auto; padding: 10px; }

/* Auth */
.auth-box { background: #fff; border: 1px solid #dbdbdb; padding: 30px; max-width: 350px; margin: 100px auto; text-align: center; }
input, textarea { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #dbdbdb; border-radius: 5px; background: #fafafa; }
button { width: 100%; padding: 10px; background: #0095f6; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }

/* Chat Layout */
.chat-container { display: flex; height: 80vh; background: #fff; border: 1px solid #dbdbdb; border-radius: 4px; overflow: hidden; }
.user-list { width: 30%; border-right: 1px solid #dbdbdb; overflow-y: auto; }
.chat-main { width: 70%; display: flex; flex-direction: column; }
#messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; }

/* Message Bubbles */
.msg { max-width: 70%; padding: 10px; margin: 5px; border-radius: 15px; position: relative; font-size: 14px; }
.me { align-self: flex-end; background: #0095f6; color: white; }
.to { align-self: flex-start; background: #efefef; color: black; }
.reaction-tag { font-size: 12px; position: absolute; bottom: -10px; right: 5px; }

/* Mobil Uyumluluk */
@media (max-width: 600px) {
    .chat-container { flex-direction: column; }
    .user-list { width: 100%; height: 200px; }
    .chat-main { width: 100%; height: 400px; }
    .profile-pic { width: 80px; height: 80px; }
}