/* FanHall text feed, composer, avatars. Scoped; uses VOTEBALL theme variables. */
/* Grid tracks otherwise inherit the min-content width of long fan names and
   the collapsed pill. Shrink the track, not the document or RTL viewport. */
#page-fanhall .fh-grid{grid-template-columns:minmax(0,1fr) 320px}
#page-fanhall .fh-grid>*{min-width:0;max-width:100%}
#page-fanhall .composer,#page-fanhall .post-card{min-width:0;max-width:100%}
/* The existing desktop header has more links than fit at 1366px. Keep them
   reachable in an internal scroller instead of widening the entire page. */
body:has(#page-fanhall.active) .hdr .nav{min-width:0;overflow-x:auto;scrollbar-width:none}
body:has(#page-fanhall.active) .hdr .nav::-webkit-scrollbar{display:none}
@media(max-width:900px){#page-fanhall .fh-grid{grid-template-columns:minmax(0,1fr)}}
.fh-i{flex:none;display:block}
.fh-av{--s:40px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;background:var(--s2);border:1px solid var(--bdr);flex:none;vertical-align:middle}
.fh-av-e{font-size:calc(var(--s)*.5);line-height:1}
.fh-av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--s2)}
.fh-frow{display:flex;align-items:center;gap:10px;padding:6px 0;width:100%;text-align:start}
/* post card */
.fh-post{padding:14px 14px 8px}
.fh-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fh-av-btn{background:none;border:0;padding:0;cursor:pointer;display:inline-flex}
.fh-who{flex:1;min-width:0}
.fh-nm-row{display:flex;align-items:center;gap:6px;min-width:0}
.fh-nm{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--tx);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.fh-club{font-size:.68rem;font-weight:700;color:var(--g);background:var(--gdim);border-radius:999px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.fh-time{font-size:.75rem;color:var(--tx2)}
.fh-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--tx2);cursor:pointer}
.fh-ico:hover,.fh-ico:focus-visible{background:var(--gdim);color:var(--tx)}
.fh-menu-wrap,.fh-react-wrap,.fh-sum-wrap{position:relative}
.fh-menu,.fh-picker,.fh-break,.fh-emoji{position:absolute;z-index:30;background:var(--s1);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.fh-menu{inset-inline-end:0;top:46px;min-width:190px;padding:6px}
.fh-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--tx);font:inherit;font-size:.86rem;cursor:pointer;text-align:start}
.fh-menu button:hover{background:var(--gdim)}.fh-menu .danger{color:#e5484d}
.fh-txt-wrap{margin:2px 0 8px}
.fh-txt{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;color:var(--tx);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.fh-txt.fh-open{-webkit-line-clamp:unset;display:block}
.fh-more{background:none;border:0;padding:4px 0;color:var(--g);font-weight:700;cursor:pointer;font-size:.84rem}
.fh-link{color:var(--g);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.fh-tag,.fh-mention{color:var(--g);font-weight:700}
.fh-bar{display:flex;align-items:center;gap:2px;border-top:1px solid var(--bdr);margin-top:8px;padding-top:2px}
.fh-sp{flex:1}
.fh-act{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--tx2);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.fh-act:hover,.fh-act:focus-visible{background:var(--gdim);color:var(--tx)}
.fh-act.on{color:var(--g)}
.fh-nc{opacity:.7}.fh-nc.on{opacity:1;color:#e5484d}
.fh-sum{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;border:0;background:none;color:var(--tx2);font:inherit;font-size:.82rem;cursor:pointer}
.fh-sum b{margin-inline-start:4px;color:var(--tx)}
.fh-break{inset-inline-start:0;bottom:48px;padding:10px 12px;min-width:170px}
.fh-break div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:.82rem;color:var(--tx)}
.fh-picker{inset-inline-start:0;bottom:50px;display:flex;gap:2px;padding:6px;border-radius:999px}
.fh-picker[hidden],.fh-menu[hidden],.fh-break[hidden],.fh-emoji[hidden]{display:none}
.fh-pick{width:44px;height:44px;border:0;border-radius:50%;background:none;font-size:1.4rem;cursor:pointer;transition:transform .12s}
.fh-pick:hover,.fh-pick:focus-visible{transform:scale(1.25);background:var(--gdim)}.fh-pick.on{background:var(--gdim)}
/* pending + states */
.fh-pending{opacity:.92;border-style:dashed}
.fh-pending.failed{border-color:#e5484d}
.fh-pend-bar{height:3px;border-radius:2px;background:var(--gdim);overflow:hidden;margin-bottom:6px}
.fh-pend-bar i{display:block;height:100%;width:40%;background:var(--g);animation:fhSlide 1.1s ease-in-out infinite}
@keyframes fhSlide{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
[dir=rtl] .fh-pend-bar i{animation-direction:reverse}
.fh-pend-actions{display:flex;gap:8px;padding:4px 0 8px}
.fh-newpill{position:sticky;top:70px;z-index:20;display:block;margin:0 auto 10px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--g);color:#06101c;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.fh-spacer{display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.fh-skel{background:var(--s1);border:1px solid var(--bdr);border-radius:16px;padding:14px;margin-bottom:12px;display:grid;grid-template-columns:40px 1fr;gap:8px 10px}
.fh-skel i{display:block;border-radius:8px;background:linear-gradient(90deg,var(--s2),var(--gdim),var(--s2));background-size:200% 100%;animation:fhShimmer 1.3s linear infinite}
.fh-skel .a{grid-row:span 2;width:40px;height:40px;border-radius:50%}.fh-skel .b{height:12px;width:40%}.fh-skel .c{grid-column:1/-1;height:12px}.fh-skel .d{grid-column:1/-1;height:12px;width:70%}
@keyframes fhShimmer{to{background-position:-200% 0}}
/* composer */
.fh-comp .fh-pill,.fh-comp .fh-sheet-hd,.fh-backdrop{display:none}
.fh-comp.collapsed{padding:10px}
.fh-comp.collapsed .fh-pill{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:4px 16px 4px 4px;border:1px solid var(--bdr);border-radius:999px;background:var(--s2);color:var(--tx2);font:inherit;cursor:pointer;text-align:start}
[dir=rtl] .fh-comp.collapsed .fh-pill{padding:4px 4px 4px 16px}
.fh-comp.collapsed .fh-pill:hover{border-color:var(--g)}
.fh-pill-av{display:inline-flex}.fh-pill-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-comp.collapsed>:not(.fh-pill):not(.fh-sheet-hd),.fh-comp.collapsed .composer-top,.fh-comp.collapsed .comp-actions{display:none}
.fh-comp:not(.collapsed) .fh-sheet-hd{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.fh-tools{display:flex;align-items:center;gap:6px;position:relative;margin-inline-start:auto}
.fh-comp .comp-actions{align-items:center;gap:8px;flex-wrap:wrap}
.fh-count{font-size:.78rem;font-weight:700;color:var(--tx2);font-variant-numeric:tabular-nums}
.fh-count.warn{color:#d8a200}.fh-count.over{color:#e5484d}
.fh-emoji{inset-inline-end:0;bottom:50px;display:grid;grid-template-columns:repeat(6,44px);padding:6px}
.fh-emoji button{height:44px;border:0;border-radius:10px;background:none;font-size:1.3rem;cursor:pointer}.fh-emoji button:hover{background:var(--gdim)}
.fh-comp .comp-post{min-height:44px;min-width:92px;border-radius:999px;font-weight:800;position:relative}
.fh-comp .comp-post:disabled{opacity:.45;cursor:not-allowed}
.fh-comp .comp-post.busy{color:transparent}
.fh-comp .comp-post.busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(6,16,28,.35);border-top-color:#06101c;animation:fhSpin .7s linear infinite}
@keyframes fhSpin{to{transform:rotate(360deg)}}
.community-media-type{display:inline-flex;align-items:center;gap:6px;min-height:40px}
@media(max-width:768px){
  /* The legacy page animation retains a transform and z-index:1. Both trap
     a fixed sheet inside the page, below the body-level backdrop. */
  .fh-sheet-open #page-fanhall.active{animation:none;transform:none;z-index:auto}
  .fh-comp:not(.collapsed){position:fixed;inset-inline:0;bottom:var(--fh-kb,0px);z-index:1200;margin:0;border-radius:20px 20px 0 0;max-height:calc(var(--fh-vvh,100dvh) - 8px);overflow-y:auto;padding:10px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.4);animation:fhUp .22s ease-out}
  .fh-sheet-open .fh-backdrop{display:block;position:fixed;inset:0;z-index:1190;background:rgba(0,0,0,.5)}
  .fh-sheet-open{overflow:hidden}
  .fh-comp .comp-inp{font-size:16px}
}
@keyframes fhUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:769px){.fh-comp:not(.collapsed){box-shadow:0 6px 24px rgba(0,0,0,.18);border-color:var(--g)}.fh-comp:not(.collapsed) .fh-sheet-hd{display:none}}
@media(prefers-reduced-motion:reduce){.fh-comp *,.fh-pend-bar i,.fh-skel i{animation:none!important}}
/* profile photo */
.fh-photo{display:grid;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--bdr)}
.fh-photo[hidden]{display:none}
.fh-photo-cur{display:flex;gap:14px;align-items:center}.fh-photo-cur small{display:block;color:var(--tx2);margin-top:2px;font-size:.78rem}
.fh-photo-act{display:flex;gap:8px;flex-wrap:wrap}.fh-photo-act button{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.fh-crop{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);padding:16px}
.fh-crop.open{display:flex}
.fh-crop-box{background:var(--s1);border:1px solid var(--bdr);border-radius:20px;padding:18px;width:min(340px,100%);display:grid;gap:12px;justify-items:center;color:var(--tx)}
#fhCropCanvas{width:min(280px,100%);aspect-ratio:1;border-radius:14px;touch-action:none;cursor:grab;background:#fff}
.fh-crop-row{display:flex;align-items:center;gap:10px;width:100%}.fh-crop-row input{flex:1}
#fhCropPreview{width:48px;height:48px;border-radius:50%;border:1px solid var(--bdr)}
#fhCropMsg{min-height:1.2em;margin:0;font-size:.82rem;color:var(--tx2)}#fhCropMsg.bad{color:#e5484d}
#fhCropProg{width:100%}
.fh-crop-act{display:flex;gap:8px;justify-content:flex-end;width:100%}.fh-crop-act button{min-height:44px}