/* 彩虹橋「小窗台」第 2 批：留言區、寫留言視窗、心情噴泉、點亮小燈那行字（room-msg.js／room.js）
   顏色沿用 room.css 的變數；class 一律 rm- 開頭（不跟 UIkit、bridge.css 打架） */

/* ── 上方動作列的「留言」鈕 ──
   它是 <a>（href="#msgs"）：全站 common.css 的連結 hover 是藍色，會蓋過 .rm-act 的金色（站長 11-10 回報），所以這裡鎖住 */
a.rm-act, a.rm-act:visited, a.rm-act:hover, a.rm-act:focus, a.rm-act:active { color: var(--rm-gold-soft) !important; }
/* 旁邊的數字 */
.rm-act-n {
    min-width: 1.4rem; padding: 0 .4rem; margin-left: .15rem; border-radius: 99rem; font-size: .78rem; line-height: 1.4rem; font-weight: 700;
    background: rgba(224, 178, 122, .22); color: var(--rm-gold-soft);
}
.rm-act-n[hidden] { display: none; }

/* ── 點亮小燈：光到了窗外之後淡入的一行字（疊在 3D 畫面下段的窗台上；上方是「打開窗戶」鈕，不能放那裡） ── */
.rm-lit-line {
    position: absolute; left: 50%; bottom: calc(clamp(44px, 7vw, 84px) + 1.2rem); z-index: 4; margin: 0; width: max-content; max-width: calc(100% - 2rem);
    transform: translate(-50%, .6rem); opacity: 0; pointer-events: none; transition: opacity .9s ease, transform .9s ease;
    padding: .5rem 1.1rem; border-radius: 99rem; text-align: center; line-height: 1.6;
    font-family: "Noto Serif TC", serif; font-size: .95rem; letter-spacing: .06em; color: #fff7e6;
    background: rgba(29, 20, 17, .55); box-shadow: 0 0 1.6rem rgba(255, 200, 120, .35);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rm-lit-line.is-show { opacity: 1; transform: translate(-50%, 0); }
.rm-og .rm-lit-line { display: none; }

/* ── 留言區 ── */
.rm-msgs { margin: 2.4rem 0 0; scroll-margin-top: 4.5rem; }   /* 上方頂部列是 fixed，捲過來時不要被蓋住 */
.rm-msgs-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(224, 178, 122, .22); }
.rm-msgs-title {
    flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: .5rem;
    font-family: "Noto Serif TC", serif; font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; color: var(--rm-gold-soft);
}
.rm-msgs-n { padding: 0 .55rem; border-radius: 99rem; font-family: "Noto Sans TC", sans-serif; font-size: .8rem; line-height: 1.5rem; background: rgba(224, 178, 122, .18); color: var(--rm-gold); letter-spacing: 0; }
.rm-msgs-n[hidden] { display: none; }
.rm-msgs-write {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; padding: .45rem .95rem; border-radius: 99rem; cursor: pointer;
    font: inherit; font-size: .88rem; color: #2a1808; background: var(--rm-gold); border: 0; transition: background .2s;
}
.rm-msgs-write:hover { background: var(--rm-gold-soft); }
.rm-msgs-write .material-icons { font-size: 1.1rem; }
.rm-msgs-loading { margin: 1.6rem 0; text-align: center; color: var(--rm-dim); font-size: .9rem; }
.rm-msgs-empty { margin: 1.8rem 0 .6rem; text-align: center; color: var(--rm-dim); font-size: .95rem; line-height: 1.7; }
.rm-msgs-empty p { margin: 0 0 1rem; }
.rm-msgs-more {
    display: block; margin: 1rem auto 0; padding: .55rem 1.4rem; border-radius: 99rem; cursor: pointer;
    font: inherit; font-size: .9rem; color: var(--rm-gold-soft); background: transparent; border: 1px solid rgba(224, 178, 122, .38);
}
.rm-msgs-more:hover { background: rgba(255, 235, 200, .08); }
.rm-msgs-more:disabled { opacity: .6; cursor: default; }

