.dev-emoji-picker { box-sizing: border-box; inset: auto; z-index: 160; isolation: isolate; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: transparent; color: #e2e8f0; box-shadow: 0 24px 60px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(1.14); -webkit-backdrop-filter: blur(18px) saturate(1.14); font-family: var(--ui-interface-font,"Funnel Display",sans-serif); animation: dev-emoji-reveal .18s ease-out; }
.dev-emoji-picker :is(button,input) { font-family: inherit; }
.dev-emoji-picker button { border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s,transform .18s; }
.dev-emoji-picker button:not(:disabled):hover { background: rgba(148,163,184,.12); }
.dev-emoji-picker button:not(:disabled):active { transform: scale(.94); }
.dev-emoji-picker button:disabled { opacity: .3; cursor: not-allowed; }
.dev-emoji-categories { display: flex; flex: 0 0 auto; gap: 3px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid rgba(148,163,184,.15); scrollbar-width: thin; }
.dev-emoji-categories > button { position:relative; display:grid; place-items:center; flex:1 0 21px; height:32px; padding:0 0 6px; border-radius:0; background:transparent; color:#8f949b; transition:color .18s ease; }
.dev-emoji-categories > button > svg { width:21px; height:21px; pointer-events:none; }
.dev-emoji-categories > button::after { content:""; position:absolute; inset:auto 0 0; height:3px; border-radius:2px; background:#60d9b3; transform:scaleX(0); transition:transform .2s ease; }
.dev-emoji-categories > button:not(:disabled):is(:hover,:focus-visible) { background:transparent; color:#dce4ed; }
.dev-emoji-categories > button[aria-pressed="true"],.dev-emoji-categories > button[aria-pressed="true"]:hover { background:transparent; color:#60d9b3; }
.dev-emoji-categories > button[aria-pressed="true"]::after { transform:scaleX(1); }
.dev-emoji-search { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; padding: 5px 8px; border: 1px solid rgba(148,163,184,.2); border-radius: 8px; background: rgba(255,255,255,.04); }
.dev-emoji-search > svg { flex: 0 0 15px; width: 15px; height: 15px; color: #94a3b8; }
.dev-emoji-search > input { min-width: 0; width: 100%; border: 0; padding: 0; background: transparent; color: #e2e8f0; font-size: 16px; }
.dev-emoji-search > input::placeholder { color: #94a3b8; }
@media (hover:hover) and (pointer:fine) { .dev-emoji-search > input { font-size:13px; line-height:20px; } }
.dev-emoji-results { position:relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(32px,1fr)); align-content: start; gap: 3px; min-height: 48px; max-height: 260px; overflow: auto; overscroll-behavior: contain; overflow-anchor:none; scroll-padding-top:4px; }
.dev-emoji-results > button { min-width: 0; min-height: 34px; padding: 2px; font-size: 23px; line-height: 1.25; }
.dev-emoji-results > button[aria-pressed="true"] { background: rgba(var(--ui-accent-rgb, 0, 224, 164),.15); }
.dev-custom-emoji { display: inline-block; object-fit: contain; vertical-align: middle; }
.dev-emoji-results .dev-custom-emoji { width: 23px; height: 23px; }
.dev-emoji-section-heading,.dev-emoji-server-note { grid-column: 1/-1; margin: 8px 0 4px; color: #94a3b8; font-size: 11px; line-height: 1.5; font-weight: 500; }
.dev-emoji-section-heading { color:#c6d0dc; font-weight:600; margin-top:10px; }
.dev-emoji-section-heading:first-child { margin-top:0; }
.dev-emoji-results > .dev-emoji-server-retry { grid-column: 1/-1; font-size: 13px; }
.dev-emoji-status { margin: 0; color: #94a3b8; font-size: 12px; line-height: 1.5; }
.dev-emoji-status:empty { display: none; }
.dev-single-role-option { display: flex; align-items: center; gap: 9px; }
.dev-single-role-option::before { content: ""; flex: 0 0 17px; width: 17px; height: 17px; background: var(--role-color,#94a3b8); -webkit-mask: url('/assets/img/icons/role-at.svg') center/contain no-repeat; mask: url('/assets/img/icons/role-at.svg') center/contain no-repeat; }
.dev-single-role-picker .dev-ticket-picker-input > svg:first-child { color: var(--role-color,#94a3b8); }
.dev-spanel .dev-single-role-picker .dev-ticket-picker-input .panel-input { padding-right: 76px; }
.dev-ticket-role-clear { position: absolute; right: 35px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 6px; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #94a3b8; cursor: pointer; }
.dev-ticket-role-clear[hidden] { display: none !important; }
.dev-ticket-role-clear > svg { width: 16px; height: 16px; transition: transform .18s,color .18s; }
.dev-ticket-role-clear:not(:disabled):hover > svg { color: #e2e8f0; transform: scale(1.1); }
@keyframes dev-emoji-reveal { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dev-emoji-picker { animation: none; } .dev-emoji-picker button { transition: none; transform: none !important; } }
.spanel-text-emoji-trigger { position:fixed; inset:auto; z-index:161; box-sizing:border-box; display:grid; place-items:center; width:32px; height:32px; margin:0; padding:0; line-height:0; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#cbd5e1; background:transparent; backdrop-filter:blur(18px) saturate(1.14); -webkit-backdrop-filter:blur(18px) saturate(1.14); box-shadow:0 24px 60px rgba(0,0,0,.34); cursor:pointer; -webkit-tap-highlight-color:transparent; animation:dev-emoji-reveal .18s ease-out; transition:color .16s,background .16s; }
.spanel-text-emoji-trigger svg { display:block; margin:0; width:20px; height:20px; transition:transform .18s; }
.spanel-text-emoji-trigger:hover { color:#a5f3dc; background:transparent; }
.spanel-text-emoji-trigger:hover svg { transform:scale(1.1); }
@media (prefers-reduced-motion:reduce) { .spanel-text-emoji-trigger { animation:none;transition:none; } .spanel-text-emoji-trigger svg { transition:none;transform:none !important; } }
@media (prefers-reduced-motion: reduce) { .dev-emoji-categories > button::after { transition:none; } }