/* Talaieh Story Viewer v4: isolated styles avoid interference from portal/global utility CSS. */
.t-story-v4-page { margin:0; background:#090b14; color:#fff; overflow:hidden; }
.t-story-v4-page .skip-link { z-index:90; }
.t-story-v4, .t-story-v4 * { box-sizing:border-box; }
.t-story-v4 { display:grid; place-items:center; position:relative; width:100%; min-height:100vh; min-height:100dvh; background:radial-gradient(ellipse at 35% 20%,#252034 0%,#0a0c16 65%); isolation:isolate; font-family:inherit; }
.t-story-v4-frame { width:min(100%,450px); height:100vh; height:100dvh; max-height:100dvh; position:relative; overflow:hidden; background:#171825; color:#fff; isolation:isolate; box-shadow:0 18px 80px #0008; }
.t-story-v4-stage { position:absolute; inset:0; overflow:hidden; touch-action:none; }
.t-story-v4-media { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; user-select:none; -webkit-user-drag:none; }
.t-story-v4-placeholder { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:12px; color:#e4e5ee; background:linear-gradient(145deg,#2e2540,#101522); }
.t-story-v4-shading { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,6,13,.83) 0%,rgba(7,6,17,.34) 20%,transparent 39%,transparent 58%,rgba(8,9,17,.43) 74%,rgba(7,8,15,.95) 100%); }
.t-story-v4-zone { position:absolute; top:19%; bottom:25%; width:31%; display:block; z-index:2; outline-offset:-4px; }
.t-story-v4-zone-previous { right:0; }
.t-story-v4-zone-next { left:0; }
.t-story-v4-zone:focus-visible { outline:3px solid #fcd34d; border-radius:12px; }
.t-story-v4-head { position:absolute; z-index:8; inset-inline:0; top:0; display:grid; gap:11px; padding:calc(env(safe-area-inset-top,0px) + 12px) 13px 8px; pointer-events:none; }
.t-story-v4-head > * { pointer-events:auto; }
.t-story-v4-progress { display:flex; flex-direction:row; gap:4px; width:100%; min-width:0; height:3px; }
.t-story-v4-progress-track { display:block; flex:1 1 0; min-width:0; overflow:hidden; border-radius:10px; background:#ffffff69; }
.t-story-v4-progress-bar { display:block; height:100%; width:0%; border-radius:inherit; background:#fff; transition:width .07s linear; }
.t-story-v4-headline { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.t-story-v4-author { display:flex; flex:1; align-items:center; gap:9px; min-width:0; color:#fff; text-decoration:none; }
.t-story-v4-avatar { display:grid; width:43px; height:43px; flex:none; place-items:center; border:2px solid #ffd978; box-shadow:0 2px 16px #0006; border-radius:50%; overflow:hidden; background:#26253a; color:#ffe0a0; }
.t-story-v4-avatar img { width:100%; height:100%; object-fit:cover; }
.t-story-v4-author-details { display:grid; gap:2px; min-width:0; }
.t-story-v4-author-details strong { font-size:13px; line-height:1.4; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-story-v4-author-details small { font-size:11px; color:#e4e4ee; }
.t-story-v4-controls { display:flex; align-items:center; gap:2px; }
.t-story-v4-control { display:grid; place-items:center; border:1px solid #ffffff30; width:42px; height:42px; padding:0; border-radius:50%; background:#1215259c; color:#fff; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.t-story-v4-control [hidden] { display:none!important; }
.t-story-v4-control:focus-visible, .t-story-v4-author:focus-visible, .t-story-v4-cta:focus-visible { outline:3px solid #fcd34d; outline-offset:2px; }
.t-story-v4-foot { position:absolute; z-index:7; right:0; left:0; bottom:0; display:grid; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); pointer-events:none; }
.t-story-v4-foot > * { pointer-events:auto; }
.t-story-v4-caption { margin:0; padding:10px 12px; max-height:min(26dvh,170px); overflow:auto; overscroll-behavior:contain; border:1px solid #ffffff1c; border-radius:14px; background:#101321b5; backdrop-filter:blur(8px); font-size:13px; line-height:1.9; overflow-wrap:anywhere; white-space:pre-wrap; }
.t-story-v4-bottom-row { display:flex; align-items:center; gap:9px; justify-content:space-between; }
.t-story-v4-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; max-width:70%; padding:10px 15px; border-radius:12px; background:linear-gradient(135deg,#ffd476,#ffae32); color:#2a1807; text-decoration:none; font-weight:850; font-size:13px; box-shadow:0 5px 20px #0005; }
.t-story-v4-views { font-size:11px; color:#f5f1e7; white-space:nowrap; font-variant-numeric:tabular-nums; }
.t-story-v4-extras { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.t-story-v4-note { font-size:10px; color:#dddde5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.t-story-v4-extras .t-btn, .t-story-v4-extras button { min-height:36px; border-radius:12px; background:#161b31cb; border:1px solid #ffffff4b; color:#fff; font-size:11px; padding:6px 11px; }
.t-story-v4-page dialog { color:#222; }
@media(min-width:600px){.t-story-v4 { padding:16px; }.t-story-v4-frame { height:calc(100dvh - 32px); max-height:900px; border-radius:20px; border:1px solid #ffffff26; }.t-story-v4-head { padding-top:15px; }.t-story-v4-foot { padding-bottom:18px; }}
@media(max-width:360px){.t-story-v4-head { padding-left:9px; padding-right:9px; }.t-story-v4-foot { padding-left:10px; padding-right:10px; }.t-story-v4-author-details strong { font-size:12px; }.t-story-v4-cta { font-size:12px; padding-inline:10px; }.t-story-v4-note { display:none; }}
@media(prefers-reduced-motion:reduce){.t-story-v4-progress-bar { transition:none; }.t-story-v4-cta { box-shadow:none; }}

/* Stage C: short-height phones, image loading and modal interactions. */
.t-story-v4-stage[data-story-stage]{background:#10121c}
.t-story-v4-media{content-visibility:auto}
.t-story-v4-control:active,.t-story-v4-cta:active{transform:scale(.97)}
@media(max-height:620px){
 .t-story-v4-head{gap:6px;padding-top:calc(env(safe-area-inset-top,0px) + 7px)}
 .t-story-v4-avatar{width:36px;height:36px}
 .t-story-v4-control{width:38px;height:38px}
 .t-story-v4-foot{gap:6px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 .t-story-v4-caption{max-height:18dvh;padding:7px 9px;line-height:1.65}
 .t-story-v4-cta{min-height:39px;padding:7px 11px}
}
@media(max-height:470px){
 .t-story-v4-extras{gap:4px}.t-story-v4-note{display:none}
 .t-story-v4-caption{max-height:13dvh}
}
@media(prefers-reduced-motion:reduce){.t-story-v4-control:active,.t-story-v4-cta:active{transform:none}}

/* Story experience v5, October 2026: immersive frame, business identity, safe touch targets.
   Scoped exclusively to the story viewer to avoid touching seller/admin layouts. */
.t-story-v4-page { background:#080a11; overscroll-behavior:none; }
.t-story-v4 { background:radial-gradient(ellipse at 52% 18%,#262238 0%,#111522 44%,#07090f 100%); }
.t-story-v4-frame { border:1px solid rgba(255,255,255,.12); background:#10121d; }
.t-story-v4-stage { background:#11121b; }
.t-story-v5-ambient { position:absolute; inset:-24px; overflow:hidden; opacity:.50; pointer-events:none; transform:translateZ(0); }
.t-story-v5-ambient img { width:100%; height:100%; object-fit:cover; filter:blur(36px) brightness(.48) saturate(1.4); transform:scale(1.16); }
.t-story-v4-media { object-fit:contain; filter:drop-shadow(0 0 35px rgba(0,0,0,.27)); z-index:1; }
.t-story-v4-shading { z-index:2; background:linear-gradient(180deg,rgba(3,5,12,.95) 0%,rgba(3,5,12,.53) 14%,transparent 34%,transparent 53%,rgba(3,5,12,.48) 75%,rgba(3,5,12,.97) 100%); }
.t-story-v4-head { z-index:9; gap:12px; padding-inline:clamp(12px,3vw,21px); }
.t-story-v4-progress { gap:5px; height:4px; }
.t-story-v4-progress-track { background:rgba(255,255,255,.32); box-shadow:0 1px 2px rgba(0,0,0,.25); }
.t-story-v4-progress-bar { background:linear-gradient(90deg,#f9b833,#fff9ea); box-shadow:0 0 10px rgba(255,198,87,.55); }
.t-story-v4-author { align-items:center; }
.t-story-v4-avatar { width:47px; height:47px; border:2px solid #f1c878; background:linear-gradient(135deg,#392522,#17172c); box-shadow:0 0 0 3px #0006,0 3px 20px #0009; }
.t-story-v4-author-details strong { font-size:clamp(13px,2.8vw,15px); text-shadow:0 1px 10px rgba(0,0,0,.7); }
.t-story-v4-author-details small { font-size:11px; opacity:.92; }
.t-story-v5-business-label { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:5px; padding:3px 8px; margin-top:2px; border:1px solid #efcb8055; border-radius:20px; background:#f7ce8540; color:#fff0c9; font-size:10px; line-height:1.4; font-weight:700; }
.t-story-v4-control { width:44px; height:44px; border-color:rgba(255,255,255,.28); background:rgba(20,21,35,.66); backdrop-filter:blur(12px); transition:background .18s ease,transform .18s ease; }
.t-story-v4-control:hover { background:#ffffff36; }
.t-story-v4-foot { z-index:9; gap:12px; padding-inline:clamp(12px,3vw,20px); }
.t-story-v4-caption { border-color:rgba(255,255,255,.22); border-radius:17px; background:rgba(9,12,22,.56); backdrop-filter:blur(14px); font-size:clamp(13px,2.8vw,15px); line-height:1.85; color:#f8f8fc; box-shadow:0 6px 22px #0003; }
.t-story-v4-cta { min-height:48px; border-radius:15px; background:linear-gradient(125deg,#fff0b7,#f9c76e 45%,#f0a634); color:#342109; box-shadow:0 6px 22px #0008,inset 0 1px 0 #ffffff85; transition:transform .18s ease,box-shadow .18s ease; }
.t-story-v4-cta:hover { transform:translateY(-2px); box-shadow:0 12px 26px #0009; }
.t-story-v4-views { padding:5px 8px; border-radius:18px; background:#06091465; color:#fff; font-size:12px; }
.t-story-v4-note { font-size:11px; color:#ebeffa; }
.t-story-v4-extras .t-btn,.t-story-v4-extras button { min-height:40px; padding-inline:12px; backdrop-filter:blur(8px); }
.t-story-v5-navigation { position:absolute; inset-inline:0; top:48%; transform:translateY(-50%); z-index:8; display:flex; justify-content:space-between; padding:0 9px; pointer-events:none; }
.t-story-v5-navigation-button { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; border:1px solid #ffffff5c; background:rgba(14,16,31,.62); box-shadow:0 5px 15px #0008; text-decoration:none; backdrop-filter:blur(10px); pointer-events:auto; transition:transform .16s ease,background .16s ease; }
.t-story-v5-navigation-button:hover { background:#ffffff40; transform:scale(1.07); }
.t-story-v5-navigation-button:focus-visible { outline:3px solid #ffdf8b; outline-offset:3px; }
.t-story-v4-zone { z-index:3; }
/* Native dialogs live in the top layer; isolate typography and hit targets from black story backgrounds. */
.t-story-v4-page dialog[open] { z-index:100; color:#171b27; max-height:calc(100dvh - 32px); overflow:auto; }
.t-story-v4-page dialog::backdrop { background:rgba(0,0,0,.77); backdrop-filter:blur(5px); }
@media (min-width:600px) {
  .t-story-v4-frame { width:min(450px,calc(100vw - 40px)); max-height:920px; border-radius:24px; border-color:#fff3; }
  .t-story-v4 { padding:20px; }
  .t-story-v4-frame::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px #ffffff0e; z-index:10; }
}
@media(max-width:430px){
  .t-story-v4-frame { border:0; }
  .t-story-v4-control { width:42px; height:42px; }
  .t-story-v4-head { padding-top:calc(env(safe-area-inset-top,0px) + 13px); }
  .t-story-v4-foot { padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
  .t-story-v5-navigation { padding:0 6px; }
  .t-story-v5-navigation-button { width:34px; height:34px; opacity:.9; }
}
@media(max-height:650px) {
  .t-story-v4-head { gap:6px; }
  .t-story-v4-avatar { width:36px; height:36px; }
  .t-story-v4-foot { gap:7px; }
  .t-story-v4-caption { max-height:14dvh; line-height:1.6; padding:7px 10px; }
  .t-story-v4-cta { min-height:39px; padding:6px 10px; }
  .t-story-v4-extras .t-btn,.t-story-v4-extras button { min-height:34px; }
  .t-story-v5-business-label { display:none; }
}
@media(max-height:470px) {
  .t-story-v4-views { display:none; }
  .t-story-v4-foot { padding-bottom:calc(5px + env(safe-area-inset-bottom,0px)); }
  .t-story-v4-caption { max-height:12dvh; }
}
@media(prefers-reduced-motion:reduce){
  .t-story-v4-control,.t-story-v4-cta,.t-story-v5-navigation-button { transition:none; }
}