/* Scene — nền tĩnh cho khung chat, bật bằng <html data-scene="…">.
   Chỉ đổi màu / hình; không đụng hiệu ứng hay chức năng.
   Preview: ?scene=sky (dev/preview/mock.js). */

/* ============ sky · Đồng cỏ & bầu trời ============
   Figma 6264-24999. Khung tin nhắn là bầu trời, Expense Composer là đồng cỏ. */

/* Bầu trời: gradient #8cc8ff → #e1efff phủ cả .thread-wrap (không cuộn theo
   tin nhắn). Mây (img/scene/sky-clouds.svg, 415×740, đã nướng opacity 20%)
   neo đáy, rộng hơn khung 25px như Figma (lề −13 · −12), hoà multiply. */
[data-scene="sky"] .thread-wrap{
  background:
    url("../img/scene/sky-clouds.svg") center bottom / calc(100% + 25px) auto no-repeat,
    linear-gradient(#8cc8ff, #e1efff);
  background-blend-mode:multiply, normal;
}
[data-scene="sky"] .thread-wrap > main{background:transparent}

/* Bong bóng của mình: trắng như bong bóng người khác (Figma neutral/0) */
/* token định nghĩa lại ở figma-scope.css trên từng module, nên đặt thẳng lên bong bóng */
[data-scene="sky"] .expense-bubble{--color-bubble-out:var(--neutral-0)}

/* Đồng cỏ: gradient green/300 #91e4a8 (trên) → green/200 #bcefc9 (dưới) */
[data-scene="sky"] .expense-composer,
[data-scene="sky"] .app.proj-mode .expense-composer{background:linear-gradient(#91e4a8, #bcefc9)}   /* dự án: Button bar (Figma 6266-15715) — thắng nền trong suốt ở expense-page.css */

/* Category dropdown + Input: kính trắng — trắng 70% → trắng, viền trắng 1px.
   Category dropdown có viền nên đệm về đúng 5 · 8 của Figma (vẫn cao 48). */
[data-scene="sky"] .cat-dd,
[data-scene="sky"] .input-wrap{
  background:linear-gradient(rgba(255,255,255,.7), #fff);
  border:1px solid #fff;
}
[data-scene="sky"] .cat-dd{padding:5px var(--spacing-8)}
[data-scene="sky"] .input-wrap:focus-within{border-color:var(--color-border-focus)}

/* Mép cỏ (img/scene/grass-border.svg, 390×12): đứng ngay trên mép trên
   composer, theo .expense-composer (đã position:relative). Đè lên chân linh
   vật (.mascot z-index 1), dưới menu @ thành viên (25). Không chặn chạm. */
[data-scene="sky"] .expense-composer::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:12px; z-index:2;
  background:url("../img/scene/grass-border.svg") center bottom / auto 12px repeat-x;
  pointer-events:none;
}