/* Core 25 — Full-bleed unified Arabic Snapchat-like experience. All public rules are scoped. */
.oubal-stories{direction:rtl;font-family:"Noto Sans Arabic",system-ui,sans-serif;--os-gold:#e5bb7b;--os-ink:#24170f;--os-cream:#f8eddd;color:#f9ebd6}
.oubal-stories *,.oubal-stories *::before,.oubal-stories *::after{box-sizing:border-box}
.oubal-stories [hidden]{display:none!important}
.oubal-stories .oubal-stories-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(275px,345px);align-items:center;gap:clamp(30px,6vw,92px);padding:clamp(26px,4vw,54px) clamp(26px,5vw,68px);background:radial-gradient(circle at 29% 18%,#493020 0%,transparent 42%),linear-gradient(123deg,#26180e,#160e09 85%);border:1px solid #7052348f;border-radius:28px;box-shadow:0 20px 70px #0003;min-height:490px}
.oubal-stories .oubal-stories-intro{grid-column:1;grid-row:1;text-align:right;display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-content:center;min-width:0}
.oubal-stories .oubal-stories-eyebrow{font-size:14px;font-weight:700;letter-spacing:.015em;color:#d3a970}
.oubal-stories .oubal-stories-name{font-family:"Noto Kufi Arabic","Noto Sans Arabic",system-ui,sans-serif!important;font-size:clamp(31px,3.6vw,53px)!important;line-height:1.5!important;font-weight:900!important;letter-spacing:-.025em;margin:0!important;color:#fff0d7!important}
.oubal-stories .oubal-stories-caption{font-size:clamp(14px,1.25vw,17px);color:#dec5a5;line-height:1.85;margin:0;max-width:460px}
.oubal-stories .oubal-stories-icons{display:flex;align-items:center;gap:clamp(20px,3vw,43px);margin-top:14px;color:var(--os-gold)}
.oubal-stories .oubal-stories-icons>span{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.oubal-stories .oubal-stories-icons svg{width:26px;height:26px;display:block}
.oubal-stories .oubal-stories-icons small{font-size:14px}
.oubal-stories .oubal-stories-entry{grid-column:2;grid-row:1;justify-self:center;width:min(100%,300px);min-width:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.oubal-stories .oubal-story-launch{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:9/16;background:linear-gradient(145deg,#58402a,#21150e 60%,#140b07);border:2px solid #a97a43;border-radius:23px;box-shadow:0 16px 42px #0009;overflow:hidden;padding:0;cursor:pointer;color:#fff;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.oubal-stories .oubal-story-launch:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 22px 50px #000a}
.oubal-stories .oubal-story-launch:disabled{cursor:default}
.oubal-stories .oubal-story-cover-image{position:absolute;inset:0;z-index:-1;overflow:hidden}
.oubal-stories .oubal-story-cover-image img,.oubal-stories .oubal-story-cover-image video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;pointer-events:none}
.oubal-stories .oubal-story-cover-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#090603ed 0%,#130b0655 47%,#160e052c 100%)}
.oubal-stories .oubal-story-watermark{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);opacity:.20;width:86%;height:54%;object-fit:contain;z-index:0;pointer-events:none}
.oubal-stories .oubal-story-cover-content{position:absolute;inset:auto 14px 18px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 2px 10px #000d}
.oubal-stories .oubal-story-cover-kicker{font-family:"Noto Kufi Arabic",system-ui,sans-serif;font-size:15px;font-weight:700;color:#e9c891}
.oubal-stories .oubal-story-cover-name{font-family:"Noto Kufi Arabic","Noto Sans Arabic",system-ui,sans-serif;font-weight:800;font-size:clamp(16px,1.55vw,20px);color:#fff8eb;line-height:1.58;max-height:6.4em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.oubal-stories .oubal-story-cover-icons{display:flex;align-items:center;justify-content:center;gap:22px;color:#e7bd80}.oubal-stories .oubal-story-cover-icons svg{width:23px;height:23px;display:block;stroke:currentColor}
.oubal-stories .oubal-story-cover-meta{display:flex;justify-content:center;align-items:center;gap:8px;text-align:center;font-size:15px;font-weight:800;color:#e9bd75;min-height:29px}
.oubal-stories .oubal-story-cover-meta-symbol{font-size:12px}
.oubal-stories.is-empty .oubal-story-cover-name{font-size:clamp(19px,2vw,23px)}
.oubal-stories button:focus-visible,.oubal-stories a:focus-visible,.oubal-stories .oubal-story-stage:focus-visible{outline:3px solid #f0c589;outline-offset:3px}
/* Viewer backdrop is full-screen, and the content covers the entire active story stage. */
.oubal-stories .oubal-story-overlay:not([hidden]){position:fixed;inset:0;z-index:2147483000;background:#080503f5;display:flex;align-items:center;justify-content:center;padding:0 10px;overscroll-behavior:contain}
.oubal-stories .oubal-story-screen{position:relative;display:block;width:min(100%,455px);height:min(100dvh,910px);background:#1a110b;color:white;border-radius:17px;overflow:hidden;box-shadow:0 0 75px #000a;touch-action:none}
.oubal-stories .oubal-story-progress{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;direction:rtl;gap:4px;padding:calc(12px + env(safe-area-inset-top,0px)) 12px 6px;min-height:18px}
.oubal-stories .oubal-story-progress .seg{flex:1;min-width:0;height:3px;border-radius:5px;background:#f5e8d05c;overflow:hidden;direction:rtl}
.oubal-stories .oubal-story-progress .fill{display:block;width:0;height:100%;background:#f9e2b9}
.oubal-stories .oubal-story-toolbar{position:absolute;top:calc(30px + env(safe-area-inset-top,0px));right:0;left:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 12px 3px;background:linear-gradient(to bottom,#09060388,transparent)}
.oubal-stories .oubal-story-brand{font-size:15px;color:#ffe5ba;font-weight:800}.oubal-stories .oubal-story-count{color:#dbc6a9;font-size:12px;font-weight:500;margin-inline-start:6px}
.oubal-stories .oubal-story-tools{display:flex;align-items:center;gap:7px}
.oubal-stories .oubal-story-audio{padding:7px 11px;border-radius:20px;border:1px solid #ccb4949a;background:#0009;color:#ffe7c0;font-size:12px;cursor:pointer}
.oubal-stories .oubal-story-close{border:0;background:transparent;color:#fff;font-size:29px;width:44px;height:44px;cursor:pointer}
.oubal-stories .oubal-story-stage{position:absolute;inset:0;min-height:0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden;outline-offset:-4px}
.oubal-stories .oubal-story-media{position:absolute;inset:0;display:block;overflow:hidden;background:linear-gradient(140deg,#48301e,#1a100a)}
.oubal-stories .oubal-story-media img,.oubal-stories .oubal-story-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;pointer-events:none}
.oubal-stories .oubal-story-media .oubal-story-empty-logo{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:72%;height:auto;max-height:55%;opacity:.18;object-fit:contain}
.oubal-stories .oubal-story-copy{position:absolute;inset:auto 0 0;padding:100px 21px max(38px,calc(22px + env(safe-area-inset-bottom,0px)));color:#fff;background:linear-gradient(to top,#080503fa 5%,#0c0805d8 33%,transparent);text-shadow:0 2px 5px #000b;pointer-events:none}
.oubal-stories .oubal-story-type{font-size:12px;color:#f2d09a;display:inline-block;margin-bottom:7px}
.oubal-stories .oubal-story-title{margin:0!important;font-family:"Noto Kufi Arabic","Noto Sans Arabic",system-ui,sans-serif;font-size:clamp(19px,2vw,24px)!important;line-height:1.5!important;overflow-wrap:anywhere;color:#fff;font-weight:800}
.oubal-stories .oubal-story-description{margin:9px 0 0;font-size:13px;color:#e9d8c1;line-height:1.6}
.oubal-stories .oubal-story-title:empty,.oubal-stories .oubal-story-description:empty{display:none}
.oubal-stories .oubal-story-attribution{margin-top:17px;color:#f2d5a9;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.oubal-stories .oubal-story-attribution a{pointer-events:auto;text-decoration:underline;text-underline-offset:3px;color:#f6d59b;min-height:44px;display:inline-flex;align-items:center;font-weight:750}
.oubal-stories .oubal-story-source-plain{color:#f6d59b;font-weight:800}
.oubal-stories .oubal-story-help{flex:none;min-height:31px;text-align:center;padding:7px 8px;color:#d4bfa1;font-size:11px;background:#180f0a}
.oubal-stories .oubal-story-ending:not([hidden]){position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;padding:35px;background:radial-gradient(circle at 54% 38%,#44301c,#16100b 74%);color:#f7ead6;text-align:center}
.oubal-stories .oubal-ending-logo{width:min(230px,74%);height:auto;max-height:170px;object-fit:contain}
.oubal-stories .oubal-story-ending h3{font-family:"Noto Kufi Arabic",system-ui,sans-serif;font-size:25px;margin:0;color:#f7ead6}.oubal-stories .oubal-story-ending p{margin:0 0 16px;color:#d1bda0;line-height:1.85;max-width:280px;font-size:14px}
.oubal-stories .oubal-story-replay,.oubal-stories .oubal-story-end-close{display:block;width:100%;max-width:290px;min-height:48px;border-radius:12px;cursor:pointer;font:inherit;font-weight:800;padding:12px 18px}
.oubal-stories .oubal-story-replay{background:#dfbc82;border:0;color:#24170f}.oubal-stories .oubal-story-end-close{border:1px solid #795d41;background:transparent;color:#f7ead6}
@media(max-width:760px){
  .oubal-stories .oubal-stories-layout{display:flex;flex-direction:column;gap:21px;align-items:stretch;padding:24px 14px 29px;border-radius:23px;min-height:0}
  .oubal-stories .oubal-stories-intro{align-items:flex-start;gap:9px;width:100%}
  .oubal-stories .oubal-stories-name{font-size:clamp(25px,6.3vw,33px)!important}
  .oubal-stories .oubal-stories-caption{font-size:13px}
  .oubal-stories .oubal-stories-icons{margin-top:7px;gap:18px}.oubal-stories .oubal-stories-icons>span{gap:6px}.oubal-stories .oubal-stories-icons svg{width:21px;height:21px}.oubal-stories .oubal-stories-icons small{font-size:12px}
  .oubal-stories .oubal-stories-entry{width:min(100%,365px);max-width:365px;align-self:center}
  .oubal-stories .oubal-story-launch{border-radius:21px}
  .oubal-stories .oubal-story-cover-name{font-size:17px}
  .oubal-stories .oubal-story-overlay:not([hidden]){padding:0}
  .oubal-stories .oubal-story-screen{width:100vw;height:100dvh;max-height:none;max-width:none;border-radius:0}
  .oubal-stories .oubal-story-progress{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .oubal-stories .oubal-story-copy{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){.oubal-stories .oubal-stories-layout{padding-inline:11px}.oubal-stories .oubal-stories-name{font-size:26px!important}.oubal-stories .oubal-stories-entry{max-width:100%}}
@media(prefers-reduced-motion:reduce){.oubal-stories .oubal-story-launch{transition:none}}

/* Core25: immersive full-viewport media and consistent empty-state pictograms. */
.oubal-stories .oubal-story-cover-icons span{display:inline-flex;align-items:center;justify-content:center}
.oubal-stories .oubal-story-stage{height:100%;-webkit-tap-highlight-color:transparent}
.oubal-stories .oubal-story-progress,.oubal-stories .oubal-story-toolbar{pointer-events:none}
.oubal-stories .oubal-story-tools button{pointer-events:auto}
.oubal-stories .oubal-story-media{background:radial-gradient(circle at center,#422919,#160e09 70%)}
.oubal-stories .oubal-story-media img,.oubal-stories .oubal-story-media video{display:block;object-fit:cover;object-position:center center}
@media(max-width:760px){.oubal-stories .oubal-story-overlay:not([hidden]){inset:0;padding:0}.oubal-stories .oubal-story-screen{width:100%;height:100dvh;max-height:none;max-width:none;border-radius:0}.oubal-stories .oubal-story-title{font-size:clamp(18px,5.6vw,24px)!important}}

/* RC16: show landscape/square motion without cropping, keep portrait immersive. */
.oubal-stories .oubal-story-media video.oubal-video-fit-contain{object-fit:contain;object-position:center center}
/* The newest-story COVER always fills its tall card, regardless of clip shape. */
.oubal-stories .oubal-story-cover-image img,.oubal-stories .oubal-story-cover-image video{object-fit:cover}


/* RC17: portrait edge bleed avoids one-pixel letterbox/compositor seams. */
.oubal-stories .oubal-story-media video:not(.oubal-video-fit-contain){
  top:-2px;left:-2px;right:-2px;bottom:-2px;
  width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover;
}
/* Wait honestly on the base color, without stretching a poster to full screen. */
.oubal-stories .oubal-story-stage.oubal-story-waiting .oubal-story-media video{opacity:0}
.oubal-stories .oubal-story-stage.oubal-story-playing .oubal-story-media video{opacity:1}
.oubal-stories .oubal-story-stage.oubal-story-waiting::after{
  content:"جار تجهيز الفيديو…";position:absolute;top:48%;left:50%;
  transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  padding:10px 16px;border-radius:22px;color:#f5e7d3;background:#110c08b8;
  font-size:13px;white-space:nowrap;text-shadow:0 1px 2px #000;
}
/* The existing story toolbar remains readable without a dark horizontal band. */
.oubal-stories .oubal-story-toolbar{background:transparent}
.oubal-stories .oubal-story-stage.oubal-story-user-paused::before{
  content:"▶";position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  z-index:4;pointer-events:none;border-radius:50%;width:62px;height:62px;
  display:flex;align-items:center;justify-content:center;padding-inline-start:3px;
  font-size:25px;color:#fff;background:#0008;box-shadow:0 3px 20px #0003;
}
.oubal-stories .oubal-story-stage.oubal-story-failed::after{
  content:"تعذر تشغيل الفيديو — اضغط بالمنتصف لإعادة المحاولة";
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  z-index:4;pointer-events:none;max-width:86%;text-align:center;
  font-size:13px;line-height:1.8;border-radius:14px;padding:11px 14px;
  background:#100b09db;color:#fff3dd;
}

/* RC18: a local upload should never be hidden behind the loading layer.
   Wait feedback is delayed until real buffering, while the first frame can draw. */
.oubal-stories .oubal-story-stage.oubal-story-local.oubal-story-waiting .oubal-story-media video{opacity:1}
.oubal-stories .oubal-story-stage.oubal-story-local-ready .oubal-story-media video{opacity:1}

/* RC19: administrator-only, query-opt-in support control. No public UI change. */
.oubal-stories .oubal-story-debug-copy{pointer-events:auto;background:#382717;border:1px solid #e6c38b;color:#ffe8bb;border-radius:13px;font-size:11px;padding:7px 9px;max-width:134px;white-space:nowrap}