.message-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.reaction-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:36px;padding:4px 9px;border:1px solid var(--border);border-radius:18px;background:var(--paper);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.reaction-chip>span:first-child{font-size:18px;line-height:1.2}
.reaction-chip[aria-pressed=true]{border-color:var(--purple);background:var(--lavender);color:var(--purple)}
.reaction-chip:hover:not(:disabled){border-color:var(--purple)}
.message-context-menu .reaction-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px 0 7px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.message-context-menu .reaction-picker button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:5px;font-size:23px;border-radius:10px}
.message-sticker{max-width:100%}
.message-bubble:has(.message-sticker){background:transparent;border-color:transparent;padding:0;box-shadow:none}
.message-bubble:has(.message-sticker) .original-text:empty{display:none}
.sticker-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;background:var(--paper);color:var(--ink);border:1px solid var(--border);border-radius:20px;overflow:auto}
.sticker-dialog::backdrop{background:#0006}
.sticker-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sticker-dialog-header h2{font-size:19px;margin:0}
.sticker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sticker-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 5px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.sticker-grid button:hover:not(:disabled){background:var(--lavender);border-color:var(--purple)}
.sticker-dialog p{font-size:12px;line-height:1.5;color:var(--muted);margin:14px 0 0}
:is(.reaction-chip,.reaction-picker button,.sticker-grid button):focus-visible{outline:2px solid var(--purple);outline-offset:2px}
:is(.reaction-chip,.reaction-picker button,.sticker-grid button):disabled{opacity:.55;cursor:wait}
@media(max-width:360px){.sticker-dialog{padding:14px}.sticker-grid{gap:4px}}
/* Each illustration occupies one cell of the original transparent atlas. */
.sticker-art{display:block;width:100%;aspect-ratio:1;background-size:300% 300%;background-repeat:no-repeat;flex:none}
.pack-panda{background-image:url('stickers/panda.png')}.pack-redpanda{background-image:url('stickers/redpanda.png')}.pack-kitten{background-image:url('stickers/kitten.png')}
.cell-0{background-position:0 0}.cell-1{background-position:50% 0}.cell-2{background-position:100% 0}.cell-3{background-position:0 50%}.cell-4{background-position:50% 50%}.cell-5{background-position:100% 50%}.cell-6{background-position:0 100%}.cell-7{background-position:50% 100%}.cell-8{background-position:100% 100%}
.message-sticker{width:180px;padding:4px 2px;line-height:1.35;text-align:center}
.sticker-caption{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.35}
.message-sticker .sticker-caption{display:inline-flex;max-width:100%;padding:5px 12px 6px;background:var(--paper);border:1px solid var(--border);border-radius:16px;color:var(--ink)}
.sticker-caption [lang=ru]{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.sticker-caption [lang=zh]{font-size:16px;color:var(--purple)}
.sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:min(55dvh,470px);overflow:auto;overscroll-behavior:contain;padding:3px}
.sticker-grid .sticker-caption [lang=ru]{font-size:11px}.sticker-grid .sticker-caption [lang=zh]{font-size:14px}
.sticker-packs{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px}
.sticker-packs button{min-height:36px;padding:5px 10px;border:1px solid var(--border);border-radius:18px;background:var(--paper);color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.sticker-packs button[aria-pressed=true]{background:var(--lavender);color:var(--purple);border-color:var(--purple)}
@media(max-width:360px){.sticker-grid{gap:4px}.sticker-packs button{padding:5px 8px;font-size:11px}.sticker-grid .sticker-caption [lang=ru]{font-size:10px}}

/* Account for the painted gutter between atlas rows. */
.cell-3,.cell-4,.cell-5{background-position-y:47%;clip-path:inset(3% 0)}
.cell-6,.cell-7,.cell-8{background-position-y:97.3%}
#messages .message.sticker-message .message-bubble{background:transparent;border:0;padding:0;box-shadow:none}
.app-update-banner{position:fixed;z-index:60;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 20px);padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 6px 24px #0003;font-size:12px}
.app-update-banner span{min-width:0}.app-update-banner button{flex:none;min-height:36px;padding:5px 8px;border:0;border-radius:8px;background:var(--lavender);color:var(--purple);font:inherit;cursor:pointer}