/* /home/ale/p2a/static/css/chat.css */
/* British English comments. Small helpers for glass chat transitions. */

/* Reveal panel */
.p2a-chat--open #p2a-chat-panel{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.p2a-chat--open #p2a-chat-overlay{
  opacity: 1;
}

/* Reduce textarea jump on Enter */
#p2a-chat-input {
  resize: none;
  overflow: hidden;
}

/* Simple fade-in for incoming bubbles (demo only) */
.p2a-bubble-in {
  animation: p2aFadeIn 180ms ease-out both;
}
@keyframes p2aFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ensure transform target has a baseline to animate to */
#p2a-chat-panel { transform: scale(0.95); }

/* When open, guarantee pointer events and visibility */
.p2a-chat--open #p2a-chat-panel{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Overlay opacity is animated; display toggled by JS */
.p2a-chat--open #p2a-chat-overlay{ opacity: 1; }

/* Ghost "sending…" bubble */
.p2a-ghost {
  animation: p2aPulse 1.2s ease-in-out infinite;
}
@keyframes p2aPulse {
  0% { opacity: 0.50; }
  50% { opacity: 0.85; }
  100% { opacity: 0.50; }
}


/* Launcher badge (unread) */
.p2a-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ef4444; /* red-500 */
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.p2a-badge.hidden { display: none; }

/* Ghost "sending…" bubble pulse */
.p2a-ghost { animation: p2aPulse 1.2s ease-in-out infinite; }
@keyframes p2aPulse { 0%{opacity:.50} 50%{opacity:.85} 100%{opacity:.50} }

/* Typing indicator */
.p2a-typing::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  margin-left: 6px;
  animation: p2aDots 1.2s infinite steps(4);
}
@keyframes p2aDots {
  0% { content: '';   }
  25%{ content: '.';  }
  50%{ content: '..'; }
  75%{ content: '...';}
  100%{ content: '';  }
}

/* Message status ticks (user bubbles only) */
.p2a-status-sending { position: relative; }
.p2a-status-sending::after {
  content: '…';
  position: absolute; right: 8px; bottom: 6px;
  font-size: 12px; opacity: .7;
}
.p2a-status-sent { position: relative; }
.p2a-status-sent::after {
  content: '✓';
  position: absolute; right: 8px; bottom: 6px;
  font-size: 12px; opacity: .9;
}
.p2a-status-delivered { position: relative; }
.p2a-status-delivered::after {
  content: '✓✓';
  position: absolute; right: 8px; bottom: 6px;
  font-size: 12px; opacity: .95;
}

/* Chat launcher: lock bottom-right, above everything */
#p2a-chat-launcher{
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 2147483647 !important; /* maximum practical */
  pointer-events: auto !important;
}

/* Panel & overlay stacking */
#p2a-chat-panel  { z-index: 2147483646 !important; }
#p2a-chat-overlay{ z-index: 2147483645 !important; }

/* Create isolated stacking contexts (prevents parents from clipping) */
#p2a-chat-launcher,
#p2a-chat-panel { isolation: isolate; }

/* Hide launcher only while chat is open */
.p2a-chat--open #p2a-chat-launcher { display: none !important; }