/* 彩虹橋「小窗台」第 3 批：禮物與朋友（room-gift.js）
   面板外框沿用 room-msg.css 的 .rm-msg／.rm-msg-box（手機底部面板、桌機置中），這裡只放格子、區塊 */

/* 動作列三顆鈕：手機上擠一點（字小一號、圖示與字距縮小） */
@media (max-width: 480px) {
    .rm-actions { gap: .45rem; padding-left: .75rem; padding-right: .75rem; }
    .rm-actions .rm-act { padding: .75rem .4rem; font-size: .88rem; gap: .25rem; }
    .rm-actions .rm-act .material-icons { font-size: 1.05rem; }
}

/* ── 選禮物面板 ── */
.rm-gift-box { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.rm-gift-h { margin: .9rem 0 .5rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; color: var(--rm-gold); }
.rm-gift-h:first-of-type { margin-top: .2rem; }
.rm-gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .3rem; }
.rm-gift-tile {
    display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; padding: .5rem .2rem .45rem; border-radius: .9rem; cursor: pointer;
    font: inherit; color: var(--rm-text); background: rgba(255, 245, 226, .06); border: 1px solid rgba(224, 178, 122, .22);
    transition: background .2s, border-color .2s, transform .1s;
}
.rm-gift-tile:hover { background: rgba(255, 245, 226, .12); }
.rm-gift-tile:active { transform: scale(.96); }
.rm-gift-tile.is-on { background: color-mix(in srgb, var(--rm-gold) 26%, transparent); border-color: var(--rm-gold); }
.rm-gift-tile-name { font-size: .78rem; line-height: 1.3; color: var(--rm-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-gift-tile.is-on .rm-gift-tile-name { color: var(--rm-gold-soft); }
.rm-gift-box .rm-input { margin-top: .7rem; }

/* 品項圖（3D 縮圖或表情符號） */
.rm-gi { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; }
.rm-gi img { width: 100%; height: 100%; object-fit: contain; }
.rm-gi-emoji { font-size: 1.9rem; line-height: 1; }

/* ── 收到的心意 ── */
.rm-gifts { margin: 2.4rem 0 0; scroll-margin-top: 4.5rem; }
.rm-gifts-body { padding-top: .9rem; }
.rm-gifts-body .rm-msgs-empty { margin: .8rem 0 .2rem; }
.rm-gift-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rm-gift-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .8rem .15rem .25rem; border-radius: 99rem;
    background: rgba(255, 245, 226, .06); border: 1px solid rgba(224, 178, 122, .22); font-size: .88rem; color: var(--rm-text);
}
.rm-gift-chip .rm-gi { width: 2.2rem; height: 2.2rem; }
.rm-gift-chip .rm-gi-emoji { font-size: 1.3rem; }
.rm-gift-chip-n { color: var(--rm-gold); font-variant-numeric: tabular-nums; }
.rm-gift-recent { list-style: none; margin: 1rem 0 0; padding: 0; }
.rm-gift-recent li { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; border-top: 1px solid rgba(224, 178, 122, .1); font-size: .9rem; color: var(--rm-dim); }
.rm-gift-recent-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-og .rm-gifts { display: none !important; }