/* GewoonChatten 0.57.00 — gerichte Cody-polish zonder businesslogica te vervangen. */
:root{--gc-avatar-radius:50%}
html[data-gc-avatar-shape="square"]{--gc-avatar-radius:8px}
html[data-gc-avatar-shape="round"]{--gc-avatar-radius:50%}

/* Avatarvorm geldt voor chat, userlist, profiel, PM en sociale lijsten. */
html[data-gc-avatar-shape] .messageAvatar,
html[data-gc-avatar-shape] .messageAvatar img,
html[data-gc-avatar-shape] .uAvatar,
html[data-gc-avatar-shape] .uAvatar img,
html[data-gc-avatar-shape] .userCard .uAvatar,
html[data-gc-avatar-shape] .userCard .uAvatar img,
html[data-gc-avatar-shape] #topProfileAvatar,
html[data-gc-avatar-shape] #profileMenuAvatar,
html[data-gc-avatar-shape] .profileFriendAvatar,
html[data-gc-avatar-shape] .profileFriendAvatar img,
html[data-gc-avatar-shape] .pmMessageAvatar,
html[data-gc-avatar-shape] .pmHeadIdentity img,
html[data-gc-avatar-shape] .inboxOpen .uAvatar,
html[data-gc-avatar-shape] .inboxOpen .uAvatar img,
html[data-gc-avatar-shape] #profileModal .gcProfileAvatar,
html[data-gc-avatar-shape] #profileModal .gcProfileAvatar img,
html[data-gc-avatar-shape] .gcCodyProfileAvatarWrap,
html[data-gc-avatar-shape] .gcCodyProfileAvatarWrap img,
html[data-gc-avatar-shape] .gcUserMenu header .uAvatar,
html[data-gc-avatar-shape] .gcUserMenu header .uAvatar img{border-radius:var(--gc-avatar-radius)!important}
html[data-gc-avatar-shape="square"] #profileModal .gcProfileAvatar,
html[data-gc-avatar-shape="square"] .gcCodyProfileAvatarWrap{border-radius:14px!important}
html[data-gc-avatar-shape="square"] #profileModal .gcProfileAvatar img,
html[data-gc-avatar-shape="square"] .gcCodyProfileAvatarWrap img{border-radius:11px!important}

