/* Minimal styles for the demo app (RTL) */
body { font-family: Tahoma, Arial, sans-serif; direction: rtl; background:#f7f7f7; color:#222; margin:0; }
.container { max-width:900px; margin:20px auto; padding:0 15px; }
.topbar { background:#fff; border-bottom:1px solid #eaeaea; position:sticky; top:0; z-index:50; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; padding:8px 15px; }
.brand { font-weight:700; text-decoration:none; color:#111; font-size:20px }
nav a { margin-left:12px; text-decoration:none; color:#111 }
.main { padding:20px 0 }
.posts { display:flex; flex-direction:column; gap:20px }
.post { background:#fff; border:1px solid #eaeaea; padding:10px; }
.post-head { display:flex; gap:10px; align-items:center }
.post-meta { display:flex; flex-direction:column }
.avatar { width:44px; height:44px; border-radius:50%; object-fit:cover }
.avatar-large { width:120px; height:120px; border-radius:50%; object-fit:cover }
.post-media img, .post-media video { width:100%; max-height:600px; object-fit:cover }
.profile .cover { width:100%; height:180px; object-fit:cover; background:#ddd }
.profile-row { display:flex; gap:15px; align-items:center; margin-top:-50px }
.grid { display:grid; grid-template-columns: repeat(3,1fr); gap:6px }
.grid-item img { width:100%; height:120px; object-fit:cover }
footer.footer { margin-top:30px; text-align:center; padding:15px 0; color:#888 }
.error { background:#ffecec; color:#cc0000; padding:8px; border-radius:4px; margin-bottom:10px }
form label { display:block; margin-bottom:8px }
input[type=text], input[type=email], input[type=password], textarea { width:100%; padding:8px; border:1px solid #ddd; border-radius:4px }
button { background:#0073e6; color:#fff; padding:8px 12px; border:none; border-radius:4px }

/* Bottom nav like Instagram */
.bottom-nav { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid #e6e6e6; padding:6px 12px; border-radius:30px; box-shadow:0 6px 18px rgba(0,0,0,0.08); display:flex; gap:18px; z-index:60 }
.bottom-nav a { color:#111; text-decoration:none; font-size:18px }

/* Comments */
.comments { margin-top:12px }
.comment-item { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f0f0f0 }
.comment-item .avatar { width:36px; height:36px }
.comment-body { background:transparent }
.comment-text { display:block; margin-top:4px }
.comment-time { color:#888; font-size:12px }

/* Likes modal */
.likes-modal { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.4); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease }
.likes-modal.open { opacity:1; visibility:visible }
.likes-modal-inner { background:#fff; max-width:420px; width:90%; margin:60px auto; border-radius:8px; padding:12px; max-height:70vh; overflow:auto }
.likes-modal-close { float:left; border:none; background:transparent; font-size:22px }
.likes-item { display:flex; gap:10px; align-items:center; padding:8px 4px }
.likes-item .avatar { width:40px; height:40px }

/* Muted */
.muted { color:#888 }

/* Post modal */
.post-modal { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.6); opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:120 }
.post-modal.open { opacity:1; visibility:visible }
.post-modal-inner { max-width:1000px; width:95%; height:80vh; margin:5vh auto; background:#fff; display:flex; border-radius:8px; overflow:hidden }
.post-modal-left { flex:1; background:#000; display:flex; align-items:center; justify-content:center }
.post-modal-left .modal-media { max-width:100%; max-height:100%; object-fit:contain }
.post-modal-right { width:420px; padding:12px; overflow:auto }
.pm-header { display:flex; gap:10px; align-items:center; margin-bottom:10px }
.pm-caption { margin:10px 0; white-space:pre-wrap }
.pm-actions { margin-bottom:8px }
.pm-comment-form textarea { width:100%; height:60px; }
.pm-close { position:absolute; right:16px; top:12px; background:transparent; border:none; font-size:28px; color:#fff }