/* Upper Room piece 5c-2: post page, replies, sheets, quotes and reposts. */
.act.repost.on{color:#00BA7C}
.pv,.qv,.qz{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;display:flex;flex-direction:column;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .38s var(--ease);will-change:transform}
.pv,.qv{box-shadow:-10px 0 30px rgba(0,0,0,.55)}
.qz{transform:translateY(100%)}
.pv.on,.qv.on,.qz.on{transform:none}

/* header: frosted glass over the scrolling thread */
.pv-hd{position:absolute;top:0;left:0;right:0;z-index:3;display:grid;grid-template-columns:56px 1fr 16px;align-items:center;
  height:calc(53px + var(--top));padding-top:var(--top);background:rgba(0,0,0,.72);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.qv .pv-hd{position:relative;border-bottom:0}
.pv-hd h2{margin:0;font-size:19px;font-weight:800}
.pv-bk{width:40px;height:40px;margin-left:8px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.pv-bk:active{background:rgba(231,233,234,.12)}
.pv-bk svg{width:22px;height:22px}
.pv-sc{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:calc(53px + var(--top))}
.pv-in{max-width:600px;margin:0 auto;min-height:100%}
@media (min-width:640px){.pv-in{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.pv-main .post{border-bottom:0}
.pv-end{height:30vh}

/* View quotes and the Relevant control */
.pv-bar{display:flex;flex-direction:column;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pv-q{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:15px;font-weight:700;border-bottom:1px solid var(--line);transition:background .2s}
.pv-q:active{background:rgba(231,233,234,.05)}
.pv-qn{display:flex;align-items:center;gap:4px;color:var(--dim);font-weight:400}
.pv-qn svg{width:18px;height:18px}
.pv-sort{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:10px 12px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line);font-size:15px;font-weight:700;transition:background .2s}
.pv-sort:active{background:rgba(231,233,234,.08)}
.pv-sort svg{width:18px;height:18px}
.pv-sort svg:last-child{width:15px;height:15px;color:var(--dim)}

/* new replies pill */
.pv-new{position:absolute;z-index:4;top:calc(var(--top) + 64px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;box-shadow:0 6px 20px rgba(29,155,240,.35);animation:urdrop .4s var(--ease)}
.pv-new[hidden]{display:none}
.pv-new svg{width:16px;height:16px}
@keyframes urdrop{from{opacity:0;transform:translate(-50%,-12px)}}

/* replies */
.rp{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px 16px 4px;border-bottom:1px solid var(--line)}
.rav{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--line)}
.rp-m{min-width:0}
.rp .meta,.qc-hd{display:flex;align-items:center;gap:4px;min-width:0;font-size:15px;line-height:20px;white-space:nowrap}
.rp .name,.qc .name{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.rp .handle,.qc .handle{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rp .handle,.qc .handle,.rp .dot,.qc .dot,.rp time,.qc time,.rp .edited{color:var(--dim)}
.rp .badge,.qc .badge,.ur .badge{width:16px;height:16px;flex:none}
.rp-op{margin-left:4px;padding:1px 7px;border-radius:99px;font-size:12px;font-weight:700;color:var(--gold);background:rgba(212,172,94,.12);border:1px solid rgba(212,172,94,.35)}
.rp.op>.rav{box-shadow:0 0 0 2px #000,0 0 0 3.5px rgba(212,172,94,.7)}
.rp-more{margin-left:auto;margin-right:-6px;width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--dim)}
.rp-more .i{width:18px;height:18px}
.rp-b{position:relative;margin-top:2px;font-size:16px;line-height:22px;font-weight:400;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.rp-b.long{max-height:176px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.rp-full,.rp-kids{display:block;margin:4px 0;color:var(--blue);font-size:15px;font-weight:700}
.vref{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(212,172,94,.45);text-underline-offset:3px}
.men{color:var(--blue)}
.rp-acts{display:flex;gap:28px;margin:4px 0 4px -8px}
.rp-acts button{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px;border-radius:99px;color:var(--dim);font-size:13px;transition:color .2s,background .2s}
.rp-acts .i{width:18px;height:18px}
.rp-acts em{font-style:normal}
.rp-amen.on{color:var(--gold)}
.rp-amen.on .i{animation:urpop .35s var(--ease)}
@keyframes urpop{50%{transform:scale(1.3)}}
.rp.gone{grid-template-columns:1fr}
.rp-rm{margin:4px 0;color:var(--dim);font-size:15px;font-style:italic}
.rp.new{animation:urglow 2.4s var(--ease)}
@keyframes urglow{0%,30%{background:rgba(212,172,94,.10)}100%{background:transparent}}
/* replies under a reply, with a thread line from the parent avatar */
.rp-sub .rp{grid-template-columns:32px minmax(0,1fr);padding:8px 0 0;border-bottom:0}
.rp-sub .rav{width:32px;height:32px}
.rp:has(>.rp-m>.rp-sub>.rp)::before{content:"";position:absolute;left:35px;top:58px;bottom:18px;width:2px;border-radius:2px;background:var(--line)}
/* double-tap Amen */
.burst{position:absolute;width:0;height:0;pointer-events:none}
.burst .i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;color:var(--gold);fill:rgba(212,172,94,.25);animation:urburst .9s var(--ease) forwards}
@keyframes urburst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-34px)}}
/* loading placeholders */
.rp.sk .rav{background:var(--sheet)}
.rp.sk b{display:block;height:12px;margin:6px 0 10px;border-radius:6px;background:linear-gradient(90deg,#16181C 25%,#25282C 50%,#16181C 75%);background-size:300% 100%;animation:ursh 1.3s linear infinite}
.rp.sk b:nth-child(1){width:40%}.rp.sk b:nth-child(2){width:90%}.rp.sk b:nth-child(3){width:65%}
@keyframes ursh{from{background-position:100% 0}to{background-position:0 0}}
.pv-spin{width:26px;height:26px;margin:28px auto;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--blue);animation:urspin .8s linear infinite}
.pv-spin.rp{width:auto;height:auto;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;animation:none}
@keyframes urspin{to{transform:rotate(360deg)}}
.pv-empty{padding:40px 32px;text-align:center;color:var(--dim);font-size:15px;line-height:21px}
.pv-empty b{display:block;margin-bottom:6px;color:var(--tx);font-size:20px}
.pv-moreb{display:block;width:100%;padding:16px;color:var(--blue);font-size:15px;text-align:left}

/* reply box */
.pv-cz{flex:none;padding:8px 12px calc(8px + var(--bot));border-top:1px solid var(--line);background:#000}
.pv-cz[hidden]{display:none}
.pv-cz>*{max-width:576px;margin-left:auto;margin-right:auto}
.pv-to{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;color:var(--dim);font-size:14px}
.pv-to[hidden]{display:none}
.pv-to b{color:var(--blue);font-weight:400}
.pv-to button{font-size:14px;font-weight:700}
.pv-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 2px 8px}
.pv-chips::-webkit-scrollbar{display:none}
.pv-cz.typing .pv-chips{display:none}
.pv-chips button{flex:none;padding:6px 12px;border-radius:99px;border:1px solid var(--line);font-size:14px;transition:background .2s,border-color .2s}
.pv-chips button:active{background:rgba(212,172,94,.12);border-color:rgba(212,172,94,.5)}
.pv-row{display:flex;align-items:flex-end;gap:8px}
.pv-row textarea{flex:1;min-width:0;max-height:140px;resize:none;outline:none;border:1px solid var(--line);border-radius:20px;background:var(--sheet);color:var(--tx);
  padding:8px 14px;font:inherit;font-size:16px;line-height:21px;transition:border-color .2s}
.pv-row textarea:focus{border-color:var(--blue)}
.pv-row textarea::placeholder{color:var(--dim)}
.pv-go{flex:none;height:38px;padding:0 16px;border-radius:99px;background:var(--tx);color:#000;font-size:15px;font-weight:700;transition:opacity .2s}
.pv-go:disabled{opacity:.45}
.pv-go.busy{opacity:.6;pointer-events:none}
.pv-ring{position:relative;flex:none;width:0;height:38px;display:grid;place-items:center;opacity:0;transition:opacity .2s,width .2s}
.pv-ring.on{width:26px;opacity:1}
.pv-ring svg{width:22px;height:22px;transform:rotate(-90deg)}
.pv-ring circle{fill:none;stroke:var(--line);stroke-width:2.5}
.pv-ring .f{stroke:var(--blue);stroke-dasharray:56.55;stroke-linecap:round;transition:stroke-dashoffset .15s}
.pv-ring.warn .f{stroke:#FFD400}
.pv-ring em{position:absolute;font-style:normal;font-size:11px;color:var(--dim)}

/* bottom sheets */
.ts-scrim{position:fixed;inset:0;background:rgba(91,112,131,.4);opacity:0;transition:opacity .3s}
.ts-scrim.on{opacity:1}
.ts-sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;max-height:86vh;margin:0 auto;overflow-y:auto;background:#000;border-top:1px solid var(--line);
  border-radius:24px 24px 0 0;padding-bottom:calc(12px + var(--bot));box-shadow:0 -8px 40px rgba(0,0,0,.6);transform:translateY(105%);transition:transform .42s var(--ease)}
.ts-sheet.on{transform:none}
.ts-grab{display:flex;justify-content:center;padding:10px 0 6px;touch-action:none;cursor:grab}
.ts-grab i{width:36px;height:4px;border-radius:4px;background:#5B6166}
.ts-h{margin:4px 20px 8px;font-size:20px;font-weight:800}
.ts-menu{display:flex;flex-direction:column;padding:4px 8px}
.ts-o,.ts-mi{display:grid;align-items:center;gap:14px;width:100%;padding:12px;border-radius:14px;text-align:left;transition:background .15s}
.ts-o:active,.ts-mi:active{background:rgba(231,233,234,.06)}
.ts-o{grid-template-columns:28px 1fr 24px}
.ts-i svg{width:24px;height:24px}
.ts-t b{display:block;font-size:17px}
.ts-t small,.ts-mi small{display:block;margin-top:2px;font-size:14px;line-height:18px;font-weight:400;color:var(--dim)}
.ts-c{color:var(--blue);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease)}
.ts-c svg{width:22px;height:22px}
.ts-o[aria-checked="true"] .ts-c{opacity:1;transform:none}
.ts-mi{grid-template-columns:24px 1fr;font-size:17px;font-weight:700}
.ts-mi>svg{width:22px;height:22px}
.ts-mi.np{grid-template-columns:1fr;font-weight:400}
.ts-mi.bad{color:#F4212E}
.ts-cancel{display:block;width:calc(100% - 32px);height:48px;margin:8px 16px 0;border-radius:99px;border:1px solid var(--line);font-size:17px;font-weight:700}

/* quote cards */
.qc{display:block;margin:10px 0 4px;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:background .2s}
.qc:active{background:rgba(231,233,234,.03)}
.qc-hd{padding:10px 12px 0}
.qc-hd:last-child{padding-bottom:10px}
.qc-av{width:20px;height:20px;flex:none;margin-right:2px;border-radius:50%;object-fit:cover}
.qc-b{padding:2px 12px 10px;font-size:15px;line-height:20px;font-weight:400;white-space:pre-wrap;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.qc-hd+.qc-m{margin-top:8px}
.qc-m{position:relative;border-top:1px solid var(--line)}
.qc-m img{display:block;width:100%;max-height:240px;object-fit:cover}
.qc-m span{position:absolute;left:8px;bottom:8px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.72);font-size:13px;font-weight:700}
.qc.gone{padding:14px;color:var(--dim);font-size:15px;background:var(--sheet);cursor:default}

/* quote composer */
.qz-hd{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(53px + var(--top));padding:var(--top) 16px 0;border-bottom:1px solid var(--line)}
.qz-hd [data-x]{font-size:16px}
.qz-go{height:34px;padding:0 18px;border-radius:99px;background:var(--blue);color:#fff;font-size:15px;font-weight:700;transition:opacity .2s}
.qz-go:disabled{opacity:.5}
.qz-bd{flex:1;width:100%;max-width:600px;margin:0 auto;padding:14px 16px;overflow-y:auto}
.qz-me{display:grid;grid-template-columns:40px 1fr;gap:12px}
.qz-me textarea{min-height:90px;padding:8px 0;resize:none;outline:none;border:0;background:none;color:var(--tx);font:inherit;font-size:19px;line-height:25px}
.qz-me textarea::placeholder{color:var(--dim)}
.qz-n{min-height:18px;margin:0 0 0 52px;font-size:13px;color:var(--dim)}
.qz-n.over{color:#F4212E}
.qz-bd .qc{margin-left:52px;cursor:default}
.qz-tags{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 16px calc(10px + var(--bot));border-top:1px solid var(--line)}
.qz-tags::-webkit-scrollbar{display:none}
.qz-tags button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);color:var(--dim);font-size:14px;transition:all .2s}
.qz-tags .i{width:16px;height:16px}
.qz-tags [aria-pressed="true"]{color:#000;background:var(--gold);border-color:var(--gold);font-weight:700}

/* View quotes: Quotes and Reposts */
.qv-tabs{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:600px;margin:0 auto;border-bottom:1px solid var(--line)}
.qv-tabs button{height:53px;font-size:16px;font-weight:700;color:var(--dim);transition:color .25s}
.qv-tabs [aria-selected="true"]{color:var(--tx)}
.qv-tabs small{margin-left:2px;font-size:14px;font-weight:400;color:var(--dim)}
.qv-ink{position:absolute;left:0;bottom:-1px;width:0;height:4px;border-radius:4px;background:#fff}
.qv-ink.ready{transition:transform .42s var(--ease),width .3s var(--ease)}
.qv-vp{flex:1;width:100%;max-width:600px;margin:0 auto;overflow:hidden}
.qv-tr{display:flex;width:200%;height:100%;transition:transform .42s var(--ease)}
.qv-pane{width:50%;height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--bot)}
.qv-card{padding:4px 16px;border-bottom:1px solid var(--line)}
.ur{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px}
.ur-m{min-width:0}
.ur-m b{display:flex;align-items:center;gap:4px;font-size:16px;white-space:nowrap}
.ur-m span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:15px}
.fbtn{height:34px;padding:0 16px;border-radius:99px;background:var(--tx);color:#000;font-size:15px;font-weight:700;transition:all .2s}
.fbtn.on{background:transparent;color:var(--tx);border:1px solid #536471}

@media (prefers-reduced-motion:reduce){.pv,.qv,.qz,.ts-sheet,.ts-scrim,.qv-tr,.qv-ink.ready{transition:none}
  .rp.new,.burst .i,.rp.sk b,.pv-new,.rp-amen.on .i{animation:none}}

/* ---- piece 5c-3: X-style detail row ---- */
.pv-time{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:14px 0 4px;color:var(--dim);font-size:15px;line-height:20px}
.pv-time b{color:var(--tx);font-weight:700}
.pv-acts .act.views{display:none}
.pv-bar{flex-direction:row;align-items:center;justify-content:space-between;min-height:52px;padding:2px 4px;border-top:0}
.pv-bar .pv-sort,.pv-bar .pv-q{display:inline-flex;align-items:center;gap:4px;margin:0;padding:10px 12px;border:0;border-radius:99px;background:none;
  color:var(--dim);font-size:17px;font-weight:700;letter-spacing:-.1px;transition:color .2s,background .2s}
.pv-bar .pv-sort:active,.pv-bar .pv-q:active{color:var(--tx);background:rgba(231,233,234,.06)}
.pv-bar svg,.pv-bar .pv-sort svg:last-child{width:19px;height:19px;color:currentColor}

/* ---- Reddit-style threads ---- */
.rp{--av:40px;--pl:16px;--pt:12px}
.rp-sub .rp{--av:28px;--pl:0px;--pt:10px;grid-template-columns:var(--av) minmax(0,1fr);padding:var(--pt) 0 0}
.rp-sub .rav{width:28px;height:28px}
.rp:has(>.rp-m>.rp-sub>.rp)::before{content:none}
.rp-line{position:absolute;z-index:1;left:calc(var(--pl) + var(--av) / 2 - 12px);top:calc(var(--pt) + var(--av) + 4px);bottom:6px;width:24px;padding:0;border-radius:12px;display:none}
.rp-line::after{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line);transition:background .2s}
.rp-line:active::after{background:var(--dim)}
@media (hover:hover){.rp-line:hover::after{background:var(--dim)}}
.rp:has(>.rp-m>.rp-sub>.rp)>.rp-line{display:block}
.rp:has(>.rp-m>.rp-sub.flat>.rp)>.rp-line,.rp.folded>.rp-line{display:none}
.rp.folded>.rp-m>.rp-sub{display:none}
.rp-sub.flat{margin-left:calc(-1 * (var(--av) + 10px))}
.rp-unfold{display:inline-flex;align-items:center;gap:4px;margin:6px 0 6px;padding:4px 12px 4px 8px;border-radius:99px;background:var(--sheet);color:var(--blue);font-size:14px;font-weight:700}
.rp-unfold svg{width:15px;height:15px}
.rp.gone{grid-template-columns:var(--av) minmax(0,1fr)}
.rp.gone .rp-m{align-self:center}
.rav.rm{box-sizing:border-box;background:none;border:1.5px dashed #3E4144}
.rp .meta .name{flex:0 1 auto;min-width:4.5em}
.rp .meta .handle{flex:0 50 auto;min-width:0}
.rp .meta time,.rp .meta .dot,.rp .meta .edited,.rp .meta .rp-op{flex:none}
.rp-sub .rp-op{font-size:11px;padding:0 6px}