/* Emote picker + viewer (portal, control panel, phone app) */
.ep-btn { position: fixed; z-index: 70; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(145, 70, 255, .16); color: #c9a8ff; cursor: pointer; }
.ep-btn:hover { background: rgba(145, 70, 255, .32); color: #fff; }
.ep-btn[hidden] { display: none; }
.ep-btn svg { width: 18px; height: 18px; fill: currentColor; }
input.ep-has, textarea.ep-has { padding-right: 40px; }
.ep-pop { position: fixed; z-index: 71; width: min(360px, calc(100vw - 16px)); height: min(420px, calc(100vh - 16px)); display: flex; flex-direction: column; background: #18181b; color: #efeff1; border: 1px solid #3a2a5c; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 4px rgba(145, 70, 255, .1); overflow: hidden; font-size: 13px; }
.ep-pop[hidden] { display: none; }
.ep-pop.ep-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; height: 62vh; border-radius: 18px 18px 0 0; }
.ep-pop > .ep-viewer { flex: 1; min-height: 0; }
.ep-x { position: absolute; right: 8px; top: 9px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: #adadb8; cursor: pointer; font-size: 14px; }
.ep-x:hover { background: #26262c; color: #fff; }
.ep-pop .ep-top { padding-right: 40px; }
.ep-loading, .ep-empty { padding: 22px 14px; text-align: center; color: #adadb8; }
.ep-viewer { display: flex; flex-direction: column; min-height: 0; }
.ep-top { padding: 10px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ep-q { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 9px; border: 1px solid #2f2f35; background: #0e0e10; color: #efeff1; font: inherit; }
.ep-q:focus { outline: none; border-color: #9146ff; }
.ep-tabs { display: flex; gap: 4px; }
.ep-tabs button { flex: 1; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: #adadb8; font: inherit; font-weight: 700; cursor: pointer; }
.ep-tabs button span { opacity: .6; font-weight: 600; margin-left: 2px; }
.ep-tabs button.on { background: rgba(145, 70, 255, .2); color: #fff; }
.ep-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; }
.ep-sec { margin-top: 10px; }
.ep-h { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #adadb8; margin-bottom: 4px; }
.ep-h span { color: #6d6d79; }
.ep-note { font-size: 12px; color: #8b8b96; margin-bottom: 6px; line-height: 1.35; }
.ep-note b { color: #c9a8ff; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.ep-e { position: relative; height: 42px; display: grid; place-items: center; padding: 4px; border: 0; border-radius: 9px; background: #1f1f23; cursor: pointer; transition: transform .08s; }
.ep-e:hover { background: rgba(145, 70, 255, .25); }
.ep-e:active { transform: scale(.92); }
.ep-e img { max-width: 32px; max-height: 32px; }
.ep-emoji { font-size: 22px; line-height: 1; }
.ep-b { position: absolute; right: 1px; bottom: 1px; padding: 0 3px; border-radius: 4px; background: #772ce8; color: #fff; font-style: normal; font-size: 9px; font-weight: 800; line-height: 13px; }
.ep-b.ep-f { background: #00a86b; }
.ep-b.ep-bits { background: #c77d00; }
.ep-e.ep-copied { box-shadow: 0 0 0 2px #00c853 inset; background: rgba(0, 200, 83, .15); }
.ep-e.ep-no { box-shadow: 0 0 0 2px #eb0400 inset; }
.ep-tip { padding: 7px 12px; border-top: 1px solid #2f2f35; color: #8b8b96; font-size: 12px; }
.ep-tip b { color: #c9a8ff; }
/* bigger tiles in the full-page viewers */
.ep-page .ep-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.ep-page .ep-e { height: 64px; flex-direction: column; }
.ep-page .ep-e img { max-width: 40px; max-height: 40px; }
.ep-page .ep-body { overflow: visible; padding: 4px 0 8px; }
.ep-page .ep-top { padding: 0; }
.ep-page .ep-tip { border: 0; padding: 6px 0 0; }
.ep-e.ep-cant img { opacity: .55; }
.ep-e.ep-cant:hover img { opacity: 1; }
.ep-cross { position: absolute; left: 1px; top: 1px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 99px; background: #eb0400; color: #fff; font-style: normal; font-size: 9px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px #1f1f23; }
.ep-ok { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 99px; background: #00a86b; color: #fff !important; text-shadow: none !important; box-shadow: 0 0 0 2px #1f1f23; left: 1px !important; top: 1px !important; font-size: 9px !important; }
.ep-ok { position: absolute; left: 2px; top: 1px; font-style: normal; font-size: 10px; font-weight: 900; color: #00e676; text-shadow: 0 0 3px #000, 0 0 2px #000; }