/* MSN MESSENGER EMOTICONS - PIXEL STYLE SMALL ICONS (2000's) */

/* Basic emoticon sprite-like element */
.emoticon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 2px;
    image-rendering: pixelated; /* keep pixel-art feel when scaled */
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

/* Small pixel-style SVG icons for classic MSN emoticons */
.emote-smile { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffdd55'/><circle cx='5' cy='6' r='1' fill='%23000'/><circle cx='11' cy='6' r='1' fill='%23000'/><path d='M4 10 q4 3 8 0' stroke='%23000' stroke-width='1' fill='none' stroke-linecap='round'/></svg>"); }
.emote-sad { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffe0cc'/><circle cx='5' cy='6' r='1' fill='%23000'/><circle cx='11' cy='6' r='1' fill='%23000'/><path d='M4 12 q4 -3 8 0' stroke='%23000' stroke-width='1' fill='none' stroke-linecap='round'/></svg>"); }
.emote-wink { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffdd55'/><circle cx='11' cy='6' r='1' fill='%23000'/><path d='M3 6 h3' stroke='%23000' stroke-width='1'/><path d='M4 10 q4 3 8 0' stroke='%23000' stroke-width='1' fill='none' stroke-linecap='round'/></svg>"); }
.emote-tongue { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffdd55'/><circle cx='5' cy='6' r='1' fill='%23000'/><circle cx='11' cy='6' r='1' fill='%23000'/><path d='M4 10 q4 6 8 0' stroke='%23000' stroke-width='1' fill='%23ff6b6b' stroke-linecap='round'/></svg>"); }
.emote-cool { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%2399ccff'/><rect x='2' y='6' width='12' height='4' fill='%23000'/></svg>"); }
.emote-laugh { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffdd55'/><circle cx='5' cy='6' r='1' fill='%23000'/><circle cx='11' cy='6' r='1' fill='%23000'/><path d='M3 9 q5 6 10 0' stroke='%23000' stroke-width='1' fill='none' stroke-linecap='round'/></svg>"); }
.emote-surprise { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffef99'/><circle cx='5' cy='7' r='1.2' fill='%23000'/><circle cx='11' cy='7' r='1.2' fill='%23000'/><circle cx='8' cy='10' r='1.4' fill='%23000'/></svg>"); }
.emote-neutral { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffdd55'/><circle cx='5' cy='6' r='1' fill='%23000'/><circle cx='11' cy='6' r='1' fill='%23000'/><rect x='4' y='10' width='8' height='1' fill='%23000'/></svg>"); }
.emote-angry { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffb3b3'/><path d='M3 5 q5 -3 10 0' stroke='%23000' stroke-width='1' fill='none'/><circle cx='5' cy='8' r='1' fill='%23000'/><circle cx='11' cy='8' r='1' fill='%23000'/><path d='M4 12 q4 -3 8 0' stroke='%23000' stroke-width='1' fill='none'/></svg>"); }
.emote-cry { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffddff'/><circle cx='5' cy='6' r='1' fill='%23000'/><circle cx='11' cy='6' r='1' fill='%23000'/><path d='M4 11 q4 -3 8 0' stroke='%23000' stroke-width='1' fill='none'/><path d='M5 12 v2' stroke='%2300ff' stroke-width='1'/></svg>"); }

/* Emoticon panel (compact) */
.emoticon-panel {
    background: #ece9d8;
    border: 1px solid #808080;
    padding: 4px;
    margin: 3px 0;
    font-size: 8pt;
    display: none;
    max-width: 260px;
}

.emoticon-panel.show { display: block; }

.emoticon-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoticon-item {
    padding: 2px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    width: 20px;
    height: 20px;
}

.emoticon-item:hover { background: #ddeeff; border: 1px solid #316ac5; }

.emoticon-button { background: #ece9d8; border: 1px outset #ece9d8; padding: 2px 6px; cursor: pointer; font-size: 8pt; margin-right: 3px; }
.emoticon-button:hover { background: #ddeeff; }

/* Converted emoticon inserted into posts */
.emoticon-converted { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin: 0 2px; }

/* Remove animations/sounds - keep things static and retro */