/* 一則留言 */
.rm-m { padding: 1rem 0 .85rem; border-bottom: 1px solid rgba(224, 178, 122, .14); }
.rm-m:last-of-type { border-bottom: 0; }
.rm-m-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .5rem; }
.rm-m-name { font-size: .9rem; color: var(--rm-gold-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.rm-m-owner { padding: .05rem .5rem; border-radius: 99rem; font-size: .72rem; background: color-mix(in srgb, var(--rm-pc) 30%, transparent); color: var(--rm-text); }
.rm-m-ago { margin-left: auto; font-size: .76rem; color: var(--rm-dim); }
.rm-m-text { margin: .35rem 0 0; font-size: 1rem; line-height: 1.8; color: var(--rm-text); white-space: pre-wrap; word-break: break-word; }
.rm-m-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .55rem; }
.rm-m-reply {
    margin-left: auto; padding: .3rem .85rem; border-radius: 99rem; cursor: pointer; font: inherit; font-size: .85rem;
    color: var(--rm-gold); background: transparent; border: 1px solid rgba(224, 178, 122, .3); transition: background .2s;
}
.rm-m-reply:hover { background: rgba(255, 235, 200, .08); }
.rm-m-replies:empty { display: none; }
.rm-m-replies { margin: .55rem 0 0 .9rem; padding-left: .85rem; border-left: 2px solid color-mix(in srgb, var(--rm-pc) 45%, transparent); }
.rm-m.is-reply { padding: .6rem 0 .45rem; border-bottom: 0; }
.rm-m.is-reply .rm-m-text { font-size: .94rem; }
.rm-m.is-reply .rm-rx-label { display: none; }   /* 回覆列空間小，只留圖示與數字 */

/* 心情（愛心／抱抱／認同／祈福） */
.rm-rx { display: flex; flex-wrap: wrap; gap: .35rem; }
.rm-rx-btn {
    display: inline-flex; align-items: center; gap: .2rem; min-height: 2rem; padding: .2rem .6rem; border-radius: 99rem; cursor: pointer;
    font: inherit; font-size: .8rem; color: var(--rm-dim); background: rgba(255, 235, 200, .05); border: 1px solid rgba(224, 178, 122, .2); transition: background .2s, color .2s;
}
.rm-rx-btn .material-icons { font-size: 1.05rem; }
.rm-rx-btn:hover:not(:disabled) { background: rgba(255, 235, 200, .12); color: var(--rm-text); }
.rm-rx-btn.is-on { background: rgba(224, 178, 122, .2); border-color: var(--rm-gold); color: var(--rm-gold-soft); }
.rm-rx-btn:disabled { cursor: default; opacity: .7; }
.rm-rx-n { font-variant-numeric: tabular-nums; }
.rm-rx-n[hidden] { display: none; }
@media (max-width: 767px) { .rm-rx-label { display: none; } }   /* 手機只留圖示與數字（按鈕有 title／aria-label），「回覆」才能和心情擠在同一列 */

/* 表單元件（寫留言視窗、回覆） */
.rm-input {
    display: block; box-sizing: border-box; width: 100%; margin: 0 0 .55rem; padding: .7rem .85rem; border-radius: .7rem;
    font: inherit; font-size: 1rem; line-height: 1.6; color: var(--rm-text); background: rgba(255, 245, 226, .06);
    border: 1px solid rgba(224, 178, 122, .3); resize: vertical;
}
.rm-input::placeholder { color: color-mix(in srgb, var(--rm-dim) 80%, transparent); }
.rm-input:focus { outline: none; border-color: var(--rm-gold); background: rgba(255, 245, 226, .1); }
.rm-reply-form { margin-top: .7rem; }
.rm-form-error { margin: 0 0 .6rem; padding: .6rem .85rem; border-radius: .7rem; font-size: .88rem; line-height: 1.6; color: #ffd2c9; background: rgba(255, 99, 71, .16); }
.rm-form-error[hidden] { display: none; }
.rm-msg-foot { display: flex; align-items: center; gap: .55rem; }
.rm-count { flex: 1; font-size: .78rem; color: var(--rm-dim); font-variant-numeric: tabular-nums; }
.rm-btn-gold, .rm-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .6rem 1.3rem; border-radius: 99rem; cursor: pointer;
    font: inherit; font-size: .93rem; transition: background .2s;
}
.rm-btn-gold { border: 0; background: var(--rm-gold); color: #2a1808; font-weight: 700; }
.rm-btn-gold:hover { background: var(--rm-gold-soft); }
.rm-btn-gold:disabled { opacity: .6; cursor: default; }
.rm-btn-gold .material-icons { font-size: 1.15rem; }
.rm-btn-ghost { border: 1px solid rgba(224, 178, 122, .32); background: transparent; color: var(--rm-dim); }
.rm-btn-ghost:hover { background: rgba(255, 235, 200, .08); }

/* ── 寫留言視窗：手機底部面板、桌機置中（同牆上的 .br-msg） ── */
.rm-msg { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 5, 3, .62); }
.rm-msg[hidden] { display: none; }
.rm-msg-box {
    box-sizing: border-box; width: 100%; max-width: 30rem; padding: 1.3rem 1.2rem max(1.2rem, env(safe-area-inset-bottom));
    border-radius: 1.2rem 1.2rem 0 0; background: #2a1d17; border: 1px solid rgba(224, 178, 122, .25); border-bottom: 0;
    box-shadow: 0 -.8rem 2rem rgba(0, 0, 0, .4);
}
.rm-msg-title { margin: 0; font-family: "Noto Serif TC", serif; font-size: 1.15rem; line-height: 1.6; letter-spacing: .06em; color: var(--rm-gold-soft); word-break: break-word; }
.rm-msg-sub { margin: .3rem 0 .85rem; font-size: .82rem; line-height: 1.6; color: var(--rm-dim); }
@media (min-width: 768px) {
    .rm-msg { align-items: center; }
    .rm-msg-box { border-radius: 1.2rem; border-bottom: 1px solid rgba(224, 178, 122, .25); padding-bottom: 1.3rem; }
}
html.rm-lock, html.rm-lock body { overflow: hidden; }

/* ── 心情噴泉（同追思專頁頭像的飄心，顏色對照 memorial-view.css 的 .reaction-float[data-type]） ── */
.rm-float-layer { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }   /* 在頂部列（30）下面 */
.rm-float {
    position: absolute; font-size: var(--size, 20px); line-height: 1; opacity: 0;
    transform: translate(-50%, 0) scale(.6);
    animation-name: rmFloat; animation-timing-function: cubic-bezier(.25, .6, .35, 1); animation-fill-mode: forwards;
    filter: drop-shadow(0 0 6px currentColor); will-change: transform, opacity;
}
.rm-float[data-type="heart"]  { color: #f4bfc9; }
.rm-float[data-type="hug"]    { color: #f5ac63; }
.rm-float[data-type="agree"]  { color: #7fb2ff; }
.rm-float[data-type="pray"]   { color: #ffd166; }
.rm-float[data-type="candle"] { color: #f2c46d; }   /* 點燈 → 暖金色愛心 */
.rm-float[data-type="flower"] { color: #e7a6d8; }
@keyframes rmFloat {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
    15%  { opacity: .85; transform: translate(calc(-50% + var(--drift, 0px) * .3), calc(var(--rise, 160px) * -.15)) scale(1); }
    50%  { transform: translate(calc(-50% - var(--drift, 0px) * .4), calc(var(--rise, 160px) * -.55)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), calc(var(--rise, 160px) * -1)) scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
    .rm-float { display: none; }
}