/* Стикеры (rift_stickers.php, rift-stickers.js), owner 2026-11-10. A new element like the chat: its colours are each
   design's chat palette (--rift-chat-*, designs.json; defaults for the plain MyBB view in chat.css), not new values. */
/* --rift-stickers-preview: the largest picture in the picker, five to a row as Telegram shows them (owner 2026-11-10). */
:root{--rift-sticker-size:128px;--rift-stickers-preview:76px;--rift-stickers-width:480px;--rift-stickers-layer:calc(var(--rift-chat-layer,10001) + 1)}

/* In a post, on the text line like the old [img] stickers. A picture larger than 128 shrinks to fit 128×128 whole;
   a smaller one keeps its own size (owner 2026-11-10). Telegram's animated and video stickers are 512 and show 128×128.
   MyBB's global.css has `.post_body img{height:auto}` (0,1,1); `body` and the element list put these rules above it. */
body .rift-sticker:is(img,video,span){display:inline-block;margin:2px;vertical-align:bottom;object-fit:contain}
body .rift-sticker:is(video,span){width:var(--rift-sticker-size);height:var(--rift-sticker-size)}
body .rift-sticker:is(img){width:auto;height:auto;max-width:var(--rift-sticker-size);max-height:var(--rift-sticker-size)}
.rift-sticker-mini{--rift-sticker-size:60px}
/* The memes (RIFT_STICKERS_MEME_PACKS, the «Мемы» tab): 200px in posts, 128px in the picker (owner 2026-11-10, -11). */
.rift-sticker-large{--rift-sticker-size:200px}
/* The pack's own size (--rift-meme-size, set from the catalog) up to 128px: «Мемы 2» 100px, the others 128px. */
.rift-stickers-cell-large{--rift-stickers-preview:min(var(--rift-meme-size,128px),128px)}
.rift-sticker-tgs{position:relative}
.rift-sticker-tgs>img,.rift-stickers-tgs>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rift-sticker-tgs.is-playing>img,.rift-stickers-tgs.is-playing>img{visibility:hidden}
.rift-sticker-anim{position:absolute;inset:0;display:block}
.rift-sticker-anim>svg{display:block}
.rift-standard-emoji{display:inline-block;position:relative;width:1.4em;height:1.4em;vertical-align:-.3em;line-height:1.4}
.rift-standard-emoji.is-playing>.rift-standard-fallback{visibility:hidden}
.rift-standard-emoji>.rift-standard-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rift-stickers-emoji>.rift-standard-emoji{width:28px;height:28px;vertical-align:middle}

