/* ============================================================
   Muhabbetci — Efekt paneli ve animasyon stilleri
   14 kategori · her efektin kendi hareketi
   ============================================================ */

.fx-overlay {
  position: absolute; inset: 0;
  background: rgba(5,7,12,.66);
  backdrop-filter: blur(3px);
  z-index: 90;
  animation: fadeIn .18s ease;
}

.fx-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.97);
  width: min(820px, calc(100% - 32px));
  height: min(660px, calc(100% - 56px));
  background: linear-gradient(180deg, var(--bg-2), #0f1420);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: 92;
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fx-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- başlık ---- */
.fx-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.fx-head-ico { font-size: 20px; }
.fx-head-meta { flex: 1 1 auto; min-width: 0; }
.fx-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.fx-sub { font-size: 11.5px; color: var(--txt-mute); }
.fx-sub b { color: #9dc0ff; }

/* ---- arama ---- */
.fx-search { flex: 0 0 auto; padding: 12px 16px 8px; }
.fx-search input {
  width: 100%;
  padding: 11px 14px;
  background: #0a0e16;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fx-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,140,255,.14);
}
.fx-search input::placeholder { color: var(--txt-mute); }

/* ---- kategoriler ---- */
.fx-chips {
  flex: 0 0 auto;
  display: flex; gap: 6px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fx-chips::-webkit-scrollbar { display: none; }
.fx-chip {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--txt-mute);
  white-space: nowrap;
  transition: all .15s;
  flex: 0 0 auto;
}
.fx-chip:hover { color: var(--txt-dim); }
.fx-chip.active {
  background: rgba(79,140,255,.16);
  border-color: rgba(79,140,255,.44);
  color: #9dc0ff;
}
.fx-chip-n {
  display: inline-block;
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 800;
  opacity: .6;
}

/* ---- ızgara ---- */
.fx-grid-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 16px 12px;
  min-height: 0;
  scrollbar-width: thin;
}
.fx-grid-wrap::-webkit-scrollbar { width: 8px; }
.fx-grid-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.fx-tile {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .12s, border-color .15s, background .15s;
}
.fx-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(79,140,255,.55);
  background: rgba(79,140,255,.11);
}
.fx-tile.picked {
  border-color: var(--accent);
  background: rgba(79,140,255,.18);
  box-shadow: 0 0 0 2px rgba(79,140,255,.26);
}
.fx-emoji { font-size: 26px; line-height: 1; }
.fx-name {
  font-size: 9.5px; font-weight: 600;
  color: var(--txt-mute);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.fx-tile.picked .fx-name { color: #9dc0ff; }

/* ============================================================
   KUTU İÇİ HAREKET — her efekt kendi animasyonunu alır
   ============================================================ */

/* pop — hafif büyüyüp küçülür */
.fx-a-pop .fx-emoji { animation: fxPop2 1.8s ease-in-out infinite; }
@keyframes fxPop2 {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.16); }
}

/* bounce — zıplar */
.fx-a-bounce .fx-emoji { animation: fxBounce2 1.3s cubic-bezier(.28,.84,.42,1) infinite; }
@keyframes fxBounce2 {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-6px); }
  60%     { transform: translateY(-2px); }
}

/* spin — döner */
.fx-a-spin .fx-emoji { animation: fxSpin2 2.6s linear infinite; }
@keyframes fxSpin2 { to { transform: rotate(360deg); } }

/* fly — yukarı süzülür, söner */
.fx-a-fly .fx-emoji { animation: fxFly2 2.2s ease-in-out infinite; }
@keyframes fxFly2 {
  0%   { transform: translateY(4px) scale(.9); opacity: .35; }
  45%  { transform: translateY(-4px) scale(1.12); opacity: 1; }
  100% { transform: translateY(-12px) scale(.9); opacity: 0; }
}

/* shake — titrer */
.fx-a-shake .fx-emoji { animation: fxShake2 .7s ease-in-out infinite; }
@keyframes fxShake2 {
  0%,100% { transform: translateX(0) rotate(0); }
  25%     { transform: translateX(-3px) rotate(-6deg); }
  75%     { transform: translateX(3px) rotate(6deg); }
}

/* rain — aşağı düşer, baştan gelir */
.fx-a-rain .fx-emoji { animation: fxRain2 2s linear infinite; }
@keyframes fxRain2 {
  0%   { transform: translateY(-12px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* burst — patlar gibi büyür, halka yayar */
.fx-a-burst .fx-emoji { animation: fxBurst2 1.9s ease-out infinite; }
@keyframes fxBurst2 {
  0%   { transform: scale(.7); opacity: .5; }
  30%  { transform: scale(1.28); opacity: 1; }
  60%  { transform: scale(1); opacity: .9; }
  100% { transform: scale(.7); opacity: .5; }
}
.fx-a-burst::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1px solid rgba(79,140,255,.55);
  animation: fxRing2 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes fxRing2 {
  0%   { transform: scale(.4); opacity: .8; }
  100% { transform: scale(5.5); opacity: 0; }
}

/* zoom — yaklaşıp uzaklaşır, hafif döner */
.fx-a-zoom .fx-emoji { animation: fxZoom2 1.7s ease-in-out infinite; }
@keyframes fxZoom2 {
  0%,100% { transform: scale(1) rotate(-3deg); }
  50%     { transform: scale(1.3) rotate(3deg); }
}

.fx-empty {
  text-align: center;
  font-size: 12.5px;
  color: var(--txt-mute);
  font-style: italic;
  padding: 40px 0;
}

/* ---- alt bar ---- */
.fx-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.2);
}
.fx-sent-preview {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--txt-dim);
  min-width: 0;
}
.fx-prev-emoji { font-size: 22px; line-height: 1; display: inline-block; }
.fx-send-btn {
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(79,140,255,.36);
  transition: filter .15s, transform .1s;
}
.fx-send-btn:hover { filter: brightness(1.12); }
.fx-send-btn:active { transform: scale(.97); }