/* Avatar-keuze in Chatopties. */
.gcAvatarShapeCard{margin:12px 0;padding:14px;border:1px solid #30465e;border-radius:9px;background:#111d2a}
.gcAvatarShapeChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.gcAvatarShapeChoice{position:relative;display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;align-items:center!important;gap:11px!important;min-height:66px!important;padding:9px 11px!important;border:1px solid #31485f!important;border-radius:8px!important;background:#0d1824!important;cursor:pointer!important}
.gcAvatarShapeChoice:has(input:checked){border-color:#d6ad4c!important;box-shadow:inset 0 0 0 1px rgba(214,173,76,.22)!important;background:#142132!important}
.gcAvatarShapeChoice input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.gcAvatarShapePreview{width:44px;height:44px;display:grid;place-items:center;background:#263b51;border:2px solid #69809a;overflow:hidden}
.gcAvatarShapePreview.isRound{border-radius:50%}.gcAvatarShapePreview.isSquare{border-radius:8px}
.gcAvatarShapePreview i{width:17px;height:17px;border-radius:50%;background:#b7c8da;position:relative;margin-top:-8px}
.gcAvatarShapePreview i:after{content:"";position:absolute;width:29px;height:18px;border-radius:50% 50% 35% 35%;background:#b7c8da;left:-6px;top:15px}
.gcAvatarShapeChoice>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}.gcAvatarShapeChoice b{font-size:13px}.gcAvatarShapeChoice small{font-size:10px;color:#9fb0c3;line-height:1.3}

/* Geluidskaart: geen losse browser-default knop meer. */
#gcSoundOptions{padding:0!important;border:1px solid #30465e!important;border-radius:9px!important;margin:0 0 16px!important;background:#111d2a!important;overflow:hidden!important}
#gcSoundOptions .gcSoundHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px 11px;border-bottom:1px solid #2b4056;background:#152334}
#gcSoundOptions .gcSoundHead h4{margin:0 0 3px!important;font-size:15px!important;color:#f3f7fb!important}
#gcSoundOptions .gcSoundHead p{margin:0!important;font-size:11px!important;color:#a8b8c9!important}
#gcSoundOptions .gcSoundHead>span{flex:0 0 auto;padding:4px 7px;border:1px solid #3b536c;border-radius:999px;color:#b7c9da;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.gcSoundToggleList{padding:4px 12px}
#gcSoundOptions .gcSoundToggle{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:54px!important;padding:7px 3px!important;border-bottom:1px solid #273b50!important;cursor:pointer!important}
#gcSoundOptions .gcSoundToggle:last-child{border-bottom:0!important}
.gcSoundToggle>span{display:flex;flex-direction:column;gap:2px}.gcSoundToggle b{font-size:13px}.gcSoundToggle small{font-size:10px!important;color:#91a4b8!important}
#gcSoundOptions .gcSoundToggle input{width:20px!important;height:20px!important;accent-color:#5b9cff!important;flex:0 0 auto!important}
.gcSoundPicker{padding:12px 14px;border-top:1px solid #2b4056;background:#0f1b28}
.gcSoundPicker>label{display:block!important;min-height:0!important;margin:0 0 8px!important}.gcSoundPicker>label span{display:flex;flex-direction:column;gap:2px}.gcSoundPicker>label b{font-size:13px}.gcSoundPicker>label small{font-size:10px!important;color:#91a4b8!important}
.gcSoundPickerRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
#gcSoundTone{width:100%;height:42px;padding:0 11px;border:1px solid #38516b;border-radius:7px;background:#0a1622;color:#eef5fb;font-size:13px;font-weight:700;outline:none}
#gcTestSound{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:42px!important;margin:0!important;padding:0 15px!important;border:1px solid #577cab!important;border-radius:7px!important;background:linear-gradient(180deg,#315e91,#244a75)!important;color:#fff!important;font-size:12px!important;font-weight:850!important;box-shadow:inset 0 1px rgba(255,255,255,.1)!important;cursor:pointer!important}
#gcTestSound:hover{background:linear-gradient(180deg,#3b6da4,#2a5684)!important}
#gcSoundStatus{padding:0 14px 12px!important;margin:0!important;font-size:10px!important;color:#9cadbf!important}

/* Vriendenstatus: compacte bevestigingskaart i.p.v. een kale vinkknop. */
.gcUserMenu .friendFriends.gcFriendConfirmed{position:relative!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) 24px!important;align-items:center!important;gap:9px!important;text-align:left!important;border-color:rgba(76,194,132,.48)!important;background:linear-gradient(145deg,rgba(33,84,66,.38),rgba(18,39,45,.86))!important;color:#effff7!important}
.gcFriendConfirmedIcon{background:rgba(68,204,137,.18)!important;border-color:rgba(93,221,157,.38)!important;color:#7be5ad!important}
.gcFriendConfirmedCopy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;min-width:0!important}.gcFriendConfirmedCopy b{font-size:13px!important}.gcFriendConfirmedCopy small{font-size:10px!important;color:#a7cbb8!important;font-weight:600!important}.gcFriendConfirmedMark{font-style:normal!important;color:#72dfa8!important;font-size:16px!important;font-weight:900!important}
.profileFriendStatus{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:5px 9px!important;border:1px solid rgba(77,196,134,.38)!important;border-radius:999px!important;background:rgba(44,133,91,.14)!important;color:#8ce4b6!important;font-size:10px!important;font-weight:800!important}

/* Profielmenu hoort visueel BOVEN de chat, niet erin/erachter. */
#gcProfileMenuBackdrop{position:fixed;inset:0;z-index:10078;background:rgba(3,9,16,.46);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);opacity:1;transition:opacity .14s ease}
#gcProfileMenuBackdrop.hidden{display:none!important}
body.gcProfileMenuOpen #gcProfileMenu.gcProfileMenuCody{z-index:10090!important;border:1px solid #49627c!important;box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.025) inset!important;background:#132132!important}
body.gcProfileMenuOpen #gcProfileMenu .gcProfileDrawerHead{position:sticky!important;top:0!important;z-index:3!important;background:#1a2b3e!important;box-shadow:0 1px 0 #33495f!important}
body.gcProfileMenuOpen #gcProfileMenu .gcProfileDrawerFooter{position:sticky!important;bottom:0!important;z-index:3!important;background:#142335!important;box-shadow:0 -1px 0 #30455b!important}
body.gcProfileMenuOpen #gcProfileMenu .gcProfileDrawerScroll{overscroll-behavior:contain!important;scrollbar-gutter:stable!important}

/* X-knoppen van persoonlijke panelen altijd duidelijk zichtbaar boven de inhoud. */
#chatOptionsModal .modalClose,#profileModal .modalClose,#editProfileModal .modalClose,#friendsModal .modalClose,#statusModal .modalClose,#notificationsModal .modalClose,#walletModal .modalClose,#badgesModal .modalClose,#birthdayModal .modalClose{display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;position:absolute!important;right:12px!important;top:12px!important;z-index:90!important;width:38px!important;height:38px!important;padding:0!important;border:1px solid #425b74!important;border-radius:9px!important;background:#0e1b29!important;color:#eef5fb!important;font-size:24px!important;line-height:1!important;box-shadow:0 5px 18px rgba(0,0,0,.28)!important}

@media(max-width:900px){
  .gcAvatarShapeChoices{grid-template-columns:1fr 1fr}
  .gcSoundPickerRow{grid-template-columns:1fr}
  #gcTestSound{width:100%!important}
  #gcProfileMenuBackdrop{bottom:calc(56px + env(safe-area-inset-bottom))}
  body.gcProfileMenuOpen #gcProfileMenu.gcProfileMenuCody{top:max(8px,env(safe-area-inset-top))!important;right:8px!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;left:8px!important;width:auto!important;max-height:none!important;border-radius:12px!important}
}
@media(max-width:520px){
  .gcAvatarShapeChoices{grid-template-columns:1fr}
  .gcAvatarShapeChoice{min-height:62px!important}
}