/* Existing CSS (keep this as it might be needed for other functionality) */
.rin-qc {
    display: none;
    background: #444;
    color: #fff;
    border-radius: 4px;
    font: 12px Open Sans, Helvetica Neue, Helvetica, Arial;
    padding: 6px 4px;
    position: absolute;
    z-index: 1001;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.rin-qc::before {
    content: ' ';
    position: absolute;
    top: -6px;
    left: 75%;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

.rin-qc span {
    cursor: pointer;
    margin: 0 12px;
}

/* New CSS for Smilies Pop-Up */
.rin-qc .smilies-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); /* Adjust column width as needed */
    gap: 5px; /* Space between smilies */
    max-width: 300px; /* Adjust pop-up width */
    max-height: 200px; /* Adjust pop-up height */
    overflow-y: auto; /* Enable scrolling if there are many smilies */
    padding: 10px; /* Padding inside the pop-up */
}

.rin-qc .smilies-container img {
    width: 20px; /* Fixed width for smilies */
    height: 20px; /* Fixed height for smilies */
    object-fit: contain; /* Ensures smilies maintain aspect ratio */
    cursor: pointer; /* Make smilies clickable */
}

.rin-qc .smilies-container img:hover {
    transform: scale(1.1); /* Slightly enlarge smilies on hover */
    transition: transform 0.2s ease; /* Smooth hover effect */
}