/* ================================================================
   หน้ารีวิวแบบสตอรี่ (A) — แถววงกลมคนรีวิว + การ์ดรูปเต็มจอปัดทีละคน
   ================================================================ */
.rv-head{margin:2px 2px 14px}
.rv-head h2{font-size:25px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.3px}
.rv-head p{margin-top:4px;font-size:13px;color:#94a3b8}
.rvs-hdr-score{color:#facc15!important;background:rgba(250,204,21,.12)!important;border:1px solid rgba(250,204,21,.35)!important;font-weight:800!important}

/* ---------- แถวสตอรี่ ---------- */
.rvs-stories{display:flex;gap:14px;margin:0 -16px 16px;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.rvs-stories::-webkit-scrollbar{display:none}
.rvs-story{all:unset;flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;scroll-snap-align:start}
.rvs-story small{max-width:66px;font-size:11.5px;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvs-ring{display:block;width:64px;height:64px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#facc15,#f97316,#ef4444,#facc15)}
.rvs-ring.seen{background:#334155}
.rvs-ring.add{display:grid;place-items:center;padding:0;background:none;border:2px dashed #475569}
.rvs-ring.add b{font-size:28px;font-weight:300;color:#facc15;line-height:1}
.rvs-face{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid #070d12;
  background:#0369a1;color:#fff;font-weight:800;font-size:20px;box-sizing:border-box}
.rvs-face i,.rvs-av i{position:absolute;inset:0;background:center/cover no-repeat}
.rvs-story:focus-visible .rvs-ring{outline:2px solid #fff;outline-offset:2px}

/* ---------- การ์ดสตอรี่ (ปัดทีละใบ) ---------- */
.rvs-viewer{position:relative;margin:0 0 14px}
.rvs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:26px;overscroll-behavior-x:contain}
.rvs-track::-webkit-scrollbar{display:none}
.rvs-slide{position:relative;flex:0 0 100%;height:min(66vh,560px);min-height:420px;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;color:#fff;background:#0b1620}
.rvs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rvs-slide::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0,transparent 22%,transparent 42%,rgba(0,0,0,.88) 100%)}
/* รีวิวไม่มีรูป: พื้นไล่สี + ข้อความตัวโต */
.rvs-slide.text-only{background:radial-gradient(120% 80% at 20% 10%,#1e4d6b 0,#0b1d2b 55%,#081219 100%)}
.rvs-slide.text-only::after{background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 60%,rgba(0,0,0,.5))}
.rvs-slide.text-only .rvs-cap{top:96px;bottom:auto;right:70px}
.rvs-slide.text-only .rvs-text{font-size:24px;line-height:1.45;font-weight:800;-webkit-line-clamp:8}
.rvs-slide.text-only .rvs-text::before{content:'“';display:block;font-size:64px;line-height:.6;color:#facc15;margin-bottom:10px}

.rvs-bars{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;gap:4px}
.rvs-bars b{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3)}
.rvs-bars b.done,.rvs-bars b.on{background:#fff}
.rvs-counter{position:absolute;z-index:3;top:12px;right:14px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.4)}
.rvs-who{position:absolute;z-index:3;top:26px;left:14px;right:70px;display:flex;align-items:center;gap:8px;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.rvs-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvs-who small{flex:none;font-size:12.5px;color:#e2e8f0;font-weight:500}
.rvs-av{position:relative;flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#0ea5e9;color:#fff;font-weight:800;font-size:14px;border:2px solid #fff;text-shadow:none;box-sizing:border-box}

/* แตะซ้าย/ขวาของรูปเพื่อเปลี่ยนรีวิว (เหมือนสตอรี่) */
.rvs-nav{all:unset;position:absolute;z-index:2;top:70px;bottom:130px;width:28%;cursor:pointer}
.rvs-nav.prev{left:0}.rvs-nav.next{right:64px}

.rvs-cap{position:absolute;z-index:3;left:16px;right:70px;bottom:20px}
.rvs-stars{color:#facc15;font-size:16px;letter-spacing:1.5px}
.rvs-stars span{color:rgba(255,255,255,.28)}
.rvs-text{margin-top:6px;font-size:16.5px;line-height:1.5;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6);white-space:pre-line;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.rvs-text.open{-webkit-line-clamp:unset;display:block;max-height:46vh;overflow:auto}

.rvs-side{position:absolute;z-index:3;right:10px;bottom:22px;display:flex;flex-direction:column;gap:14px;align-items:center}
.rvs-side button{all:unset;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-size:12.5px;font-weight:800;min-width:44px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.rvs-side svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.rvs-side em{font-style:normal;font-size:26px;line-height:30px;filter:grayscale(.6) drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.rvs-side button.liked svg{fill:#ef4444;stroke:#ef4444}
.rvs-side button.funny em{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.rvs-side button:active{transform:scale(.88)}
.rvs-side button:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}

/* ---------- ใต้การ์ด: คะแนนเฉลี่ย ---------- */
.rvs-foot{margin:0 2px 100px}
.rvs-foot:empty{display:none}
.rvs-score{display:flex;align-items:baseline;gap:6px;margin-bottom:10px;color:#94a3b8;font-size:13px}
.rvs-score b{font-size:26px;font-weight:900;color:#facc15;line-height:1}
.rvs-score span{color:#facc15}
.rvx-dist{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rvx-dist div{display:flex;flex-direction:column;gap:5px}
.rvx-dist span{font-size:11px;color:#94a3b8;font-weight:700}
.rvx-dist em{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.rvx-dist em i{display:block;height:100%;background:#facc15;border-radius:4px}

/* ---------- ปุ่มเขียนรีวิว (ลอยมุมขวาล่าง) ---------- */
.rvx-fab{position:fixed;z-index:70;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:58px;height:58px;border:0;border-radius:19px;cursor:pointer;
  display:grid;place-items:center;background:#facc15;color:#1c1300;box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 4px rgba(250,204,21,.16)}
.rvx-fab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rvx-fab:active{transform:scale(.94)}
.rvx-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bk-body:has(#writeReviewBox[style*="display: block"]) .rvx-fab{display:none}

/* ---------- แผ่นคอมเมนต์ ---------- */
.rvs-sheet-bg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;animation:rvsFade .2s ease}
.rvs-sheet{width:100%;max-width:520px;max-height:72vh;display:flex;flex-direction:column;background:#0d1a24;border-radius:22px 22px 0 0;padding:6px 14px calc(env(safe-area-inset-bottom,0px) + 14px);
  border:1px solid rgba(255,255,255,.08);animation:rvsUp .25s ease;box-sizing:border-box}
.rvs-sheet::before{content:'';display:block;width:40px;height:4px;border-radius:4px;background:#334155;margin:4px auto 8px}
.rvs-sheet-hd{display:flex;align-items:center;justify-content:space-between;padding:0 2px 10px;color:#fff;font-size:15px}
.rvs-sheet-hd button{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.06);color:#94a3b8}
.rvs-sheet .review-comments-box{display:flex!important;flex-direction:column;min-height:0;flex:1;margin:0!important;padding:0!important;border:0!important;background:none!important}
.rvs-sheet-list{overflow:auto;flex:1;min-height:60px;padding-bottom:6px}
.rvs-sheet-empty{text-align:center;color:#64748b;font-size:13px;padding:18px 0}
.review-comment-avatar{position:relative}
@keyframes rvsUp{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
@keyframes rvsFade{from{opacity:0}to{opacity:1}}

/* ---------- หน้าคอม: คอลัมน์กลางแคบๆ เหมือนแอปสตอรี่ ---------- */
@media(min-width:900px){
  #reviewPage .bk-body{display:block!important;max-width:520px!important;margin:0 auto!important}
  #reviewPage #reviewList{display:block!important;grid-column:auto!important}
  #reviewPage #reviewSummary,#reviewPage #reviewSummary>*{max-width:none!important;background:none!important;border:0!important;backdrop-filter:none!important}
  #reviewPage .rvs-slide{height:600px}
  .rvx-fab{right:calc(50% - 300px)}
  .rvs-sheet{border-radius:22px;margin-bottom:24px}
  .rvs-sheet-bg{align-items:center}
}
@media (prefers-reduced-motion:reduce){.rvs-sheet,.rvs-sheet-bg{animation:none}}
.rvx-fab{transition:opacity .2s,transform .2s}
.rvx-fab.hide{opacity:0;transform:scale(.6);pointer-events:none}
#reviewPage .bk-body #reviewSummary>.rvs-stories{background:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#reviewPage .bk-hdr .chip.rvs-hdr-score{color:#facc15!important;background:rgba(250,204,21,.12)!important;border:1px solid rgba(250,204,21,.35)!important}