/* One picker for both customer and staff composers. Inline layout avoids covering unread messages. */
[data-im-workspace] #pickEmoji {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
}
[data-im-workspace] #pickEmoji svg {
 width: 20px;
 height: 20px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.7;
 stroke-linecap: round;
 stroke-linejoin: round;
}
[data-im-workspace] .im-emoji-panel {
 display: flex;
 flex-direction: column;
 min-height: 0;
 /* Pixel fallback also works in WebViews that reject dynamic viewport units. */
 max-height: 280px;
 max-height: var(--im-emoji-max-height, 280px);
 overflow: hidden;
 margin: 0 0 10px;
 padding: 10px;
 border: 1px solid var(--line);
 border-radius: 12px;
 background: white;
 color: var(--ink);
}
[data-im-workspace] .im-emoji-heading {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}
[data-im-workspace] .im-emoji-heading strong {
 margin-right: auto;
 font-size: 16px;
}
[data-im-workspace] .im-emoji-heading input {
 flex: 1;
 width: 100%;
 max-width: 260px;
 min-height: 44px;
 font-size: 16px;
 padding: 8px;
}
[data-im-workspace] .im-emoji-close {
 display: grid;
 place-items: center;
 width: 44px;
 flex-shrink: 0;
 padding: 8px;
}
[data-im-workspace] .im-emoji-close svg {
 width: 20px;
 height: 20px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
}
[data-im-workspace] .im-emoji-tabs {
 display: flex;
 gap: 8px;
 margin-top: 8px;
 flex-shrink: 0;
 overflow-x: auto;
 overscroll-behavior: contain;
}
[data-im-workspace] .im-emoji-tabs button {
 flex-shrink: 0;
 padding: 6px 10px;
 font-size: 13px;
 border-color: transparent;
 background: transparent;
}
[data-im-workspace] .im-emoji-tabs button[aria-pressed=true] {
 border-color: var(--line);
 background: var(--bg);
 font-weight: 600;
}
[data-im-workspace] .im-emoji-grid {
 flex: 1 1 auto;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
 gap: 8px;
 min-height: 0;
 overflow-y: auto;
 overscroll-behavior: contain;
 margin-top: 8px;
 padding: 3px;
}
[data-im-workspace] .im-emoji-grid .im-emoji-item {
 display: grid;
 place-items: center;
 height: 44px;
 padding: 0;
 border: 0;
 background: transparent;
 font: 28px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
[data-im-workspace] .im-emoji-grid .im-emoji-item:hover {
 background: var(--bg);
}
[data-im-workspace] .im-emoji-panel :focus-visible {
 outline: 2px solid var(--primary);
 outline-offset: -2px;
}
[data-im-workspace] .im-emoji-status {
 flex-shrink: 0;
 margin: 0;
 color: var(--muted);
 font-size: 13px;
 overflow-wrap: anywhere;
}
[data-im-workspace] .im-emoji-status:not(:empty) {
 padding: 8px 2px;
}
@media(max-width:480px) {
 [data-im-workspace] .im-emoji-heading strong { display: none; }
 [data-im-workspace] .im-emoji-heading input { max-width: none; }
 [data-im-workspace] .im-emoji-panel { padding: 8px; }
 [data-im-workspace] .im-emoji-tabs { gap: 8px; }
 [data-im-workspace] .composer-tools { flex-wrap: wrap; }
}
@media(max-height:600px) {
 [data-im-workspace] .im-emoji-panel { max-height: var(--im-emoji-max-height, 168px); }
}
[data-im-workspace] footer.im-emoji-open { max-height: none; }
@media(max-height:500px) {
 [data-im-workspace] footer.im-emoji-open { padding-top: 4px; padding-bottom: 4px; }
 [data-im-workspace] footer.im-emoji-open .im-emoji-panel { padding: 6px; margin-bottom: 4px; }
 [data-im-workspace] footer.im-emoji-open #compose { padding: 4px; }
 [data-im-workspace] footer.im-emoji-open .im-emoji-heading strong { display: none; }
 [data-im-workspace] footer.im-emoji-open #notice:empty { display: none; }
}