/* =============================================================
   A4CHAT — Premium Micro-Animations System
   ============================================================= */

/* ── No focus outline / blue ring ───────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent !important;
}
*:focus,
*:active,
*:focus-visible {
  outline: none !important;
}
.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
[role="button"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Ripple ─────────────────────────────────────────────────── */
.a4chat-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: a4chat-ripple-anim 0.65s linear;
  pointer-events: none;
  z-index: 9999;
}
@keyframes a4chat-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}
/* Ripple container — uniquement sur les sidebar/nav links, PAS sur .btn pour ne jamais
   casser les dropdowns Bootstrap */
.sidebar-nav-link,
.bottom-nav-item,
.timeline-action-item,
.pubbox-submit-btn {
  position: relative;
  overflow: hidden;
}

/* ── Hover Lift (cartes) ─────────────────────────────────────── */
.a4chat-card,
.user-card,
.suggested-user-item,
.notification-item,
.conversation-list-item {
  transition: transform 0.22s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.22s cubic-bezier(.25,.8,.25,1);
}
.a4chat-lift {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important;
}

/* ── Post click cursor ──────────────────────────────────────── */
.post-list-item {
  cursor: pointer;
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
/* Pas d'opacity:0 par défaut — on fait juste l'animation en JS si tout va bien */
.post-list-item.a4chat-reveal-init {
  opacity: 0;
  transition: opacity 0.38s ease;
}
.post-list-item.a4chat-revealed {
  opacity: 1;
}

/* ── SPA Page Transitions ───────────────────────────────────── */
.a4chat-page-exit {
  animation: a4chat-exit 0.18s ease forwards;
}
.a4chat-page-enter {
  animation: a4chat-enter 0.32s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes a4chat-exit {
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes a4chat-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal Spawn / Despawn ──────────────────────────────────── */
.a4chat-modal-in {
  animation: a4chat-modal-in 0.25s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes a4chat-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.a4chat-modal-out {
  animation: a4chat-modal-out 0.2s ease forwards;
}
@keyframes a4chat-modal-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* ── Like / Reaction Pop ────────────────────────────────────── */
.a4chat-like-pop {
  animation: a4chat-like-pop 0.45s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes a4chat-like-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55) rotate(-8deg); }
  60%  { transform: scale(0.9)  rotate(4deg); }
  100% { transform: scale(1); }
}

/* ── Submit Spinner ─────────────────────────────────────────── */
.a4chat-submitting {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
}
.a4chat-submitting::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: a4chat-spin 0.7s linear infinite;
}
@keyframes a4chat-spin {
  to { transform: rotate(360deg); }
}

/* ── Shake on error ─────────────────────────────────────────── */
.a4chat-shake {
  animation: a4chat-shake 0.45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes a4chat-shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px);  }
  30%, 70% { transform: translateX(-5px); }
  50%      { transform: translateX(3px);  }
}

/* ── Avatar Glow ────────────────────────────────────────────── */
.a4chat-avatar-glow {
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow: 0 0 0 3px var(--a4chat-primary-color, #1da1f2),
              0 0 16px rgba(29,161,242,0.35) !important;
  transform: scale(1.06);
}

/* ── Input Focus Glow ───────────────────────────────────────── */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.a4chat-input-focus {
  box-shadow: 0 0 0 3px rgba(29,161,242,0.18) !important;
  border-color: var(--a4chat-primary-color, #1da1f2) !important;
}

/* ── Toast Slide-In ─────────────────────────────────────────── */
.a4chat-toast-in {
  animation: a4chat-toast-in 0.32s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes a4chat-toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)      scale(1); }
}

/* ── Nav Active Pulse ───────────────────────────────────────── */
.a4chat-nav-active-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--a4chat-primary-color, #1da1f2);
  opacity: 0;
  animation: a4chat-nav-pulse 0.55s ease forwards;
  pointer-events: none;
}
@keyframes a4chat-nav-pulse {
  0%   { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.6); }
}

/* ── Preloader Smooth Hide ──────────────────────────────────── */
.a4chat-preloader-hide {
  animation: a4chat-preloader-hide 0.55s ease forwards;
}
@keyframes a4chat-preloader-hide {
  to { opacity: 0; transform: scale(1.04); pointer-events: none; }
}

/* ── Sidebar Nav Link Transition ────────────────────────────── */
.sidebar-nav-link,
.bottom-nav-item {
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.sidebar-nav-link:hover,
.bottom-nav-item:hover {
  transform: translateX(3px);
}

/* ── Button Press Feedback ──────────────────────────────────── */
button:active,
.btn:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}