/* message.css - いいね＋メッセージUI（ZIP版を基礎に拡張） */

.msgBox{
  display:flex;
  gap:8px;
  align-items:center;
}

/* ===== Like（♡/♥） =====
   book.css の button 共通スタイルより強くするため .msgBox .likeBtn で指定
*/
.msgBox .likeBtn{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 90, 120, 0.55);
  background: rgba(255, 90, 120, 0.10);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* 常時赤（文字も） */
.msgBox .likeBtn,
.msgBox .likeBtn .heart,
.msgBox .likeBtn .likeText{
  color: rgba(255, 90, 120, 0.95);
  font-weight: 700;
}

.msgBox .likeBtn:hover{
  background: rgba(255, 90, 120, 0.16);
}

/* 未押下：♡だけ表示 */
.msgBox .likeBtn .heart{
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}
.msgBox .likeBtn .heart.filled{ display:none; }
.msgBox .likeBtn .heart.outline{ display:inline; }

/* 押下：♥だけ表示 */
.msgBox .likeBtn.liked .heart.outline{ display:none; }
.msgBox .likeBtn.liked .heart.filled{
  display:inline;
  filter: drop-shadow(0 0 10px rgba(255, 90, 120, 0.45));
}

.msgBox .likeBtn .likeText{
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}

/* ぷにっ */
.msgBox .likeBtn.bump{
  transform: scale(1.15);
}

/* ふわっと♥（message.js が生成する要素） */
.msgBox .likeBtn .likeFx{
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  pointer-events:none;

  font-size: 22px;
  line-height: 1;
  color: rgba(255, 90, 120, 0.95);

  animation: like-float 700ms ease-out forwards;
  filter: drop-shadow(0 0 10px rgba(255, 90, 120, 0.40));
}

@keyframes like-float{
  0%{ opacity:0; transform: translateX(-50%) translateY(0) scale(0.8); }
  15%{ opacity:1; }
  100%{ opacity:0; transform: translateX(-50%) translateY(-22px) scale(1.3); }
}

/* ===== メッセージ入力（ZIP版準拠） ===== */
.msgInput{
  width: 240px;
  max-width: 42vw;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background:#111118;
  color:#eaeaf0;
  outline:none;
}

.msgInput::placeholder{
  color: rgba(234,234,240,0.6);
}

.msgSend{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background:#22222a;
  color:#eaeaf0;
  cursor:pointer;
}

.msgSend:disabled{
  opacity:.5;
  cursor:not-allowed;
}