/* The picker. */
.rift-stickers{position:absolute;z-index:var(--rift-stickers-layer);display:flex;flex-direction:column;box-sizing:border-box;height:min(460px,70vh);overflow:hidden;border:1px solid var(--rift-chat-line);border-radius:var(--rift-chat-radius);background:var(--rift-chat-surface) var(--rift-chat-surface-image) center top;color:var(--rift-chat-text);box-shadow:0 12px 30px #0007;font:13px/1.4 Verdana,sans-serif;text-align:left}
.rift-stickers[hidden]{display:none}
.rift-stickers :is(button,input,textarea){box-sizing:border-box;font:inherit;color:inherit}
.rift-stickers button{cursor:pointer}
.rift-stickers :is(button,input,textarea):focus-visible{outline:2px solid var(--rift-chat-accent);outline-offset:1px}
/* Telegram's head: three tabs underlined when chosen; the library's gear and the close cross in the corner. */
.rift-stickers-header{display:flex;flex:none;align-items:stretch;gap:2px;padding:0 4px 0 8px;border-bottom:1px solid var(--rift-chat-line)}
.rift-stickers-modes{display:flex;flex:1 1 auto;min-width:0}
/* The chosen tab is a pill in the picker's action colour, the others plain (owner 2026-11-10): in the light design the
   muted and accent colours are the same #617975, so an underline in it was all that told them apart. The
   `.rift-stickers` prefix outweighs `.rift-stickers :is(button…){color:inherit}` and the forum's `button{border-radius}`. */
.rift-stickers .rift-stickers-mode{flex:1 1 0;min-width:0;margin:6px 2px;padding:4px;border:0;border-radius:16px;background:transparent;color:var(--rift-chat-muted);font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rift-stickers .rift-stickers-mode:hover{background:var(--rift-chat-input);color:var(--rift-chat-text)}
.rift-stickers .rift-stickers-mode[aria-selected=true]{background:var(--rift-chat-action);color:var(--rift-chat-action-text)}
.rift-stickers-corner{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent}
.rift-stickers-corner:hover,.rift-stickers[data-view=settings] .rift-stickers-corner[data-action=library]{background:var(--rift-chat-input)}
.rift-stickers[data-view=settings] .rift-stickers-corner[data-action=library] .rift-stickers-icon{stroke:var(--rift-chat-accent)}
.rift-stickers-top{display:flex;flex:none;padding:8px 8px 4px}
/* The search field with its magnifier inside, as Telegram's. */
.rift-stickers-find{display:flex;flex:1 1 auto;align-items:center;gap:6px;min-width:0;height:32px;padding:0 12px;border:1px solid var(--rift-chat-line);border-radius:16px;background:var(--rift-chat-input)}
.rift-stickers-find>.rift-stickers-icon{flex:none;width:16px;height:16px}
/* .rift-stickers prefix: outweighs `.rift-stickers :is(…input…):focus-visible{outline}`, which drew a second ring inside
   the field (owner 2026-11-10); the field's own border shows the focus (:focus-within below). */
.rift-stickers .rift-stickers-find>.rift-stickers-search{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:transparent;outline:0}
/* Focus: the field's own border in the accent colour, one ring, not a second outline round it (owner 2026-11-10). */
.rift-stickers-find:focus-within{border-color:var(--rift-chat-accent)}
.rift-stickers-search{flex:1 1 auto;min-width:0;height:32px;padding:4px 12px;border:1px solid var(--rift-chat-line);border-radius:16px;background:var(--rift-chat-input)}
.rift-stickers-chips[hidden]{display:none}
.rift-stickers-chips{display:flex;flex:none;gap:2px;padding:0 8px 4px;overflow-x:auto;scrollbar-width:none}
.rift-stickers-chips::-webkit-scrollbar{display:none}
.rift-stickers-chip{flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;font-size:18px;line-height:32px;filter:grayscale(.6);opacity:.75}
.rift-stickers-chip:hover,.rift-stickers-chip[aria-pressed=true]{background:var(--rift-chat-input);filter:none;opacity:1}
.rift-stickers-chip[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--rift-chat-accent)}
.rift-stickers-body{flex:1 1 auto;min-height:0;padding:0 8px 8px;overflow-y:auto;overscroll-behavior:contain}
.rift-stickers-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:4px;margin:0 -8px;padding:8px 8px 4px;background:var(--rift-chat-surface);color:var(--rift-chat-muted);font-size:11px;font-weight:bold}
.rift-stickers-head>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rift-stickers-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 4px;border:0;border-radius:6px;background:transparent;color:var(--rift-chat-muted)}
.rift-stickers-tool:hover{background:var(--rift-chat-input)}
.rift-stickers-tool>.rift-stickers-icon{width:16px;height:16px}
.rift-stickers-tool:hover>.rift-stickers-icon{stroke:var(--rift-chat-text)}
/* A pack's star: an outline, filled in the accent once the pack is among «Мои паки». */
.rift-stickers-pack-star[data-on="1"]>.rift-stickers-icon{fill:var(--rift-chat-accent);stroke:var(--rift-chat-accent)}
.rift-stickers-row>.rift-stickers-tool-gap{flex:none;width:24px}
/* A cell is as large as its picture, up to the preview size: old smileys of 20–36 px sit close together without empty
   squares around them (owner 2026-11-10), Telegram's stickers fill the preview. */
