/* ============================================================
   LIVE CHAT WIDGET — fixed bottom-right, shared public chat
   ============================================================ */

/* The hidden attribute must always win over the display:flex rules
   below (several of these same elements set display:flex), otherwise
   the browser's native hidden behavior gets silently overridden and
   two panels (e.g. name-gate + messages) can show at once. */
.rm-chat-panel [hidden]{ display:none !important; }

.rm-chat-toggle{
  position:fixed; bottom:22px; right:22px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background:var(--seal); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .18s ease;
}
.rm-chat-toggle:hover{ transform:scale(1.06); }
.rm-chat-toggle .rm-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--brass); color:#171712;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}

.rm-chat-panel{
  position:fixed; bottom:92px; right:22px; z-index:200;
  width:326px; max-width:calc(100vw - 32px);
  height:440px; max-height:calc(100vh - 140px);
  background:var(--parchment);
  border:1px solid var(--ink);
  box-shadow:0 24px 50px rgba(0,0,0,.32);
  display:flex; flex-direction:column;
  transform:translateY(12px) scale(.98);
  opacity:0; pointer-events:none;
  transition:all .2s ease;
}
.rm-chat-panel.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

.rm-chat-header{
  background:var(--ink); color:var(--parchment);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.rm-chat-header b{ font-family:var(--font-display); font-size:15px; }
.rm-chat-header span{ font-family:var(--font-mono); font-size:9.5px; color:var(--brass-soft); letter-spacing:.06em; display:block; }
.rm-chat-close{ background:none; border:none; color:var(--parchment); font-size:16px; cursor:pointer; }

.rm-chat-live-dot{ width:7px; height:7px; border-radius:50%; background:#4caf50; display:inline-block; margin-right:5px; box-shadow:0 0 0 rgba(76,175,80,.5); animation:rm-pulse 2s infinite; }
@keyframes rm-pulse{ 0%{box-shadow:0 0 0 0 rgba(76,175,80,.5);} 70%{box-shadow:0 0 0 6px rgba(76,175,80,0);} 100%{box-shadow:0 0 0 0 rgba(76,175,80,0);} }

.rm-chat-messages{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.rm-msg{ max-width:88%; }
.rm-msg .rm-msg-name{ font-family:var(--font-mono); font-size:10px; color:var(--seal); margin-bottom:2px; }
.rm-msg .rm-msg-bubble{ background:var(--parchment-2); border:1px solid var(--paper-line); padding:8px 10px; font-size:13.5px; line-height:1.4; word-wrap:break-word; }
.rm-msg.is-me{ align-self:flex-end; }
.rm-msg.is-me .rm-msg-bubble{ background:#efe2c6; }
.rm-chat-empty{ color:var(--ink-soft); font-size:13px; text-align:center; margin-top:30px; }

.rm-chat-input-row{ display:flex; border-top:1px solid var(--paper-line); }
.rm-chat-input-row input{
  flex:1; border:none; background:transparent; padding:12px 14px; font-size:14px; font-family:var(--font-body);
}
.rm-chat-input-row input:focus{ outline:none; }
.rm-chat-input-row button{
  border:none; background:var(--seal); color:#fff; padding:0 16px; cursor:pointer; font-family:var(--font-mono); font-size:12px;
}

.rm-chat-namegate{ padding:20px 16px; display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center; }
.rm-chat-namegate p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 4px; }
.rm-chat-namegate input{ padding:11px 12px; border:1px solid var(--paper-line); font-family:var(--font-body); font-size:14px; background:#fff; }
.rm-chat-namegate button{ padding:11px; border:none; background:var(--seal); color:#fff; font-family:var(--font-mono); font-size:12px; cursor:pointer; }

@media (max-width:480px){
  .rm-chat-panel{ right:12px; left:12px; width:auto; bottom:84px; }
  .rm-chat-toggle{ right:14px; bottom:14px; }
}