/* ==========================================================================
   Groyt — Animasyonlu komut önizlemeleri, 4 Ekim Part 3 (js/previews-r7.js)
   Sahne kabı .r4s.r5s (previews-r4/r5.css): sabit yükseklik, en yeni mesaj altta.
   + katalog kartındaki prefix satırı
   ========================================================================== */
.r4s.r5s.r7-tall { height: 420px; }

.r7-status { font-size: 11px; color: var(--text-secondary); }
.r7-status b { color: #fff; }

/* ✏️ Mesajlar & Görünüm penceresi */
.r7-modal-card { width: min(290px, 100%); }
.r7-mfield { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.r7-mfield small { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.r7-mfield > span {
  min-height: 26px; padding: 5px 8px; border-radius: 5px; font-size: 11px; color: var(--text-secondary);
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.r7-mtyping { color: #fff !important; border-color: rgba(88, 101, 242, .7) !important; }
.r7-mtyping::after { content: ''; display: inline-block; width: 1.5px; height: 11px; margin-left: 1px; vertical-align: -1px; background: #fff; animation: r5Caret 1s steps(1) infinite; }
.r7-mrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px; }
.r7-mselect::after { content: ' ▾'; color: var(--text-tertiary); }
.r7-mselect.is-on { color: #6ee7b7 !important; border-color: rgba(34, 197, 94, .55) !important; }

/* Resimli karşılama kartı (örnek) */
.r7-card {
  display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: 8px; min-height: 76px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 193, 7, .28), transparent 55%), linear-gradient(135deg, #1b1f33, #0e1020);
  border: 1px solid rgba(255, 193, 7, .35); animation: r4Up .45s var(--ease-out, ease) both;
}
.r7-card-av {
  display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%;
  font: 800 20px 'Orbitron', sans-serif; color: #1a1400; background: linear-gradient(135deg, #FFDA47, #f59e0b);
  box-shadow: 0 0 0 3px #0e1020, 0 0 0 5px rgba(255, 218, 71, .7);
}
.r7-card-text { display: flex; flex-direction: column; min-width: 0; }
.r7-card-text small { font: 800 9px 'Orbitron', sans-serif; letter-spacing: .18em; color: #FFDA47; }
.r7-card-text b { font-size: 17px; color: #fff; line-height: 1.2; }
.r7-card-text em { font-style: normal; font-size: 10.5px; color: var(--text-secondary); }

/* 📩 DM: dosya çipi, GIF ve DM başlığı */
.r7-file b { color: var(--blue-bright); }
.r7-gifnote { font-size: 10.5px; color: #6ee7b7; }
.r7-gifnote b { color: #fff; font-weight: 600; }
.r7-gifwrap { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s var(--ease-out, ease); }
.r7-gifwrap.is-in { opacity: 1; transform: none; }
.r7-gif {
  position: relative; height: 92px; margin-top: 2px; border-radius: 6px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(120deg, #3b2a5c, #1e3a8a, #7c3aed, #be185d);
  background-size: 300% 300%; animation: r7Bg 4s ease-in-out infinite alternate;
}
.r7-gif em {
  position: absolute; left: 6px; bottom: 5px; padding: 1px 5px; border-radius: 3px;
  font: 800 8.5px 'Orbitron', sans-serif; font-style: normal; letter-spacing: .1em; color: #fff; background: rgba(0, 0, 0, .55);
}
.r7-wave { font-size: 38px; line-height: 1; transform-origin: 70% 80%; animation: r7Wave 1.1s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.r7-conf {
  position: absolute; top: -10px; left: calc(8% + var(--i) * 13%); width: 6px; height: 9px; border-radius: 1px;
  background: hsl(calc(var(--i) * 52deg), 90%, 65%); animation: r7Fall 2.2s linear infinite; animation-delay: calc(var(--i) * -.33s);
}
.r7-dmhead { margin: 2px 0 -2px 4px; font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); }
.r7-gicon {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font: 800 7px 'Space Grotesk', sans-serif; color: #fff; background: linear-gradient(135deg, #be185d, #7c3aed);
}
@keyframes r7Wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 60% { transform: rotate(-12deg); } }
@keyframes r7Fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(115px) rotate(320deg); } }
@keyframes r7Bg { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .r7-gif, .r7-wave, .r7-conf, .r7-mtyping::after { animation: none !important; }
  .r7-conf { display: none; }
  .r7-gifwrap { transition: none; }
}

/* ==========================================================================
   Katalog kartı: prefix takma adları (küçük, gri)
   ========================================================================== */
.command-prefix {
  margin: -2px 0 6px; font-size: 11.5px; line-height: 1.45; color: var(--text-tertiary);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word;
}