/* Mobilsesli 0.8.0-p12-r1 — preserve existing light Emoji/GIF palette.
   Picker colors follow the TalkChat page theme, not the operating-system dark preference. */
#featureLayer .p12-emoji-picker{z-index:9999;max-width:calc(100vw - 16px);overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:6px;box-shadow:0 18px 48px rgba(0,0,0,.28)}
#featureLayer .p12-emoji-picker nav{flex:0 0 auto;display:flex;padding:4px;gap:0;background:#fff}
#featureLayer .p12-emoji-picker nav button{min-width:0;flex:1;padding:8px 6px;border:1px solid #ddd;background:#fff;color:#666;font-size:13px;cursor:pointer}
#featureLayer .p12-emoji-picker nav button:first-child{flex:0 0 64px;border-radius:4px 0 0 4px}
#featureLayer .p12-emoji-picker nav button:last-child{border-radius:0 4px 4px 0}
#featureLayer .p12-emoji-picker nav button.selected{background:#f5f5f5;color:#444;font-weight:800}
#featureLayer .p12-emoji-body{flex:1;min-height:0;overflow:hidden}
#featureLayer .p12-emoji-picker .emoji-grid{height:100%;overflow-y:auto;padding:4px;display:grid;grid-template-columns:repeat(auto-fill,46px);gap:2px;justify-content:center;align-content:start}
#featureLayer .p12-emoji-picker .emoji-grid.is-animated{grid-template-columns:repeat(auto-fill,56px)}
#featureLayer .p12-emoji-picker .emoji-grid button{width:46px;height:46px;padding:4px;border:0;border-radius:5px;background:transparent;display:grid;place-items:center;cursor:pointer}
#featureLayer .p12-emoji-picker .emoji-grid.is-animated button{width:56px;height:56px}
#featureLayer .p12-emoji-picker .emoji-grid button:hover{background:rgba(33,150,243,.08);box-shadow:inset 0 0 0 1px #2196f3}
#featureLayer .p12-emoji-picker .emoji-grid img{max-width:34px;max-height:34px;object-fit:contain}
#featureLayer .p12-emoji-picker .emoji-grid.is-animated img{max-width:44px;max-height:44px}
#featureLayer .p12-emoji-picker .vip-locked,#featureLayer .p12-emoji-picker .emoji-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:20px;color:#667085}
#featureLayer .p12-emoji-picker .vip-medal{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#facc15,#f59e0b);color:#fff}
#featureLayer .p12-emoji-picker .emoji-empty>span{font-size:38px;opacity:.6}
#featureLayer .gif-popup-dynamic{display:flex;flex-direction:column;min-height:0;width:min(520px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 24px))}
#featureLayer .gif-popup-dynamic .p12-gif-search{flex:0 0 auto;padding:8px 12px}
#featureLayer .gif-popup-dynamic .p12-gif-search label{display:flex;align-items:center;gap:7px;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:7px 10px;background:#fff}
#featureLayer .gif-popup-dynamic .p12-gif-search input{width:100%;border:0;outline:0;background:transparent}
#featureLayer .gif-popup-dynamic .p12-gif-search small{display:block;margin-top:6px;font-weight:700;color:#667085}
#featureLayer .p12-gif-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 10px 10px}
#featureLayer .p12-gif-results{columns:2;column-gap:8px}
#featureLayer .p12-gif-results button{display:block;width:100%;margin:0 0 8px;padding:0;border:0;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.05);cursor:pointer;break-inside:avoid}
#featureLayer .p12-gif-results button:hover{opacity:.82}
#featureLayer .p12-gif-results img{display:block;width:100%;height:100%;object-fit:cover}
#featureLayer .p12-gif-status{min-height:24px;padding:6px;text-align:center;font-size:12px;color:#667085}
#featureLayer .p12-gif-sentinel{height:1px}
.messages .room-dynamic-gif{display:inline-block;max-width:min(260px,72vw);max-height:300px;width:auto;height:auto;border-radius:10px;vertical-align:middle}
@media(min-width:768px){#featureLayer .p12-gif-results{columns:3}}
@media(max-width:767px){#featureLayer .p12-floating-picker{max-height:min(360px,calc(var(--visible-height,100dvh) - 20px))}#featureLayer .gif-popup-dynamic{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important;margin:0!important}}

/* p12-r1: the live TalkChat page is light. Do not let OS/browser dark preference
   recolor only the media picker and create a dark island inside the light UI. */
#featureLayer .p12-emoji-picker,
#featureLayer .p12-emoji-picker nav{
  background:#fff!important;
  color:#17243b!important;
  border-color:rgba(0,0,0,.14)!important;
}
#featureLayer .p12-emoji-picker nav button{
  background:#fff!important;
  color:#666!important;
  border-color:#ddd!important;
}
#featureLayer .p12-emoji-picker nav button.selected{
  background:#f5f5f5!important;
  color:#444!important;
}
#featureLayer .p12-emoji-picker .vip-locked,
#featureLayer .p12-emoji-picker .emoji-empty{
  color:#667085!important;
}
#featureLayer .gif-popup-dynamic,
#featureLayer .gif-popup-dynamic>header{
  background:#fff!important;
  color:#17243b!important;
  border-color:#e5e7eb!important;
}
#featureLayer .gif-popup-dynamic>header button,
#featureLayer .gif-popup-dynamic>header strong{
  color:#17243b!important;
}
#featureLayer .gif-popup-dynamic .p12-gif-search label{
  background:#fff!important;
  border-color:rgba(0,0,0,.12)!important;
  color:#667085!important;
}
#featureLayer .gif-popup-dynamic .p12-gif-search input{
  color:#111827!important;
}
#featureLayer .gif-popup-dynamic .p12-gif-search small,
#featureLayer .p12-gif-status{
  color:#667085!important;
}
#featureLayer .p12-gif-results button{
  background:rgba(0,0,0,.05)!important;
}


