/* A small in-flow composer drawer: no screen-covering overlay or remote artwork. */
.chat-emote { display:inline-flex; width:1.35em; height:1.35em; vertical-align:-.25em; align-items:center; justify-content:center; color:inherit; }
.chat-emote svg { width:100%; height:100%; stroke-width:1.5; }
.chat-emotes { display:grid; gap:12px; min-width:0; margin:12px 0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); }
.chat-emotes header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chat-emotes h3 { font-size:var(--text-body,1rem); font-weight:750; margin:0; }
.chat-emotes>p { margin:0; font-size:var(--text-meta,.875rem); color:var(--muted); }
.chat-emotes-close { display:inline-flex; flex:none; width:44px; height:44px; align-items:center; justify-content:center; border:0; border-radius:9px; color:var(--green); background:transparent; }
.chat-emotes-close:hover,.chat-emotes-close:focus-visible { background:var(--light); }
.chat-emotes-filters { display:flex; gap:12px; flex-wrap:wrap; }
.chat-emotes-filters label { display:grid; flex:1 1 150px; min-width:0; gap:5px; font-size:var(--text-meta,.875rem); font-weight:650; }
.chat-emotes-filters :is(input,select) { width:100%; min-height:46px; min-width:0; padding:9px 10px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; }
.chat-emotes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; max-height:320px; overflow-y:auto; overscroll-behavior:contain; padding:3px; scrollbar-color:var(--muted) var(--paper); scrollbar-width:thin; }
.chat-emotes-grid>button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:76px; padding:7px; border:0; border-radius:8px; color:var(--green); background:var(--paper); }
.chat-emotes-grid>button:hover,.chat-emotes-grid>button:focus-visible { background:var(--light); }
.chat-emotes-grid .chat-emote { width:28px; height:28px; }
.chat-emotes-grid>button>span:last-child { font-size:var(--text-micro,.8125rem); line-height:1.35; overflow-wrap:anywhere; text-align:center; }
.chat-emotes :is(button,input,select):focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media (max-width:400px) { .chat-emotes { padding:10px; } }
@media (forced-colors:active) { .chat-emotes,.chat-emotes-grid>button { border:1px solid CanvasText; } .chat-emotes-grid>button:hover { outline:1px solid Highlight; } }