.mavi-story{direction:rtl;position:relative;width:100%} .mavi-story .mavi-story-list{width:100%} .mavi-story .stories.carousel{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .mavi-story .stories.carousel::-webkit-scrollbar{display:none} .mavi-story .stories.carousel .story{position:relative} .mavi-story.mavi-hide-titles .stories.carousel .story>.item-link>.info{display:none!important} .mavi-story-badge{position:absolute;top:-2px;inset-inline-start:4px;background:#fff;color:#111;font-size:10px;line-height:1;padding:4px 6px;border-radius:999px;z-index:4;box-shadow:0 1px 4px rgba(0,0,0,.18)} .mavi-story-empty{padding:12px;border:1px dashed #c3c4c7;border-radius:8px;background:#fff} /* Keep Zuck's own header/layout. Only make its native close control visible and symmetric. */ #zuck-modal-content .story-viewer .head .right .close{ display:block!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; line-height:38px!important; margin:4px 18px 0 0!important; padding:0!important; border:1px solid rgba(255,255,255,.72)!important; border-radius:50%!important; box-sizing:border-box!important; background:rgba(20,20,22,.30)!important; color:#fff!important; font-size:30px!important; font-weight:300!important; text-align:center!important; backdrop-filter:blur(12px) saturate(150%)!important; -webkit-backdrop-filter:blur(12px) saturate(150%)!important; box-shadow:0 4px 16px rgba(0,0,0,.18)!important; opacity:1!important; visibility:visible!important; } /* Native Zuck link button, iOS-like glass. */ #zuck-modal-content .story-viewer .tip.link{ border:1px solid rgba(255,255,255,.78)!important; border-radius:999px!important; background:rgba(255,255,255,.52)!important; color:#111!important; font-weight:700!important; padding:12px 24px!important; box-shadow:0 8px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.90)!important; backdrop-filter:blur(20px) saturate(180%)!important; -webkit-backdrop-filter:blur(20px) saturate(180%)!important; text-shadow:none!important; } @media(max-width:1024px){ #zuck-modal-content .story-viewer .head .right .close{ display:block!important; width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; line-height:36px!important; margin:4px 8px 0 0!important; font-size:28px!important; } } /* 1.4.1: visual-only alignment fixes; keep Zuck runtime untouched. */ @media (min-width:1025px){ #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right .close{ transform:translateX(28px)!important; } } @media (max-width:1024px){ /* In RTL Zuck floats the right header block to the left; pin the timer beside the preview instead. */ #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right{ float:none!important; position:static!important; } #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right .time{ display:block!important; position:absolute!important; top:15px!important; right:54px!important; left:auto!important; margin:0!important; line-height:30px!important; white-space:nowrap!important; text-align:right!important; } } /* Story Mavi 1.4.2 — mobile header positioning only */ @media (max-width: 767px) { /* Keep native Zuck close control on the LEFT on mobile */ #zuck-modal .close, #zuck-modal .story-viewer .close, #zuck-modal .viewer .close { left: 12px !important; right: auto !important; } /* Nudge story time slightly LEFT so it does not overlap the preview/avatar */ #zuck-modal .story-viewer .head .time, #zuck-modal .viewer .head .time, #zuck-modal .head .time { position: relative !important; right: auto !important; left: -10px !important; margin-left: 6px !important; margin-right: 4px !important; } } /* Story Mavi 1.4.3 — accurate native Zuck mobile header layout */ @media (max-width: 767px) { /* Avatar + its own timestamp stay together on the RIGHT */ #zuck-modal.rtl #zuck-modal-content .story-viewer .head .left { display: flex !important; flex-direction: row !important; align-items: center !important; position: absolute !important; top: 8px !important; right: 12px !important; left: auto !important; margin: 0 !important; line-height: 1 !important; float: none !important; z-index: 2 !important; } #zuck-modal.rtl #zuck-modal-content .story-viewer .head .left .item-preview { flex: 0 0 30px !important; width: 30px !important; height: 30px !important; margin: 0 0 0 8px !important; } /* Use the timestamp that belongs to the avatar/info block */ #zuck-modal.rtl #zuck-modal-content .story-viewer .head .left .info { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; line-height: 30px !important; } #zuck-modal.rtl #zuck-modal-content .story-viewer .head .left .info .time { display: block !important; position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 30px !important; white-space: nowrap !important; opacity: .85 !important; transform: translateX(-4px) !important; } /* The duplicate mobile timestamp from Zuck's right block is what overlapped the avatar */ #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right .time { display: none !important; } /* Put the whole close-controls block on the LEFT, independent of RTL floats */ #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right { display: block !important; position: absolute !important; top: 8px !important; left: 12px !important; right: auto !important; float: none !important; margin: 0 !important; z-index: 3 !important; } #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right .close { display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 0 3px 0 !important; line-height: 1 !important; border-radius: 50% !important; } #zuck-modal.rtl #zuck-modal-content .story-viewer .head .right .loading { display: none !important; } }