/*
 * Emoji picker, shared by the staff inbox and the visitor widget.
 *
 * Self-contained and prefixed, because it is dropped into two very different
 * hosts: a large legacy Bootstrap theme on one side and a floating 340px
 * window on the other. It inherits nothing from either and states its own box
 * model, having learned on this project that the theme sets content-box with
 * !important and a borrowed width then overflows its container.
 */

.hs-emoji-panel,
.hs-emoji-panel * {
    box-sizing: border-box;
}

.hs-emoji-panel {
    position: absolute;
    /* Above the composer, never below: below is off the bottom of the window
       in the widget and under the fold in the inbox. */
    bottom: calc(100% + 8px);
    /* Physical, deliberately. The button sits at the composer's leading edge,
       which is the right in RTL and the left in LTR, and a logical property
       would pin the panel to whichever edge the writing direction chose —
       hanging it off the screen on one of them. Overridden per host below. */
    left: 0;
    z-index: 30;
    width: 288px;
    /* Never wider than the window it lives in: the widget is 340px. */
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    overflow: hidden;
}

/* Set when there is not enough room above — see open() in chat-emoji.js. */
.hs-emoji-panel.is-below {
    bottom: auto;
    top: calc(100% + 8px);
}

.hs-emoji-panel[hidden] {
    display: none;
}

.hs-emoji-tabs {
    display: flex;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid #f1f3f5;
    background: #f8f9fb;
}

.hs-emoji-tab {
    flex: 1 1 auto;
    border: 0;
    background: none;
    padding: 5px 0;
    border-radius: 7px;
    font-size: 17px;
    line-height: 1.2;
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s, background .12s;
}

.hs-emoji-tab:hover {
    opacity: 1;
}

.hs-emoji-tab.is-active {
    opacity: 1;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

.hs-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    padding: 8px;
    /* Eight rows of the grid. Taller would cover the conversation behind it. */
    height: 216px;
    overflow-y: auto;
    /* Always ltr: the characters have no direction of their own, and in an RTL
       host the grid would otherwise fill from the right and read backwards
       against the order they are written in. */
    direction: ltr;
}

.hs-emoji-cell {
    border: 0;
    background: none;
    padding: 0;
    height: 30px;
    border-radius: 6px;
    /* The one place a font stack is worth naming: without it a host font that
       has its own outline glyphs for some of these renders them flat and
       black beside the colour ones. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Segoe UI Symbol", "Android Emoji", sans-serif;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background .1s;
}

.hs-emoji-cell:hover,
.hs-emoji-cell:focus {
    background: #edf2ff;
    outline: none;
}

/* --------------------------------------------------------- staff inbox host */

.chat-composer {
    position: relative;
}

.chat-emoji-btn.is-open {
    color: #4c6ef5;
}

/* ------------------------------------------------------------ widget host */

.hsc-composer-row {
    position: relative;
}

/*
    The widget's window is only 340px wide, so the panel spans the composer
    rather than taking a width of its own.

    Pinned to both edges with width:auto instead of width:100%. Under the
    content-box the host theme forces, a 100% width plus the panel's own border
    resolves two pixels wider than its container and spills; stretched between
    two edges there is no width to add anything to.
*/
.hsc-composer-row .hs-emoji-panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

/*
 * The same 36px box the attach button beside it has. The composer row aligns
 * its children to the bottom (the textarea grows upward), and a bare glyph
 * with no height of its own sank to the very edge instead of sitting level
 * with its neighbours.
 */
.hsc-emoji {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    padding: 0;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    transition: opacity .12s;
}

.hsc-emoji:hover,
.hsc-emoji.is-open {
    opacity: 1;
}