/* Expense Composer: gợi ý, chip, ô nhập, nút gửi; linh vật và hiệu ứng xu */
/* ============ composer ============ */
/* one block that always sits directly on top of the keyboard */
/* Figma: Expense Composer — nền trắng, padding dọc 10, không viền trên */
.expense-composer{
  position:relative;
  flex:0 0 auto;
  background:var(--color-background-primary);
  padding:var(--spacing-10) 0 calc(var(--spacing-10) + env(safe-area-inset-bottom));
}
/* Figma: .Tips — Other/Caption 12/16, text/tertiary. Cùng chỗ này hiện dòng
   xem trước khi đang gõ và "Đang sửa · Huỷ" khi đang sửa. */
.tips{
  font:var(--text-caption); letter-spacing:var(--tracking-caption);
  padding:var(--spacing-4) var(--spacing-16);
  color:var(--color-text-tertiary);
  display:flex; align-items:center; gap:var(--spacing-6);
}
.tips[hidden]{display:none}
.tips.tips--stacked{flex-direction:column; align-items:flex-start; gap:0}
.tips.live{color:var(--color-text-secondary)}
.tips b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.tips .cancel{font:var(--text-caption); letter-spacing:var(--tracking-caption); margin-left:auto;color:var(--color-status-error);text-decoration:underline;padding:var(--spacing-4) var(--spacing-2)}
/* the row scrolls, so its own padding has to hold the chips' extended
   tap area — otherwise overflow clips it away */
.forwho{display:flex;align-items:center;gap:var(--spacing-8);overflow-x:auto;padding:0 var(--spacing-16) var(--spacing-8);scrollbar-width:none;margin-top:-2px}
.forwho::-webkit-scrollbar{display:none}
.forwho[hidden]{display:none}
.forwho .lab{font:var(--text-compact); letter-spacing:var(--tracking-compact); flex:0 0 auto;color:var(--color-text-tertiary);}
.forwho .who-chip{
  font:var(--text-compact-emphasis); letter-spacing:var(--tracking-compact-emphasis);
  flex:0 0 auto;min-height:32px;padding:5px 13px;border-radius:var(--radius-pill);
  white-space:nowrap;
  background:var(--color-surface-secondary);color:var(--color-text-secondary);
}
.forwho .who-chip[aria-pressed="true"]{background:var(--color-solo);color:var(--color-on-solo);}
/* Figma: Categories-Chipbar — cuộn ngang, padding 8 · 16, gap 8 */
.categories-chipbar{
  display:flex; gap:var(--spacing-8); overflow-x:auto;
  padding:var(--spacing-8) var(--spacing-16);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.categories-chipbar::-webkit-scrollbar{display:none}
/* Figma: Chip/Selection — cao 32, viền 1px, không icon, không màu danh mục */
.chip{
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small);
  flex:0 0 auto;
  display:flex; align-items:center;
  position:relative;
  height:32px; padding:0 var(--spacing-12); border-radius:var(--radius-pill);
  white-space:nowrap;
  background:var(--color-background-primary);
  border:1px solid var(--color-border-subtle);
  color:var(--color-text-primary);
  transition:border-color .12s ease,color .12s ease;
}
/* the chip reads as 32px but still takes a 44px thumb */
.chip::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.chip[aria-pressed="true"]{
  border-color:var(--color-border-focus); color:var(--color-accent-primary); font-weight:600;
}
.chip[aria-disabled="true"]{cursor:default}
/* Figma: Entry row — padding 8 · 12, gap 8 */
.entry-row{display:flex; align-items:center; gap:var(--spacing-8); padding:var(--spacing-8) var(--spacing-12)}
.split-btn{
  flex:0 0 auto;width:46px;height:46px;border-radius:9999px;
  display:grid;place-items:center;color:var(--color-text-secondary);
  background:var(--color-fill-quaternary);
  transition:background .12s ease,color .12s ease;
}
.split-btn[hidden]{display:none}
.split-btn .ic-solo{display:none}
.split-btn[aria-pressed="true"]{background:var(--color-solo);color:var(--color-on-solo)}
.split-btn[aria-pressed="true"] .ic-share{display:none}
.split-btn[aria-pressed="true"] .ic-solo{display:grid}
@media (hover:hover){.split-btn:not([aria-pressed="true"]):hover{background:var(--color-fill-tertiary);color:var(--color-text-primary)}}
/* probes for the keyboard ladder — without position:absolute they collapse
   into one spot and the whole measurement silently reads the same value */
.kb-ladder{position:absolute;inset:0;pointer-events:none;z-index:-1}
.kb-ladder i{position:absolute;left:0;width:1px;height:1px}
/* Coin collecting (composer.js): xu bay từ bong bóng vừa ghi về thanh tổng.
   Lớp riêng phủ cả app, trên Pin Area (10) và dưới header (20); không chặn chạm.
   Chuyển động bằng Web Animations, nên ở đây chỉ có hình. Hình xu: Figma Coin. */
