body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; direction: rtl; font-family: Tahoma; background: #f0f2f5; }
.hidden { display: none !important; }

#page-app { display: flex; height: 100vh; overflow: hidden; }
#panel-list { width: 350px; background: #fff; border-left: 1px solid #ddd; display: flex; flex-direction: column; }
#panel-chat { flex: 1; display: flex; flex-direction: column; background: #e5ddd5; position: relative; }

.header, .chat-header { padding: 15px; background: #2b5278; color: #fff; display: flex; align-items: center; justify-content: space-between; }
.chat-header { background: #fff; color: #333; border-bottom: 1px solid #ddd; }

#msg-container { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 10px; font-size: 14px; position: relative; cursor: pointer; }
.msg.me { align-self: flex-start; background: #efffde; }
.msg.you { align-self: flex-end; background: #fff; }
.msg-footer { font-size: 10px; color: #888; text-align: left; margin-top: 4px; }

.chat-input { padding: 10px; background: #f0f0f0; display: flex; gap: 8px; align-items: center; }
.chat-input input[type="text"] { flex: 1; padding: 10px; border: none; border-radius: 20px; outline: none; }
.img-msg { max-width: 100%; border-radius: 8px; cursor: pointer; }

@media (max-width: 768px) {
    #panel-list { width: 100%; }
    .hidden-mobile { display: none !important; }
    #panel-chat.active { display: flex !important; position: fixed; inset: 0; z-index: 100; }
    .btn-back { font-size: 20px; background: none; border: none; cursor: pointer; }
}

#image-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 2000; display: flex; align-items: center; justify-content: center; }
#modal-img { max-width: 95%; max-height: 95%; }