/* Skeleton: khung app giả trong lúc chờ — thay cho màn trắng trống.
   Hai chỗ dùng:
   1. Cổng đăng nhập lúc đang kiểm tra phiên (.gate chưa .gate--open): vẽ ngay
      từ HTML + CSS, không chờ JS — mở app là thấy hình dáng app chứ không
      phải tờ giấy trắng tưởng như lỗi.
   2. Khung tin nhắn lúc đang tải sổ (thread.js, state.loading).
   Màu theo vùng thật của app: header / composer trắng, khung tin nhắn
   neutral/100, khối giữ chỗ neutral/200 có vệt sáng lướt qua. */

/* khối giữ chỗ + vệt sáng: mọi khối cùng nhịp nên vệt trông như lướt qua cả màn */
.skel__bar, .skel__dot, .skel__bubble, .skel__chip, .skel__input{
  display:block; flex:0 0 auto;
  background:var(--neutral-200) linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%) no-repeat;
  background-size:200% 100%;
  animation:skel-shine 1.4s ease-in-out infinite;
}
@keyframes skel-shine{ from{background-position:150% 0} to{background-position:-50% 0} }
@media (prefers-reduced-motion:reduce){
  .skel__bar, .skel__dot, .skel__bubble, .skel__chip, .skel__input{animation:none}
}
.skel__bar{width:var(--w, 120px); height:var(--h, 14px); border-radius:var(--radius-pill)}
.skel__dot{width:24px; height:24px; border-radius:50%}
.skel__dot--av{width:40px; height:40px}

/* ---------- 1. cả màn (trong cổng) ---------- */
.skel{
  position:absolute; inset:0; margin:0 auto; max-width:var(--page-w);
  display:flex; flex-direction:column;
  background:var(--neutral-100);
}
.gate:not(.gate--open) > .skel{visibility:visible}   /* các con khác của cổng vẫn ẩn */
.gate--open > .skel{display:none}
/* header: tên dự án · nút thiết lập · avatar (layout.css header) */
.skel__head{
  display:flex; align-items:center; gap:var(--spacing-12);
  min-height:60px; padding:calc(var(--spacing-8) + env(safe-area-inset-top)) var(--spacing-12) var(--spacing-8);
  background:var(--neutral-0);
}
.skel__head .skel__bar{--h:18px}
.skel__head > :nth-child(2){margin-left:auto}
/* thanh tổng (Pin Area) */
.skel__pin{
  margin:var(--spacing-4); padding:var(--spacing-16); border-radius:var(--radius-8);
  background:var(--neutral-0); display:flex; align-items:center; gap:var(--spacing-8);
}
/* bong bóng của mình: căn phải, dồn xuống đáy như khung tin nhắn thật */
.skel__list{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;
  gap:var(--spacing-8); padding:var(--spacing-16); overflow:hidden;
}
.skel__day{align-self:stretch; display:flex; align-items:center; gap:var(--spacing-8); padding:var(--spacing-12) 0}
.skel__day::after{content:""; flex:1; height:1px; background:var(--neutral-200)}
.skel__bubble{width:var(--w, 160px); height:var(--h, 76px); border-radius:var(--radius-16)}
/* composer: hàng chip + ô nhập */
.skel__comp{background:var(--neutral-0); padding:var(--spacing-10) 0 calc(var(--spacing-10) + env(safe-area-inset-bottom))}
.skel__chips{display:flex; gap:var(--spacing-8); padding:var(--spacing-8) var(--spacing-16); overflow:hidden}
.skel__chip{width:var(--w, 76px); height:32px; border-radius:var(--radius-pill)}
.skel__row{display:flex; gap:var(--spacing-8); padding:var(--spacing-8) var(--spacing-12)}
.skel__input{flex:1 1 auto; height:48px; border-radius:var(--radius-24)}
.skel__row .skel__dot{width:48px; height:48px}

/* ---------- 2. trong khung tin nhắn ---------- */
.skel__list--thread{min-height:100%}