/* TALKCHAT_R19C11R7_EMOJI_REFERENCE_PARITY
   Reference master EmojiPicker parity:
   - selection menu seams/widths
   - back segment
   - Emoji / Animate / VIP tabs
   - VIP locked panel
   - existing emoji/animate grid dimensions preserved
*/
#featureLayer .p12-emoji-picker{
  background:#fff!important;
  border:1px solid #e5e7eb!important;
  border-radius:6px!important;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25)!important;
  overflow:hidden!important;
}

#featureLayer .p12-emoji-picker nav{
  display:flex!important;
  flex-direction:row!important;
  flex:0 0 auto!important;
  padding:4px!important;
  gap:0!important;
  background:#fff!important;
}

#featureLayer .p12-emoji-picker nav button:first-child{
  flex:0 0 auto!important;
  min-width:0!important;
  width:auto!important;
  padding:8px 20px!important;
  font-size:.85rem!important;
  line-height:1.25rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#666!important;
  background:#fff!important;
  border:1px solid #ddd!important;
  border-radius:4px 0 0 4px!important;
  box-shadow:none!important;
}

#featureLayer .p12-emoji-picker nav button:not(:first-child){
  flex:1 1 0%!important;
  min-width:0!important;
  padding:8px 4px!important;
  font-size:.8rem!important;
  line-height:1.25rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:#666!important;
  background:#fff!important;
  border-top:1px solid #ddd!important;
  border-right:1px solid #ddd!important;
  border-bottom:1px solid #ddd!important;
  border-left:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-weight:400!important;
}

#featureLayer .p12-emoji-picker nav button:last-child{
  border-radius:0 4px 4px 0!important;
}

#featureLayer .p12-emoji-picker nav button.selected{
  background:#f5f5f5!important;
  color:#555!important;
  font-weight:700!important;
}

#featureLayer .p12-emoji-picker nav button:hover{
  background:#f5f5f5!important;
  color:#555!important;
}

#featureLayer .p12-emoji-picker .vip-locked{
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:24px!important;
  gap:12px!important;
  color:#667085!important;
}

#featureLayer .p12-emoji-picker .vip-medal{
  width:56px!important;
  height:56px!important;
  flex:0 0 56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  border-radius:9999px!important;
  background:linear-gradient(135deg,#facc15,#f59e0b)!important;
  color:#fff!important;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px -4px rgba(0,0,0,.10)!important;
}

#featureLayer .p12-emoji-picker .vip-medal .material-symbols-outlined{
  font-size:32px!important;
  line-height:1!important;
  color:#fff!important;
}

#featureLayer .p12-emoji-picker .vip-locked h3{
  margin:0!important;
  padding:0!important;
  font-size:16px!important;
  line-height:24px!important;
  font-weight:600!important;
  color:#17243b!important;
}

#featureLayer .p12-emoji-picker .vip-locked p{
  margin:0!important;
  padding:0!important;
  max-width:280px!important;
  font-size:12px!important;
  line-height:1.625!important;
  font-weight:400!important;
  color:#667085!important;
}

#featureLayer .p12-emoji-picker .vip-locked button{
  margin-top:8px!important;
  padding:10px 20px!important;
  border:0!important;
  border-radius:9999px!important;
  background:linear-gradient(90deg,#eab308,#f59e0b)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:20px!important;
  font-weight:600!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  opacity:1!important;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.10),0 2px 4px -2px rgba(0,0,0,.10)!important;
}

#featureLayer .p12-emoji-picker .vip-locked button .material-symbols-outlined{
  font-size:18px!important;
  line-height:1!important;
}

#featureLayer .p12-emoji-picker .emoji-grid{
  padding:4px!important;
  gap:2px!important;
  grid-template-columns:repeat(auto-fill,46px)!important;
  justify-content:center!important;
}
#featureLayer .p12-emoji-picker .emoji-grid.is-animated{
  grid-template-columns:repeat(auto-fill,56px)!important;
}
#featureLayer .p12-emoji-picker .emoji-grid button{
  width:46px!important;
  height:46px!important;
  padding:4px!important;
  border-radius:4px!important;
  background:transparent!important;
}
#featureLayer .p12-emoji-picker .emoji-grid.is-animated button{
  width:56px!important;
  height:56px!important;
}
#featureLayer .p12-emoji-picker .emoji-grid img{
  max-width:34px!important;
  max-height:34px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}
#featureLayer .p12-emoji-picker .emoji-grid.is-animated img{
  max-width:44px!important;
  max-height:44px!important;
}

@media(max-width:767px){
  #featureLayer .p12-emoji-picker{
    max-width:calc(100vw - 16px)!important;
  }
}