:root{
  --pink:#ff2aa1; --indigo:#6366f1; --ink:#0f0f14; --muted:#9aa0a6;
  --panel: rgba(20,20,29,.88); --glass: rgba(255,255,255,.08);
}
/* Floating button */
#chatFabBtn{
  position: fixed; right: 18px; bottom: 60px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--pink), var(--indigo));
  color:#fff; font-size:22px; border:none; box-shadow:0 12px 28px rgba(0,0,0,.35);
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
#chatFabBtn:hover{ transform: translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,.45); }
#chatFabBtn.hidden{ opacity:0; pointer-events:none; }

/*
 * Hide the floating chat FAB on the live site. Even if the
 * legacy chat-dock script runs (e.g. due to caching or other
 * copies of chat-dock.js), this CSS ensures that the button
 * remains hidden and non-interactive.
 */
#chatFabBtn {
  display: none !important;
  pointer-events: none !important;
}

/* Dock Panel */
#chatDockPanel{
  position: fixed; right: 22px; bottom: 86px; z-index: 10000;
  width: 340px; max-width: 92vw; height: 500px; max-height: calc(100vh - 120px);
  display: none; flex-direction: column;
  background: var(--panel); color:#fff; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
#chatDockPanel.open{ display:flex; }

/* Draggable handle */
#chatDockHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-top-left-radius: 18px; border-top-right-radius: 18px;
  background: linear-gradient(135deg, var(--pink), var(--indigo));
  user-select: none; cursor: move;
}
#chatDockHeader .title{
  display:flex; align-items:center; gap:10px; font-weight: 800;
}
#chatDockHeader .title .dot{
  width: 10px; height: 10px; border-radius: 50%; background:#22c55e; box-shadow: 0 0 8px rgba(34,197,94,.7);
}
#chatDockHeader .actions{ display:flex; gap:8px; }
#chatDockHeader .icon-btn{
  background: rgba(255,255,255,.2); border:none; color:#fff; padding:6px 8px; border-radius:10px; cursor:pointer;
}

/* Messages */
#chatDockMessages{ flex:1; overflow-y:auto; padding: 12px; display:flex; flex-direction:column; gap:8px; }
.chat-row{ display:flex; gap:8px; align-items:flex-end; }
.chat-row.me{ justify-content: flex-end; }
.chat-row .av{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.chat-bubble{
  max-width: 75%; padding: 8px 12px; border-radius: 14px; word-wrap: break-word; line-height: 1.3;
  background: rgba(255,255,255,.08);
}
.chat-row.me .chat-bubble{
  background: linear-gradient(135deg, rgba(255,42,161,.85), rgba(99,102,241,.85));
}
.chat-meta{ font-size: .78rem; color: var(--muted); margin: 2px 4px; }
.system{ text-align:center; font-style: italic; color: var(--muted); }

/* Input */
#chatDockFooter{ padding: 10px; border-top: 1px solid rgba(255,255,255,.08); display:flex; gap:8px; align-items:center; }
#chatInput{ flex:1; padding: 10px 12px; border-radius: 12px; border:none; outline:none; background: rgba(255,255,255,.1); color:#fff; }
.send-btn, .icon-btn{
  background: linear-gradient(135deg, var(--pink), var(--indigo)); color:#fff; border:none; border-radius: 12px; padding: 8px 10px; cursor:pointer;
}
.icon-btn{ border-radius: 10px; background: rgba(255,255,255,.12); }
.icon-btn:hover{ background: rgba(255,255,255,.18); }

/* Like hearts & gift burst */
#likeLayer, #giftLayer{ position:absolute; inset:0; pointer-events:none; }
.heart{ position:absolute; font-size:22px; animation: floatUp 1.3s ease forwards; }
@keyframes floatUp { from{ transform: translateY(0) scale(1); opacity:1; } to{ transform: translateY(-140px) scale(1.2); opacity:0; } }
.gift{ position:absolute; bottom:80px; right:26px; font-size:28px; animation: popGift 1.1s ease; }
@keyframes popGift{ 0%{ transform:scale(.6); opacity:.0;} 40%{ transform:scale(1.1); opacity:1;} 100%{ transform:scale(.9); opacity:0;} }

/* Resize affordance (vertical) */
#resizer{
  height: 12px; cursor: ns-resize; background: transparent;
  border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}

/* Floating Chat Overlay for Mobile */
.floating-chat-overlay {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
  z-index: 50;
}
.floating-chat-overlay .live-msg {
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.85rem;
  max-width: 80%;
  animation: fadeOut 6s forwards;
}
@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (min-width: 769px) {
  .floating-chat-overlay { display: none; }
}


/* Hide chat toggle on desktop; show on mobile */
@media (min-width: 769px) {
  .chat-toggle-btn { display: none !important; }
}