/* /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; }


/* destination: /home/ale/p2a/static/css/chat.css */
/* ===== CHAT DOT – sharp glow wave ===== */
.status-wave-dot {
  --dot-size: 8px;
  --dot-col: #00712a;
  position: relative;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 9999px;
  background: radial-gradient(circle, #22c55e 0%, #27e06b 55%, #68ff6a 100%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.85);
  display: inline-block;
  transform: translateZ(0);
}

/* halo ușor, static */
.status-wave-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(62, 224, 122, 0.498) 0%, rgba(44, 249, 119, 0) 70%);
  pointer-events: none;
}

/* inelul – NU e blur, e border ca să fie “clean” */
.status-wave-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(46, 255, 122, 0.55);
  box-shadow: 0 0 12px rgba(42, 241, 115, 0.55);
  opacity: 0;
  animation: waveRing 1.5s ease-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes waveRing {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  35% {
    opacity: 0.7;
  }
  100% {
    transform: scale(3.0);   /* cât de departe pleacă unda */
    opacity: 0;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
}

#p2a-chat-panel {
  box-shadow:
    0 30px 80px rgba(0,0,0,0.9),
    0 0 60px rgba(0,0,0,0.9);
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}