/* الرئيسية: كتابة منشور + المنشورات + التعليقات */
.composer { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.c-body { flex: 1; display: grid; gap: 10px; min-width: 0; }
.c-body textarea { border: 0; background: transparent; box-shadow: none; padding: 9px 0; font-size: 16px; }
.c-body textarea:focus { box-shadow: none; }
.composer .c-bar .btn.primary { margin-inline-start: auto; }
.c-prev { position: relative; max-width: 260px; }
.c-prev img { border-radius: var(--r-md); max-height: 220px; object-fit: cover; }
.c-prev .x { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; }

#posts { display: grid; gap: 16px; }
.post { overflow: hidden; transition: transform .2s; }
.post > header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.post .who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.post .who > span { display: grid; line-height: 1.35; }
.post .who small { color: var(--muted); font-size: 13px; display: flex; gap: 10px; }
.post .txt { margin: 0; padding: 4px 16px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }
.post .pimg { width: calc(100% - 20px); margin: 0 10px; border-radius: var(--r-md); max-height: 560px; object-fit: cover; box-shadow: 0 10px 24px -10px rgba(0,0,0,.8); }
.post > footer { display: flex; gap: 6px; padding: 10px 10px; }
.post > footer button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; }
.post > footer button:hover { background: var(--glass-2); color: var(--ink); }
.post > footer button.liked { color: var(--red-hi); text-shadow: 0 0 10px var(--red-glow); }
.post > footer button.liked svg { fill: currentColor; filter: drop-shadow(0 0 6px var(--red-glow)); }
.comments { border-top: 1px solid var(--edge); padding: 12px 16px 14px; display: grid; gap: 10px; }
.clist { display: grid; gap: 10px; }
.cm { display: flex; gap: 8px; align-items: flex-start; }
.cm div { background: rgba(0,0,0,.3); border: 1px solid var(--edge); border-radius: 16px; padding: 6px 12px; min-width: 0; }
.cm b { font-size: 13px; }
.cm p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cform { display: flex; gap: 8px; }
.cform input { border-radius: 999px; }

/* فيديو بالمنشورات */
.pvid { background: #000; max-height: 70dvh; object-fit: contain; }
.pvid-wait { margin: 0 10px; padding: 28px 16px; border-radius: var(--r-md); text-align: center; color: var(--muted); background: rgba(0,0,0,.35); border: 1px dashed var(--edge-hi); }
.c-prev video { border-radius: var(--r-md); max-height: 220px; width: 100%; background: #000; }
.cm { position: relative; }
.cm-flag { width: 28px; height: 28px; font-size: 12px; opacity: 0; margin-inline-start: auto; }
.cm:hover .cm-flag, .cm-flag:focus-visible { opacity: .7; }
@media (hover: none) { .cm-flag { opacity: .45; } }
.upbar { position: relative; height: 26px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.45); border: 1px solid var(--edge); direction: ltr; }
.upbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--red-deep), var(--red-hi)); transition: width .2s; }
.upbar span { position: relative; display: grid; place-items: center; height: 100%; font-size: 12px; font-weight: 700; }
.spin { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge-hi); border-top-color: var(--red-hi); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }