/* ZCF custom emoji system v1 */
.zcf-emoji {
    display: inline-block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: -0.55em;
    margin-inline: 0.08em;
}
.zcf-emoji--inline {
    width: 2.35em;
    height: 2.35em;
}
.zcf-emoji-sticker-pocket {
    display: block;
    width: 100%;
    margin: .55rem 0;
    line-height: 1;
}
.zcf-emoji--sticker {
    display: block;
    width: min(118px, 38vw);
    height: auto;
    margin: 0;
    vertical-align: initial;
}
.zcf-emoji--sticker.zcf-emoji--flag {
    width: min(102px, 34vw);
}
.zcf-emoji-picker {
    margin-block: .55rem;
}
.zcf-emoji-picker .zcf-composer-disclosure-content {
    display: block;
    padding: .75rem;
}
.zcf-emoji-picker-tabs {
    display: flex;
    align-items: center;
    gap: .35rem;
    overflow-x: auto;
    padding: 0 0 .6rem;
    scrollbar-width: thin;
}
.zcf-emoji-picker-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .4rem .7rem;
    border: 1px solid var(--zcf-border, #B8CBD9);
    border-radius: 999px;
    background: var(--zcf-panel, #fff);
    color: var(--zcf-text-2, #405466);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.zcf-emoji-picker-tab[aria-selected="true"] {
    border-color: var(--zcf-accent, #1E75A8);
    color: var(--zcf-accent, #1E75A8);
    background: var(--zcf-panel-2, #F5F9FC);
}
.zcf-emoji-picker-tab:focus-visible,
.zcf-emoji-picker-button:focus-visible {
    outline: 2px solid var(--zcf-accent, #1E75A8);
    outline-offset: 2px;
}
.zcf-emoji-picker-panel {
    margin-top: .2rem;
}
.zcf-emoji-picker--enhanced .zcf-emoji-picker-panel[hidden] {
    display: none;
}
.zcf-emoji-picker-panel-title {
    margin: .15rem 0 .55rem;
    font-size: .85rem;
    color: var(--zcf-muted, #6B7C89);
}
.zcf-emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: .38rem;
    max-height: 286px;
    overflow-y: auto;
    padding: .15rem;
}
.zcf-emoji-picker-button {
    position: relative;
    min-width: 0;
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: .22rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.zcf-emoji-picker-button:hover {
    border-color: var(--zcf-border, #B8CBD9);
    background: var(--zcf-panel-2, #F5F9FC);
}
.zcf-emoji-picker-button img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    pointer-events: none;
}
.zcf-standard-emoji-button {
    font-size: 1.5rem;
    line-height: 1;
}
.zcf-emoji-picker-noscript {
    margin: .5rem 0 0;
    color: var(--zcf-muted, #6B7C89);
    font-size: .82rem;
}
body[data-zcf-skin="neon"] .zcf-emoji-picker-tab,
body[data-zcf-skin="neon"] .zcf-emoji-picker-button {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
    color: var(--zcf-text-2, #B7BDC7);
}
body[data-zcf-skin="neon"] .zcf-emoji-picker-tab[aria-selected="true"] {
    border-color: rgba(0,229,255,.30);
    background: rgba(0,229,255,.10);
    color: #00E5FF;
}
body[data-zcf-skin="neon"] .zcf-emoji-picker-button:hover {
    border-color: rgba(0,229,255,.30);
    background: rgba(0,229,255,.08);
}
@media (max-width: 430px) {
    .zcf-emoji-picker .zcf-composer-disclosure-content { padding: .55rem; }
    .zcf-emoji-picker-grid { grid-template-columns: repeat(5, minmax(44px, 1fr)); max-height: 250px; }
    .zcf-emoji--inline { width: 2.15em; height: 2.15em; }
    .zcf-emoji--sticker { width: min(108px, 38vw); }
}

/* ZCF artwork copy deterrents. Browser-visible images can still be captured. */
.zcf-emoji,
.zcf-emoji-picker-button--custom,
.zcf-emoji-picker-button--custom img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}