/* ============================================================
   Sohbete düşen efekt baloncuğu — animasyon efektten gelir
   ============================================================ */
.msg.effect { justify-content: flex-start; }
.fx-bubble {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(79,140,255,.14), rgba(123,92,255,.12));
  border: 1px solid rgba(79,140,255,.34);
  overflow: hidden;
}
.fx-bubble::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: fxSweep 2.4s ease-in-out infinite;
}
@keyframes fxSweep {
  0% { left: -60%; } 60% { left: 130%; } 100% { left: 130%; }
}
.fx-bubble-emoji {
  font-size: 30px; line-height: 1;
  display: inline-block;
  animation: fxPop .5s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes fxPop {
  0% { transform: scale(.3) rotate(-14deg); opacity: 0; }
  70% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.fx-bubble-txt { display: flex; flex-direction: column; gap: 1px; }
.fx-bubble-name { font-size: 12.5px; font-weight: 700; color: var(--txt); }
.fx-bubble-sub { font-size: 10.5px; color: var(--txt-mute); }

/* ============================================================
   EKRANDA UÇUŞAN EFEKT — animasyona göre farklı yörünge
   ============================================================ */
.fx-fly {
  position: fixed;
  font-size: 34px;
  z-index: 500;
  pointer-events: none;
}
.fx-fly.fx-a-fly    { animation: fxFlyUp 1.5s ease-out forwards; }
.fx-fly.fx-a-bounce { animation: fxFlyBounce 1.5s ease-out forwards; }
.fx-fly.fx-a-spin   { animation: fxFlySpin 1.5s ease-out forwards; }
.fx-fly.fx-a-shake  { animation: fxFlyShake 1.5s ease-out forwards; }
.fx-fly.fx-a-rain   { animation: fxFlyRain 1.6s ease-out forwards; }
.fx-fly.fx-a-zoom   { animation: fxFlyZoom 1.5s ease-out forwards; }
.fx-fly.fx-a-pop    { animation: fxFlyPop 1.4s ease-out forwards; }
.fx-fly.fx-a-burst  { animation: fxFlyBurst 1.6s ease-out forwards; }

@keyframes fxFlyUp {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  22%  { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -240%) scale(.7); opacity: 0; }
}
@keyframes fxFlyPop {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.55); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(.5); opacity: 0; }
}
@keyframes fxFlyBounce {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.4) translateY(0); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.1) translateY(-30px); }
  65%  { transform: translate(-50%, -50%) scale(1.2) translateY(-10px); }
  100% { transform: translate(-50%, -50%) scale(.8) translateY(-90px); opacity: 0; }
}
@keyframes fxFlySpin {
  0%   { transform: translate(-50%, -50%) rotate(0) scale(.4); opacity: 0; }
  25%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(720deg) scale(.8) translateY(-120px); opacity: 0; }
}
@keyframes fxFlyShake {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  35%  { transform: translate(calc(-50% - 14px), -50%) scale(1.3) rotate(-10deg); }
  50%  { transform: translate(calc(-50% + 14px), -50%) scale(1.3) rotate(10deg); }
  65%  { transform: translate(calc(-50% - 8px), -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(.9) translateY(-70px); opacity: 0; }
}
@keyframes fxFlyRain {
  0%   { transform: translate(-50%, -180%) scale(.6); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  70%  { transform: translate(-50%, 20%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, 140%) scale(.7); opacity: 0; }
}
@keyframes fxFlyZoom {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(2); opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.6) translateY(-100px); opacity: 0; }
}
@keyframes fxFlyBurst {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.9); opacity: 1; }
  45%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6) translateY(-110px); opacity: 0; }
}

/* ============================================================
   PARÇACIK YAĞMURU — burst ve rain efektlerinde uçuşan parçalar
   ============================================================ */
.fx-spark {
  position: fixed;
  font-size: 18px;
  z-index: 499;
  pointer-events: none;
  animation: fxSpark 1.4s ease-out forwards;
}
@keyframes fxSpark {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 620px) {
  .fx-panel { width: 100%; height: 100%; border-radius: 0; top: 0; left: 0; transform: none; }
  .fx-panel.open { transform: none; }
  .fx-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .fx-emoji { font-size: 22px; }
  .fx-chip-n { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-emoji,
  .fx-a-burst::after,
  .fx-bubble::after,
  .fx-bubble-emoji,
  .fx-fly,
  .fx-spark { animation: none !important; }
}