/* CR8MOJI — black & white retro emoji styling + motion.
   Glyphs inherit `currentColor`, so they're monochrome and match the text. */

.cr8moji {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.32em;
  margin: 0 1px;
  color: currentColor;                 /* stays B&W, follows text color */
}
.cr8moji svg { width: 100%; height: 100%; display: block; }

/* picker button in the composer */
.cr8moji-btn {
  flex: 0 0 auto;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel, #111);
  border: 1px solid var(--line, #2a2a2a);
  border-radius: 10px;
  color: var(--text, #fff);
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color .15s, transform .15s;
}
.cr8moji-btn:hover { border-color: var(--brand, #888); transform: translateY(-1px); }

/* the popup panel */
.cr8moji-panel {
  position: absolute;
  bottom: 62px;
  right: 12px;
  width: 292px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-elev, #0d0d0d);
  border: 1px solid var(--line, #2a2a2a);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  z-index: 50;
}
.cr8moji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.cr8moji-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text, #fff);
  cursor: pointer;
  padding: 7px;
}
.cr8moji-cell svg { width: 100%; height: 100%; }
.cr8moji-cell:hover { border-color: var(--brand, #888); background: rgba(255, 255, 255, .05); }
.cr8moji-hint {
  margin-top: 8px;
  text-align: center;
  font-size: .66rem;
  letter-spacing: .5px;
  color: var(--faint, #666);
  text-transform: uppercase;
}
.composer { position: relative; }   /* anchor the panel */

/* ─────────────────────────  MOTION  ─────────────────────────
   Each glyph loops a subtle retro animation so the chat is alive.
   Kept small + GPU-friendly (transform/opacity only).            */
@media (prefers-reduced-motion: no-preference) {
  .cr8-bob     { animation: cr8-bob 2.2s ease-in-out infinite; }
  .cr8-bounce  { animation: cr8-bounce 1.1s ease-in-out infinite; }
  .cr8-droop   { animation: cr8-droop 2.6s ease-in-out infinite; }
  .cr8-tilt    { animation: cr8-tilt 2s ease-in-out infinite; }
  .cr8-slide   { animation: cr8-slide 2.4s ease-in-out infinite; }
  .cr8-spin    { animation: cr8-spin 3s linear infinite; }
  .cr8-shake   { animation: cr8-shake .5s ease-in-out infinite; }
  .cr8-wobble  { animation: cr8-wobble 1.6s ease-in-out infinite; }
  .cr8-launch  { animation: cr8-launch 1.8s ease-in-out infinite; }
  .cr8-float   { animation: cr8-float 3.2s ease-in-out infinite; }
  .cr8-flicker { animation: cr8-flicker .9s steps(2) infinite; }
  .cr8-fall    { animation: cr8-fall 2s ease-in-out infinite; }
  .cr8-swing   { animation: cr8-swing 1.8s ease-in-out infinite; transform-origin: 50% 15%; }
  .cr8-sparkle { animation: cr8-sparkle 1.4s ease-in-out infinite; }
  .cr8-hover   { animation: cr8-float 2.6s ease-in-out infinite; }
  .cr8-flash   { animation: cr8-flash 1.1s steps(2) infinite; }
  .cr8-beat    { animation: cr8-beat 1s ease-in-out infinite; }
  .cr8-shine   { animation: cr8-shine 2s ease-in-out infinite; }
  .cr8-yank    { animation: cr8-yank 2.2s ease-in-out infinite; }
  .cr8-wave    { animation: cr8-wave 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
  /* darting eyes: move the pupils, not the whole glyph */
  .cr8-none .cr8-pupil { animation: cr8-dart 2.4s ease-in-out infinite; }
  .cr8-tear { animation: cr8-teardrop 1.8s ease-in infinite; transform-origin: 50% 0; }
}

@keyframes cr8-bob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes cr8-bounce  { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-4px) scale(1.05)} 60%{transform:translateY(0) scale(.96)} }
@keyframes cr8-droop   { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(2px) rotate(-4deg)} }
@keyframes cr8-tilt    { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes cr8-slide   { 0%,100%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }
@keyframes cr8-spin    { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes cr8-shake   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
@keyframes cr8-wobble  { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg) translateY(-1px)} }
@keyframes cr8-launch  { 0%{transform:translateY(2px) rotate(-3deg)} 50%{transform:translateY(-4px) rotate(3deg)} 100%{transform:translateY(2px) rotate(-3deg)} }
@keyframes cr8-float   { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-4px) rotate(3deg)} }
@keyframes cr8-flicker { 0%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@keyframes cr8-fall    { 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(3px)} }
@keyframes cr8-swing   { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} }
@keyframes cr8-sparkle { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.12);opacity:.75} }
@keyframes cr8-flash   { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes cr8-beat    { 0%,100%{transform:scale(1)} 15%{transform:scale(1.2)} 30%{transform:scale(1)} 45%{transform:scale(1.15)} }
@keyframes cr8-shine   { 0%,100%{transform:rotate(-4deg) scale(1)} 50%{transform:rotate(4deg) scale(1.06)} }
@keyframes cr8-yank    { 0%,60%,100%{transform:translateX(0) skewX(0)} 70%{transform:translateX(-6px) skewX(10deg)} 85%{transform:translateX(2px) skewX(-4deg)} }
@keyframes cr8-wave    { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)} }
@keyframes cr8-dart    { 0%,100%{transform:translateX(-1.4px)} 50%{transform:translateX(1.4px)} }
@keyframes cr8-teardrop{ 0%{transform:translateY(0) scaleY(.6);opacity:0} 30%{opacity:1} 100%{transform:translateY(4px) scaleY(1.1);opacity:0} }