/* Khung app: shell, header, Pin Area, khung tin nhắn */
/* ============ shell ============ */
.app{
  height:100dvh; min-height:420px;
  display:flex; flex-direction:column;
  max-width:var(--page-w); margin:0 auto;
  background:var(--color-background-primary);
  position:relative; overflow:hidden;
}
/* ============ header ============ */
header{
  flex:0 0 auto;
  --head-gap:var(--spacing-24);
  display:flex; align-items:center; justify-content:space-between;
  /* 24px: 40px đẩy nút tài khoản tràn khỏi header trên màn 390px và hẹp
     hơn. Tên dự án bị cắt bớt là chấp nhận được, mất nút thì không. */
  gap:var(--head-gap);
  padding:calc(var(--spacing-8) + env(safe-area-inset-top)) var(--spacing-12) var(--spacing-8);
  background:var(--color-background-primary);
  position:relative; z-index:20;
}
/* the popover lives inside the header's stacking context, so the whole
   header has to clear the scrim while it is open */
header.pop-open{z-index:45}
/* Figma: Project switcher — chữ trần, không nền. Lề âm 8px để chữ vẫn
   thẳng mép 12px của header, còn nền hover có chỗ thở hai bên. */
.project-switcher{
  font:var(--text-headline); letter-spacing:var(--tracking-headline);
  display:flex; align-items:center; gap:var(--spacing-8);
  min-height:44px; padding:0 var(--spacing-8); margin-left:calc(-1 * var(--spacing-8));
  border-radius:var(--radius-pill);
  color:var(--color-text-primary);
  flex:0 1 auto; min-width:92px;
  transition:background .12s ease;
}
.project-switcher__label{
  flex:0 1 auto;min-width:0;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.project-switcher .icon{display:block; color:var(--color-text-tertiary)}
@media (hover:hover){.project-switcher:hover{background:var(--color-fill-quaternary)}}
.head-right{display:flex;align-items:center;gap:var(--spacing-4);flex:0 0 auto}
/* nút máy tính: bật (view đang mở) → nền accent, icon trắng */
.calc-btn[aria-pressed="true"],
.calc-btn[aria-pressed="true"]:not(:disabled):hover,
.calc-btn[aria-pressed="true"]:not(:disabled):active{background:var(--color-accent-primary); color:var(--color-on-accent)}
/* ============ pin area ============ */
/* Figma: Pin Area nằm ĐÈ lên vùng cuộn, không có nền — khoản chi cuộn ngầm
   bên dưới và lộ qua khoảng 4px quanh thẻ. Không đặt được bên trong <main>
   vì renderThread xoá sạch nội dung main mỗi lần vẽ, nên bọc cả hai trong
   .thread-wrap và đặt Pin tuyệt đối ở mép trên. */
.thread-wrap{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  position:relative;
  /* 4 + thẻ (16 + 22 + 16 + 2 viền) + 4. Thẻ chỉ có một dòng nowrap nên
     chiều cao cố định. */
  --pin-h:64px;
}
.thread-wrap > main{padding:calc(var(--pin-h) + var(--spacing-16)) var(--spacing-16) var(--spacing-16)}
.pin-area{
  position:absolute; top:0; left:0; right:0; z-index:10;
  padding:var(--spacing-4);
  /* Figma: Pin Area drop-shadow 0 .5px .5px rgba(0,0,0,.08) */
  filter:drop-shadow(0 .5px .5px rgba(0,0,0,.08));
  pointer-events:none;     /* khoảng trống quanh thẻ không chặn cuộn/chạm */
}
.pin-area > *{pointer-events:auto}
/* Figma: Project total bar — cả thẻ là một nút mở thống kê */
.project-total-bar{
  display:flex; align-items:center; gap:var(--spacing-16);
  width:100%; min-height:44px; padding:var(--spacing-16);
  background:var(--color-background-primary);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-8);
  box-shadow:var(--elevation-hairline);
  text-align:left;
  transition:background .12s ease;
}
.project-total-bar > .icon{display:block}
.project-total-bar > .icon--chart-pie{color:var(--color-accent-primary)}
.project-total-bar > .icon--chevron-right{color:var(--color-text-secondary)}
.project-total-bar__content{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:baseline; gap:var(--spacing-8);
  white-space:nowrap; overflow:hidden;
}
/* Số tiền không bao giờ bị cắt; dòng phụ nhường chỗ */
.project-total-bar__value{
  font:var(--text-body-emphasis); letter-spacing:var(--tracking-body-emphasis);
  flex:0 0 auto;
  color:var(--color-text-primary);
  font-variant-numeric:tabular-nums;
}
.project-total-bar__caption{
  font:var(--text-caption); letter-spacing:var(--tracking-caption);
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  color:var(--color-text-tertiary);
  font-variant-numeric:tabular-nums;
}
.project-total-bar__caption[hidden]{display:none}
@media (hover:hover){.project-total-bar:hover{background:var(--color-fill-quaternary)}}
.project-total-bar:active{background:var(--color-fill-tertiary)}
/* ============ thread ============ */
main{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;   /* cuộn hết danh sách thì dừng, không đẩy trang */
  -webkit-overflow-scrolling:touch;
  background:var(--color-background-secondary);
  scrollbar-width:thin;
  display:flex; flex-direction:column;
}
/* Đẩy nội dung xuống đáy như chat: ít khoản thì dồn sát thanh nhập, phía trên để trống */
.thread-pad{flex:1 1 auto; min-height:0}
/* Figma: Day summary — "Hôm nay" · vạch · tổng; Caption 12/16 text/secondary */
.day-summary{
  font:var(--text-caption); letter-spacing:var(--tracking-caption);
  display:flex; align-items:center; gap:var(--spacing-8);
  padding:var(--spacing-12) 0;
  color:var(--color-text-secondary);
}
.day-summary .rule{flex:1 1 auto; height:1px; margin:var(--spacing-2) 0; background:var(--color-separator-non-opaque)}
.day-summary .tot{font-variant-numeric:tabular-nums}
/* Figma: Message Info — avatar 20 + chữ (trái) · vạch · giờ + ngày (phải) */
.message-info .message-info__time{flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums}
.message-info .message-info__text{flex:0 0 auto; display:flex; align-items:center; gap:var(--spacing-4)}
.message-info .message-info__text .av{font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2); width:20px; height:20px; border:1px solid var(--color-border-subtle)}
/* Figma: Expense bubble — co theo nội dung 118–300px, padding 12·16, bo 16.
   Outbound (mình ghi) nền blue/100 căn phải; Inbound (người khác) nền trắng
   căn trái. Không còn màu danh mục — màu đó chỉ dùng ở dashboard. */
