/* Emotes: pictures inside text, the picker and the creator page. Works with the Skitzly theme on or off. */

/* ---------------------------------------------------------------- In text */
.skz-emote { display: inline-block; width: 1.75rem; height: 1.75rem; object-fit: contain; vertical-align: -0.45em; margin: 0 .08em; }
.skz-emote--gif { display: block; width: auto; height: auto; max-width: min(10rem, 100%); max-height: 10rem; margin: .25rem 0; border-radius: .5rem; }
.reel-comment-message .skz-emote--gif, .chat-message-content .skz-emote--gif { max-width: min(7.5rem, 100%); max-height: 7.5rem; }

@media (prefers-reduced-motion: reduce) {
    .skz-emote-picker__item img { animation: none; }
}

/* ---------------------------------------------------------------- Button next to a message box */
.skz-emote-button { flex: 0 0 auto; border: 0; background: rgba(128, 128, 128, .16); color: inherit; border-radius: 999px; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .6rem; font-weight: 700; line-height: 1; margin-left: .35rem; }
.skz-emote-button:hover, .skz-emote-button[aria-expanded="true"] { background: rgba(128, 128, 128, .3); }
.skz-emote-button:focus-visible { outline: 3px solid #7c5cff; outline-offset: 2px; }
/* Message boxes that fill their row: the button sits on the same line. */
textarea.new-comment-textarea + .skz-emote-button, textarea.messageBoxInput + .skz-emote-button, #messageText + .skz-emote-button { align-self: flex-end; }

/* ---------------------------------------------------------------- Picker (in the page flow, above the box) */
.skz-emote-picker { position: relative; width: 100%; max-width: 26rem; margin: 0 0 .5rem; border: 1px solid rgba(128, 128, 128, .35); border-radius: .75rem; background: #fff; color: #1b1e24; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); overflow: hidden; z-index: 3; }
.skz-emote-picker__tabs { display: flex; align-items: stretch; border-bottom: 1px solid rgba(128, 128, 128, .25); }
.skz-emote-picker__tab { flex: 1 1 0; min-height: 2.75rem; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font-size: .82rem; font-weight: 600; padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skz-emote-picker__tab.is-active { border-bottom-color: #7c5cff; }
.skz-emote-picker__close { flex: 0 0 2.75rem; min-height: 2.75rem; border: 0; background: none; color: inherit; font-size: 1rem; font-weight: 700; }
.skz-emote-picker__tab:focus-visible, .skz-emote-picker__close:focus-visible, .skz-emote-picker__item:focus-visible { outline: 3px solid #7c5cff; outline-offset: -3px; }
.skz-emote-picker__body { max-height: 11rem; overflow-y: auto; padding: .4rem; -webkit-overflow-scrolling: touch; }
.skz-emote-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .15rem; }
.skz-emote-picker__group { font-size: .75rem; font-weight: 700; opacity: .75; padding: .35rem .25rem .15rem; }
.skz-emote-picker__item { border: 0; background: none; border-radius: .5rem; min-width: 2.75rem; min-height: 2.75rem; padding: .3rem; display: flex; align-items: center; justify-content: center; }
.skz-emote-picker__item:hover { background: rgba(124, 92, 255, .14); }
.skz-emote-picker__item img { width: 2rem; height: 2rem; object-fit: contain; }
.skz-emote-picker__item.is-locked img { opacity: .4; filter: grayscale(1); }
.skz-emote-picker__empty { margin: .75rem .5rem; font-size: .85rem; opacity: .75; }
.skz-emote-picker__note { min-height: 0; padding: 0 .6rem; font-size: .78rem; }
.skz-emote-picker__note:not(:empty) { padding: .35rem .6rem .5rem; border-top: 1px solid rgba(128, 128, 128, .25); }

/* Phones: the panel uses the full width above the box and stays short, so the box and the keyboard both fit. */
@media (max-width: 575.98px) {
    .skz-emote-picker { max-width: none; }
    .skz-emote-picker__body { max-height: 8.5rem; }
}

/* ---------------------------------------------------------------- Creator page */
.skz-emote-studio__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.skz-emote-studio__card { border: 1px solid rgba(128, 128, 128, .3); border-radius: .75rem; padding: .75rem; text-align: center; }
.skz-emote-studio__card img { max-width: 100%; height: 4rem; object-fit: contain; }
.skz-emote-studio__code { font-family: monospace; font-size: .8rem; word-break: break-all; display: block; margin: .4rem 0 .25rem; }
/* Non-members: the way to unlock the Skitzly+ set, under the locked emotes. */
.skz-emote-picker__cta { display: block; margin: .5rem .6rem .1rem; padding: .4rem .75rem; border-radius: 999px; text-align: center; font-size: .82rem; font-weight: 700; background: #e8c22e; color: #0b0b0b; text-decoration: none; }
.skz-emote-picker__cta:hover, .skz-emote-picker__cta:focus { color: #0b0b0b; text-decoration: none; filter: brightness(1.06); }