.rift-stickers-grid{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rift-stickers-group{flex:1 0 100%;margin:4px 0 0;color:var(--rift-chat-muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.rift-stickers-cell{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:32px;min-height:32px;padding:4px;border:0;border-radius:8px;background:transparent;-webkit-touch-callout:none;user-select:none}
.rift-stickers-cell-mini{--rift-stickers-preview:60px}
.rift-sticker-dragon-small{--rift-sticker-size:36px;--rift-stickers-preview:36px}
.rift-stickers-cell:hover{background:var(--rift-chat-input)}
.rift-stickers-cell>img{display:block;width:auto;height:auto;max-width:var(--rift-stickers-preview);max-height:var(--rift-stickers-preview);pointer-events:none}
/* Animated and video stickers have no picture size of their own: the full preview. */
.rift-stickers-cell-full{width:calc(var(--rift-stickers-preview) + 8px);height:calc(var(--rift-stickers-preview) + 8px)}
.rift-stickers-cell>video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rift-stickers-tgs{position:relative;display:block;width:100%;height:100%;pointer-events:none}
.rift-stickers-star{position:absolute;top:1px;right:3px;font-size:13px;line-height:1;color:var(--rift-chat-accent);opacity:0;transition:opacity .15s}
.rift-stickers-cell:hover .rift-stickers-star,.rift-stickers-star[data-on="1"]{opacity:1}
.rift-stickers-cell:not(:hover) .rift-stickers-star[data-on="1"]{opacity:.8}
@media (hover:none){.rift-stickers-star[data-on="0"]{display:none}}
.rift-stickers-empty,.rift-stickers-count,.rift-stickers-hint{margin:8px 0;color:var(--rift-chat-muted);font-size:11px}
.rift-stickers-hint code{font-size:10px}
.rift-stickers-note{flex:none;margin:0;padding:0 10px;color:var(--rift-chat-accent);font-size:11px}
.rift-stickers-note:empty{display:none}
.rift-stickers-tabs{display:flex;flex:none;gap:2px;padding:4px 6px;overflow-x:auto;border-top:1px solid var(--rift-chat-line);background:var(--rift-chat-input);scrollbar-width:none}
.rift-stickers-tabs::-webkit-scrollbar{display:none}
.rift-stickers-tab{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:3px;border:0;border-radius:8px;background:transparent;font-size:18px}
.rift-stickers-tab>img,.rift-stickers-row-show>img{width:auto;height:auto;max-width:32px;max-height:32px}
.rift-stickers-tab:hover{background:var(--rift-chat-line)}
/* Telegram-like line icons: recent, favourites, new pack, library. Muted, the design's text colour when chosen. */
.rift-stickers-icon{width:22px;height:22px;fill:none;stroke:var(--rift-chat-muted);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.rift-stickers-tab:hover .rift-stickers-icon{stroke:var(--rift-chat-text)}
.rift-stickers-tab[data-active] .rift-stickers-icon{stroke:currentColor}
.rift-stickers-tab[data-active]{background:var(--rift-chat-action);color:var(--rift-chat-action-text)}
.rift-emoji-standard-group{display:flex;flex:none;align-items:center;border-radius:8px;background:var(--rift-chat-input)}
.rift-emoji-subtabs{display:flex;flex:none;gap:2px;width:0;overflow-x:auto;overflow-y:hidden;opacity:0;scrollbar-width:none;transition:width .32s cubic-bezier(.22,.61,.36,1),opacity .24s ease}
.rift-emoji-subtabs::-webkit-scrollbar{display:none}
.rift-emoji-standard-group.is-open .rift-emoji-subtabs{width:min(240px,48vw);opacity:1}


/* «Мои паки» and «Все паки»: headings over the packs, in the picker and in the library. */
.rift-stickers-divider{margin:12px 0 0;padding:0 0 3px;border-bottom:1px solid var(--rift-chat-line);color:var(--rift-chat-accent);font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px}

/* The library and editing a pack. */
.rift-stickers-settings h3:not(.rift-stickers-divider),.rift-stickers-editor h3{margin:8px 0 4px;font-size:13px}
.rift-stickers-library-search{display:block;width:100%;margin:4px 0}
.rift-stickers-row{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px}
.rift-stickers-row[hidden]{display:none}
.rift-stickers-row:hover{background:var(--rift-chat-input)}
.rift-stickers-row-show{display:flex;flex:1 1 auto;align-items:center;gap:8px;min-width:0;padding:2px 0;cursor:pointer}
.rift-stickers-row-show>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rift-stickers-row-show>small{color:var(--rift-chat-muted)}
.rift-stickers-row>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ≡ of «Мои паки»: the handle to drag a row by. As in Telegram the dragged row is a lifted card over the list, and an
   empty slot of its height shows where it will land. */
.rift-stickers-row>.rift-stickers-grip{flex:none;display:flex;width:24px;cursor:grab;touch-action:none;user-select:none}
.rift-stickers-row>.rift-stickers-grip.is-empty{visibility:hidden}
.rift-stickers-grip>.rift-stickers-icon{width:20px;height:20px}
.rift-stickers-row.is-dragging{z-index:calc(var(--rift-stickers-layer) + 1);box-sizing:border-box;border-radius:10px;background:var(--rift-chat-surface);box-shadow:0 6px 18px #0006;pointer-events:none}
.rift-stickers-row.is-dragging .rift-stickers-grip{cursor:grabbing}
.rift-stickers-slot{border-radius:10px;background:var(--rift-chat-input)}
/* A pack hidden from the player's list: dimmed, the eye brings it back. */
.rift-stickers-row.is-away>.rift-stickers-row-show{opacity:.45}

/* «Эмодзи»: Telegram's emoji grid. The bar's group tabs show each group's first emoji. */
.rift-stickers-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px}
/* .rift-stickers .rift-stickers-emoji: outweighs `.rift-stickers :is(button,…){font:inherit}`, which left the plain
   (not animated) emoji at the page's 13px beside the 28px animated ones (owner 2026-11-10). 24px: measured, a 26px
   Segoe UI Emoji glyph draws ~27px of ink, an animated one ~24.7px of its 28px box; 26 × 24.7 / 27 ≈ 24. */
.rift-stickers .rift-stickers-emoji{display:flex;align-items:center;justify-content:center;height:40px;padding:0;border:0;border-radius:8px;background:transparent;font:24px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.rift-stickers-emoji:hover{background:var(--rift-chat-input)}
/* A sticker at its own size under the pointer (rift-stickers.js showZoom): the picker's own frame, above the picker,
   never past the window. */
.rift-stickers-zoom{position:fixed;z-index:calc(var(--rift-stickers-layer) + 1);box-sizing:border-box;padding:6px;border:1px solid var(--rift-chat-line);border-radius:var(--rift-chat-radius);background:var(--rift-chat-surface) var(--rift-chat-surface-image) center top;box-shadow:0 12px 30px #0007;pointer-events:none}
.rift-stickers-zoom[hidden]{display:none}
/* As large as in a post (--rift-sticker-size of .rift-sticker-large) and never past the window. */
.rift-stickers-zoom>:is(img,video){display:block;max-width:min(var(--rift-sticker-size),calc(100vw - 22px));max-height:min(var(--rift-sticker-size),calc(100vh - 22px))}
/* A video has no picture size of its own worth keeping (Telegram's emoji videos are 100px): the full 200. */
.rift-stickers-zoom>video{width:var(--rift-sticker-size);height:var(--rift-sticker-size)}
.rift-stickers-tab-emoji{font:20px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;filter:grayscale(.5);opacity:.8}
.rift-stickers-tab:hover .rift-stickers-tab-emoji,.rift-stickers-tab[data-active] .rift-stickers-tab-emoji{filter:none;opacity:1}
/* «Свои паки»: the button that starts a new pack. */
.rift-stickers-create{display:flex;align-items:center;justify-content:center;gap:6px}
.rift-stickers-create>.rift-stickers-icon{width:18px;height:18px;stroke:currentColor}
.rift-stickers-editor label{display:block;margin:6px 0}
.rift-stickers-editor :is(input:not([type=checkbox]),textarea){display:block;width:100%;margin-top:3px;padding:5px 8px;border:1px solid var(--rift-chat-line);border-radius:6px;background:var(--rift-chat-input)}
.rift-stickers-editor textarea{min-height:150px;resize:vertical;font:11px/1.5 monospace}
.rift-stickers-editor input[type=checkbox]{margin:0 6px 0 0;vertical-align:middle}
.rift-stickers-editor [hidden]{display:none}
.rift-stickers-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.rift-stickers-actions button,.rift-stickers-button-wide{padding:6px 12px;border:0;border-radius:6px;background:var(--rift-chat-action);color:var(--rift-chat-action-text)}
.rift-stickers-actions button:not([type=submit]){background:transparent;color:var(--rift-chat-text);box-shadow:inset 0 0 0 1px var(--rift-chat-line)}
.rift-stickers-actions button:hover,.rift-stickers-button-wide:hover{filter:brightness(1.12)}
.rift-stickers-button-wide{display:block;width:100%;margin:10px 0}

/* A phone: the picker is a sheet along the bottom, as in Telegram. */
@media (max-width:600px){
 .rift-stickers{position:fixed;left:0;right:0;bottom:0;height:60vh;border-radius:var(--rift-chat-radius) var(--rift-chat-radius) 0 0}
}