/* GewoonChatten 0.58.00 — Cody-geankerde emoji-kiezer, duidelijke sluitknop en kleine UI-polish. */

/* ===== Chattermenu: sluitknop altijd zichtbaar ===== */
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs{position:relative!important;overflow:hidden!important}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs>header{padding-right:62px!important;min-height:68px!important}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs .gcUserMenuClose{
  display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  position:absolute!important;top:11px!important;right:11px!important;z-index:100!important;
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;
  border:1px solid #4b647e!important;border-radius:9px!important;background:#101e2d!important;color:#f5f8fb!important;
  font:800 25px/1 Arial,sans-serif!important;place-items:center!important;box-shadow:0 5px 18px rgba(0,0,0,.34)!important;
}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs .gcUserMenuClose:hover{background:#1a2d42!important;border-color:#718ba5!important}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs .gcUserMenuClose::before,
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs .gcUserMenuClose::after{display:none!important;content:none!important}

/* ===== Emoji: Cody-principe — aan de composer vast, niet los midden in de chat ===== */
#emojiPanel.emojiPanel{
  position:fixed!important;z-index:var(--gc-emoji-z,2147481200)!important;
  left:var(--gc-emoji-left,72px)!important;top:auto!important;right:auto!important;
  bottom:var(--gc-emoji-bottom,78px)!important;
  width:var(--gc-emoji-width,530px)!important;max-width:calc(100vw - 20px)!important;height:260px!important;
  display:grid!important;grid-template-rows:46px 42px minmax(0,1fr)!important;
  padding:0!important;overflow:hidden!important;border:1px solid #38516a!important;border-radius:11px!important;
  background:#101c29!important;box-shadow:0 18px 48px rgba(0,0,0,.58)!important;
  transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#emojiPanel.emojiPanel.hidden{display:none!important}
#emojiPanel .emojiHead{height:46px!important;margin:0!important;padding:7px 8px 7px 13px!important;display:flex!important;align-items:center!important;gap:10px!important;border-bottom:1px solid #30465d!important;background:#172638!important}
#emojiPanel .emojiHead>div{display:flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important;overflow:hidden!important}
#emojiPanel .emojiHead b{font-size:13px!important;line-height:1.1!important;white-space:nowrap!important;color:#f3f7fb!important}
#emojiPanel .emojiHead small{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#91a5b9!important}
#emojiPanel #emojiClose{margin-left:auto!important;flex:0 0 34px!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid #405873!important;border-radius:7px!important;background:#0f1c29!important;color:#edf3f8!important;font-size:22px!important;line-height:1!important;cursor:pointer!important}
#emojiPanel #emojiClose:hover{background:#22364b!important;border-color:#65809c!important}
#emojiPanel .emojiTabs{height:42px!important;margin:0!important;padding:4px 7px!important;display:flex!important;align-items:stretch!important;gap:2px!important;overflow-x:auto!important;overflow-y:hidden!important;border-bottom:1px solid #2c4258!important;background:#132131!important;scrollbar-width:none!important}
#emojiPanel .emojiTabs::-webkit-scrollbar{display:none!important}
#emojiPanel .emojiTabs button{flex:0 0 39px!important;width:39px!important;min-width:39px!important;height:33px!important;padding:0 4px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:5px!important;background:transparent!important;color:#b9c8d7!important;font-size:17px!important;font-weight:800!important;white-space:nowrap!important;cursor:pointer!important}
#emojiPanel .emojiTabs button[data-emoji-tab="gc"]{font-size:11px!important}
#emojiPanel .emojiTabs button[data-emoji-tab="numbers"]{font-size:10px!important}
#emojiPanel .emojiTabs button.active{background:#29425d!important;color:#fff!important;box-shadow:inset 0 -2px #d8ad49!important}
#emojiPanel .emojiGrid{min-height:0!important;max-height:none!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;padding:8px 9px 10px!important;display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;align-content:start!important;gap:3px!important;background:#0e1925!important;scrollbar-width:thin!important;scrollbar-color:#3d5369 transparent!important}
#emojiPanel .emojiGrid button{min-width:0!important;width:100%!important;height:39px!important;min-height:39px!important;padding:3px!important;border:1px solid transparent!important;border-radius:6px!important;background:transparent!important;font-size:22px!important;line-height:1!important;display:grid!important;place-items:center!important;cursor:pointer!important}
#emojiPanel .emojiGrid button:hover{background:#1d3043!important;border-color:#304b66!important}
#emojiPanel .emojiGrid img{max-width:34px!important;max-height:34px!important;object-fit:contain!important}
body.gcEmojiOpen #composer{position:relative!important;z-index:2!important}

/* PM: dezelfde Cody-kiezer maar begrensd aan het privévenster. */
#emojiPanel.emojiForPm{width:var(--gc-emoji-width,480px)!important}

/* ===== Algemene leesbaarheid in deze compacte bediening ===== */
#gcUserMenuOverlay .gcUserMenuSectionLabel{font-size:9px!important}
#gcUserMenuOverlay .gcUserMenuGrid b,#gcUserMenuOverlay .gcUserMenuModeration b{font-size:12px!important}
#gcUserMenuOverlay .gcUserMenuGrid small,#gcUserMenuOverlay .gcUserMenuModeration small{font-size:9px!important}

@media(max-width:900px){
  #emojiPanel.emojiPanel,#emojiPanel.emojiForPm{
    left:8px!important;right:8px!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;height:min(390px,50dvh)!important;
    grid-template-rows:48px 44px minmax(0,1fr)!important;border-radius:13px 13px 9px 9px!important;
    box-shadow:0 -10px 46px rgba(0,0,0,.62)!important;
  }
  #emojiPanel .emojiHead{height:48px!important;padding-left:12px!important}
  #emojiPanel .emojiHead b{font-size:13px!important}
  #emojiPanel .emojiTabs{height:44px!important;padding:5px 6px!important}
  #emojiPanel .emojiTabs button{flex-basis:42px!important;width:42px!important;min-width:42px!important;height:34px!important;font-size:18px!important}
  #emojiPanel .emojiGrid{grid-template-columns:repeat(7,minmax(0,1fr))!important;padding:8px!important}
  #emojiPanel .emojiGrid button{height:43px!important;min-height:43px!important;font-size:24px!important}
  #emojiPanel .emojiGrid img{max-width:37px!important;max-height:37px!important}
  #gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs .gcUserMenuClose{width:42px!important;height:42px!important;top:9px!important;right:9px!important}
}
@media(max-width:430px){
  #emojiPanel .emojiHead small{display:none!important}
  #emojiPanel .emojiGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}