.coins{position:absolute; inset:0; z-index:15; pointer-events:none; overflow:hidden}
.coin{
  position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px;
  background:url("../img/coin.svg") center/contain no-repeat;
  will-change:transform, opacity; opacity:0;
}
/* Pixel speech bubble above the mascot. A 9-slice border-image: only that
   gives a constant 3px outline AND stepped round corners while the box still
   grows with the text. Stacked box-shadows cannot — extra layers land inside
   the first one, so they draw nothing. */
.bub{
  font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2);
  position:absolute; left:38px; bottom:calc(100% + 67px); z-index:2;
  display:inline-block; width:max-content; max-width:min(160px, calc(100% - 56px));
  background:#fff; background-clip:padding-box;   /* or it bleeds through the corner notches */
  color:#0a0d3a;
  border:6px solid transparent;
  border-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" shape-rendering="crispEdges"><path d="M6 0H14V2H16V4H18V14H16V16H14V18H4V16H2V14H0V4H2V2H4V0Z" fill="%230a0d3a"/><path d="M6 2H12V4H14V6H16V12H14V14H12V16H6V14H4V12H2V6H4V4H6Z" fill="white"/></svg>') 6 fill stretch;
  padding:1px 2px;
  pointer-events:none; user-select:none;
  animation:bubIn .26s cubic-bezier(.2,.9,.25,1.5) both;
}
.bub[hidden]{display:none}
/* a full sentence needs more room than a two-word quip */
.bub.wide{font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2); max-width:min(244px, calc(100% - 56px)); }
.bub.tappable{pointer-events:auto; cursor:pointer}
/* top:100% resolves against the padding box, so the 9px border has to be
   added back before the tail lines up with the frame */
.bub .tail{position:absolute; left:4px; top:100%; margin-top:2px; width:10px; height:12px; display:block}
@keyframes bubIn{
  from{opacity:0; transform:translateY(8px) scale(.6)}
  to{opacity:1; transform:none}
}
@media (max-width:340px){ .bub{font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2); left:32px; bottom:calc(100% + 56px); } }
/* Mascot perched on the toolbar. Anchored to the bar (which is already
   position:relative) rather than the viewport, so it rides with the bar when
   the keyboard pushes it up. Sits on the left because slips are right-aligned,
   and below the mention menu so it never covers a name. */
/* Con gà đứng ở dải riêng phía trên toolbar, không phủ lên luồng tin nhắn */
.mascot{
  position:absolute; left:10px; bottom:calc(100% + 2px);
  width:64px; height:64px; z-index:1;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  image-rendering:pixelated;
  transform:scaleX(-1);
}
@media (max-width:340px){ .mascot{width:52px;height:52px} }
/* Tạm ẩn linh vật và bong bóng thoại (Expense Composer redesign). Code vẫn
   chạy bình thường; bỏ dòng này là hiện lại. */
.mascot, .bub{display:none !important}
.solo{
  font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2);
  display:inline-block;padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-16);
  background:var(--color-solo);color:var(--color-on-solo);}
/* Figma: Input — cao 48, bo 24, nền fill/quaternary, Other/Input 17/22 */
.input-wrap{
  flex:1 1 auto; display:flex; align-items:center; min-width:0;
  height:48px; padding:0 var(--spacing-16);
  background:var(--color-fill-quaternary); border:1px solid transparent;
  border-radius:var(--radius-24);
  transition:border-color .12s ease;
}
.input-wrap:focus-within{border-color:var(--color-border-focus)}
#entry{
  font:var(--text-input); letter-spacing:var(--tracking-input);
  flex:1 1 auto; border:0; background:none; outline:none; min-width:0;
  padding:0; color:var(--color-text-primary);
}
#entry::placeholder{color:var(--color-text-tertiary)}
.input-wrap{position:relative}
/* chữ mờ sau "@" / "/" — nằm đè, không nhận chạm */
.entry-ghost{
  font:var(--text-input); letter-spacing:var(--tracking-input);
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--color-text-tertiary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.entry-ghost[hidden]{display:none}
/* Figma: Send button — tròn 48. Chưa gửi được: nền xám, mũi tên xám;
   gửi được: nền accent, mũi tên trắng. (Tên biến thể trong Figma đang ngược.) */
.send-button{
  flex:0 0 auto; width:48px; height:48px; border-radius:var(--radius-pill);
  background:var(--color-accent-primary);
  display:grid; place-items:center;
  transition:background .12s ease, transform .12s ease;
}
.send-button .icon{display:block; color:var(--color-on-accent)}
.send-button:disabled{background:var(--color-fill-quaternary); cursor:default}
.send-button:disabled .icon{color:var(--color-text-tertiary)}
.send-button:not(:disabled):active{transform:scale(.92)}