.expense-bubble{
  align-self:flex-end;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--spacing-4);
  min-width:118px; max-width:min(300px, 100%);
  margin-bottom:var(--spacing-8);
  padding:calc(var(--spacing-12) - 1px) calc(var(--spacing-16) - 1px);   /* + viền 1px trong suốt = 12 · 16 */
  border:1px solid transparent;
  border-radius:var(--radius-16);
  background:var(--color-bubble-out);
  text-align:right; cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
.expense-bubble:active{transform:scale(.985)}
/* only the bubble that was just written animates — the old rule replayed on
   every render, so the whole thread twitched whenever anything changed.
   Hiệu ứng .in ở motion.css */
/* Body/Extra Large Emphasis */
.expense-bubble .amt{
  font:var(--text-body-xl-emphasis); letter-spacing:var(--tracking-body-xl-emphasis);
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--color-text-primary);
}
/* Other/Footnote 13/18 */
.expense-bubble .note,.expense-bubble .alt,.expense-bubble .meta,.expense-bubble .foot{font:var(--text-compact); letter-spacing:var(--tracking-compact); }
.expense-bubble .note{color:var(--color-text-primary); word-break:break-word}
.expense-bubble .alt{color:var(--color-text-secondary); font-variant-numeric:tabular-nums}
.expense-bubble .meta,.expense-bubble .foot{color:var(--color-text-secondary)}
/* Figma .Seperator: 1px non-opaque, đệm dọc 4 (cộng gap 4 của bong bóng) */
.expense-bubble .sep{align-self:stretch; height:1px; margin:var(--spacing-4) 0; background:var(--color-separator-non-opaque)}
.expense-bubble.editing{border-color:var(--color-accent-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent-primary) 55%,transparent)}
/* Khoản ghi khi đang mất kết nối: nhìn là biết chưa chắc chắn */
.expense-bubble.pending{opacity:.55; border-style:dashed; border-color:var(--color-border-strong, #8e8e93)}
.expense-bubble.still{cursor:default}
/* Figma: Expense row — các dòng cách nhau 8, trong một nhóm gộp cách 4 */
.expense-row{display:flex; align-items:flex-start; gap:var(--spacing-8); margin-bottom:var(--spacing-4)}
.expense-row.last{margin-bottom:var(--spacing-8)}
/* bong bóng tiếp theo trong nhóm không có avatar — thụt vào cho thẳng hàng */
.expense-row.cont.theirs{padding-left:calc(var(--spacing-24) + var(--spacing-8))}   /* avatar 24 + gap 8 */
.expense-row.mine{justify-content:flex-end}
.expense-row.theirs{justify-content:flex-start}
/* Figma: Avatar xs 24 */
.expense-row.theirs > .av{flex:0 0 auto; width:24px; height:24px; border:1px solid var(--color-border-subtle)}
.expense-row .col{
  display:flex; flex-direction:column; align-items:flex-start;
  min-width:0;
  max-width:calc(100% - 32px);       /* trừ đúng chỗ avatar 24 + gap 8 */
}
/* Figma: tên người ghi — Caption 12/16 text/tertiary */
.expense-row .sender{
  font:var(--text-caption); letter-spacing:var(--tracking-caption);
  margin:0 0 var(--spacing-4); color:var(--color-text-tertiary);
}
.expense-row .expense-bubble{margin-bottom:0}
.expense-row.theirs .expense-bubble{background:var(--color-bubble-in); align-items:flex-start; text-align:left}
.loading{
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small);
  height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--spacing-12); color:var(--color-text-tertiary); }
.loading .dots{
  width:34px; height:8px; border-radius:9999px;
  background:linear-gradient(90deg,var(--color-text-tertiary) 0 33%,transparent 0);
  background-size:300% 100%;
  animation:load 1s linear infinite;
}
@keyframes load{from{background-position:100% 0} to{background-position:0 0}}