/* GewoonChatten 0.60.00 — CodyChat herkenning in eigen GewoonChatten-jasje. */
body.gcCodyFamiliarV3{--gc55-rail:52px;--gc55-users:326px;font-size:16px}

/* Links: echte smalle Cody-rail. Geen zwarte CSS-tooltip/hoverblok. */
body.gcCodyFamiliarV3 .quickbar{width:52px!important;min-width:52px!important;max-width:52px!important;padding:6px 4px!important;gap:3px!important;overflow:hidden!important}
body.gcCodyFamiliarV3 .quickbar button{width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important;border-radius:7px!important;box-shadow:none!important}
body.gcCodyFamiliarV3 .quickbar button i{width:31px!important;height:31px!important}
body.gcCodyFamiliarV3 .quickbar button i svg{width:22px!important;height:22px!important}
body.gcCodyFamiliarV3 .quickbar button::before,body.gcCodyFamiliarV3 .quickbar button::after{display:none!important;content:none!important;opacity:0!important}
body.gcCodyFamiliarV3 .quickbar button:hover{background:#1a2a3b!important;border-color:#304961!important;box-shadow:none!important}
body.gcCodyFamiliarV3 .quickbar button.active,body.gcCodyFamiliarV3 .quickbar button[aria-current="page"]{background:#1c3044!important;border-color:#45647f!important;box-shadow:inset 3px 0 #e2b84e!important}
body.gcCodyFamiliarV3 .gcCodyExtraCard{left:58px!important}
body.gcCodyFamiliarV3 .rooms{left:52px!important}

/* Chatter-actiemenu: klassiek compact, goed leesbaar en duidelijke tab-iconen. */
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs{width:min(470px,calc(100vw - 20px))!important;border-radius:8px!important;background:#142335!important;border:1px solid #3b5873!important;box-shadow:0 22px 65px #000a!important}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs>header{min-height:72px!important;padding:10px 60px 10px 13px!important;background:#192b3e!important;border-bottom:1px solid #365069!important}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs>header b{font-size:18px!important;line-height:1.1!important}
#gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs>header small{font-size:11px!important;color:#aebed0!important;margin-top:3px!important}
#gcUserMenuOverlay .gcUserMenuTabs{height:46px!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))!important;gap:0!important;padding:0!important;background:#101e2d!important;border-bottom:1px solid #314a62!important}
#gcUserMenuOverlay .gcUserMenuTabs button{height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#aabbd0!important;font-size:12px!important;font-weight:800!important}
#gcUserMenuOverlay .gcUserMenuTabs button.active{background:#20364e!important;color:#fff!important;box-shadow:inset 0 -3px #e0b64d!important}
#gcUserMenuOverlay .gcUserMenuTabs button b{font-size:12px!important}
#gcUserMenuOverlay .gcUserMenuTabIcon{width:20px!important;height:20px!important;display:grid!important;place-items:center!important;color:currentColor!important}
#gcUserMenuOverlay .gcUserMenuTabIcon svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#gcUserMenuOverlay .gcUserMenuBody{padding:9px!important}
#gcUserMenuOverlay .gcUserMenuSectionLabel{font-size:10px!important;letter-spacing:.08em!important;margin:2px 2px 7px!important}
#gcUserMenuOverlay .gcUserMenuGrid{gap:7px!important}
#gcUserMenuOverlay .gcUserMenuGrid button,#gcUserMenuOverlay .gcUserMenuModeration button{min-height:55px!important;border-radius:7px!important;background:#101f2e!important;border-color:#34516c!important;padding:8px 10px!important}
#gcUserMenuOverlay .gcUserMenuGrid b,#gcUserMenuOverlay .gcUserMenuModeration b{font-size:13px!important}
#gcUserMenuOverlay .gcUserMenuGrid small,#gcUserMenuOverlay .gcUserMenuModeration small{font-size:10px!important;line-height:1.25!important}

/* Openbaar profiel: Cody-opbouw: cover -> avatar -> rank -> naam -> mood/music -> tabs -> eenvoudige rijen. */
body.gcCodyFamiliarV3 #profileModal .profileModalCard{width:min(590px,calc(100vw - 18px))!important;max-height:min(820px,94dvh)!important;border-radius:8px!important;background:#111e2b!important;border:1px solid #3a5670!important;overflow:hidden!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileHero{min-height:244px!important;padding:66px 16px 16px!important;background-position:center!important;background-size:cover!important;box-shadow:inset 0 -120px 95px -62px rgba(0,0,0,.82)!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileAvatar{width:104px!important;height:104px!important;margin:0 auto 7px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileAvatar img{width:104px!important;height:104px!important;border:3px solid #edf4fa!important;box-shadow:0 7px 24px #0009!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileIdentity{text-align:center!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileNameLine{display:flex!important;flex-direction:column-reverse!important;align-items:center!important;gap:2px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileNameLine h2{font-size:27px!important;line-height:1.08!important;margin:1px 0!important;text-shadow:0 2px 5px #000!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileRankBadge{font-size:10px!important;line-height:1!important;padding:4px 8px!important;border-radius:4px!important;background:#0b1723cc!important;border:1px solid #ffffff38!important;color:#f1c85a!important;letter-spacing:.05em!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileIdentity>p{font-size:12px!important;margin:3px 0!important;color:#d9e4ee!important;text-shadow:0 1px 3px #000!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileStatusRow{justify-content:center!important;gap:6px!important;margin-top:4px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfilePresenceLabel,body.gcCodyFamiliarV3 #profileModal .profileFriendStatus{font-size:10.5px!important;padding:4px 7px!important;border-radius:4px!important;background:#0b1723bf!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileMoodLabel{display:block!important;margin-top:6px!important;font-size:12px!important;color:#f5d36e!important;text-shadow:0 1px 3px #000!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileCounters{top:10px!important;left:10px!important;gap:5px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileCounters>*{min-height:32px!important;border-radius:5px!important;background:#091521c9!important;border-color:#ffffff35!important;font-size:11px!important}
body.gcCodyFamiliarV3 #profileModal .gcPublicProfileMusic{margin:0!important;border:0!important;border-bottom:1px solid #2d455c!important;border-radius:0!important;background:#142437!important;padding:8px 13px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileTabs{min-height:47px!important;padding:0 12px!important;display:flex!important;justify-content:center!important;gap:0!important;background:#152536!important;border-bottom:1px solid #30485f!important;overflow-x:auto!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button{min-height:47px!important;padding:0 13px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#a9bbcd!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button.active{color:#fff!important;box-shadow:inset 0 -3px #e2b84e!important;background:#1a2d41!important}
body.gcCodyFamiliarV3 #profileModal .gcProfilePane{padding:8px 18px 18px!important;background:#111e2b!important}
body.gcCodyFamiliarV3 #profileModal .profileInfoRow{min-height:47px!important;padding:8px 4px!important;border-bottom:1px solid #263d52!important;background:transparent!important;border-radius:0!important}
body.gcCodyFamiliarV3 #profileModal .profileInfoRow span,body.gcCodyFamiliarV3 #profileModal .profileInfoRow strong{font-size:12px!important}
body.gcCodyFamiliarV3 #profileModal .profileInfoRow span{color:#c1cedb!important}
body.gcCodyFamiliarV3 #profileModal .profileInfoRow strong{color:#f0f5f9!important;text-align:right!important;font-weight:700!important}
body.gcCodyFamiliarV3 #profileModal .profileBio{font-size:13px!important;line-height:1.55!important;padding:12px 4px!important}
body.gcCodyFamiliarV3 #profileModal .profileActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-top:12px!important}
body.gcCodyFamiliarV3 #profileModal .profileActions button{min-height:42px!important;border-radius:6px!important;font-size:11.5px!important}

/* Profiel bewerken blijft onze uitgebreide editor, maar de ingang is Cody: Account / Meer. */
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileEditCard{width:min(610px,calc(100vw - 18px))!important;border-radius:8px!important;background:#111e2b!important;border:1px solid #3a5670!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHero{min-height:240px!important;background:#17283a!important;box-shadow:inset 0 -115px 95px -60px #000c!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileAvatarWrap{width:104px!important;height:104px!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileIdentity h2{font-size:26px!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs{height:48px!important;padding:0!important;border-radius:0!important;background:#152536!important;border-bottom:1px solid #30485f!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs button{height:48px!important;min-width:130px!important;border-radius:0!important;font-size:13px!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubTabs button.active{background:#1a2d41!important;box-shadow:inset 0 -3px #e2b84e!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane{padding:7px 15px 16px!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button{min-height:54px!important;border-radius:0!important;border:0!important;border-bottom:1px solid #293f55!important;background:transparent!important;padding:8px 6px!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button:hover{background:#172a3d!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button>i{width:36px!important;height:36px!important;border-radius:6px!important;background:#1d3349!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button b{font-size:12.5px!important}
body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHubPane>button small{font-size:10px!important;color:#98aabd!important}

/* Hoofdchat/userlist iets groter leesbaar zonder de compacte Cody-verhouding kwijt te raken. */
body.gcCodyFamiliarV3 .messages .meta .name{font-size:14px!important}
body.gcCodyFamiliarV3 .messages .body{font-size:16px!important;line-height:1.46!important}
body.gcCodyFamiliarV3 .userCard .uName strong{font-size:13px!important}
body.gcCodyFamiliarV3 .userCard .uBody small{font-size:10.5px!important}
body.gcCodyFamiliarV3 .composer textarea{font-size:16px!important}

@media(max-width:900px){
 body.gcCodyFamiliarV3{--gc55-rail:0px}
 #gcUserMenuOverlay .gcUserMenu.gcUserMenuCodyTabs{width:100%!important;max-width:100%!important;border-radius:13px 13px 0 0!important}
 #gcUserMenuOverlay .gcUserMenuTabs button{font-size:12px!important}
 body.gcCodyFamiliarV3 #profileModal .profileModalCard,body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileEditCard{width:100%!important;max-width:100%!important;border-radius:12px 12px 0 0!important}
 body.gcCodyFamiliarV3 #profileModal .gcProfileHero{min-height:228px!important}
 body.gcCodyFamiliarV3 #profileModal .profileActions{grid-template-columns:1fr!important}
}

/* Reply/citeren: direct vóór versturen duidelijk zichtbaar, zonder extra JS observer. */
#replyBar.replyBar:not(.hidden){min-height:54px!important;margin:0 8px!important;padding:7px 9px 7px 11px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border:1px solid #35516a!important;border-bottom:0!important;border-radius:7px 7px 0 0!important;background:#152638!important;box-shadow:inset 3px 0 #dfb64e!important;position:relative!important;z-index:8!important}
#replyBar>div{min-width:0!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:'label name' 'text text'!important;column-gap:6px!important;align-items:baseline!important}
#replyBar small{grid-area:label!important;color:#9fb2c5!important;font-size:10.5px!important;font-weight:700!important}
#replyBar #replyName{grid-area:name!important;color:#f3c95e!important;font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#replyBar #replyText{grid-area:text!important;margin-top:2px!important;color:#d5e0ea!important;font-size:12px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#replyBar #cancelReply{flex:0 0 34px!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid #425d76!important;border-radius:6px!important;background:#0f1c29!important;color:#fff!important;font-size:21px!important;line-height:1!important}
#replyBar #cancelReply:hover{background:#273c50!important}

/* Cody-profiel: acties staan in de aparte Meer-tab in plaats van onder Over mij. */
body.gcCodyFamiliarV3 #profileModal .gcCodyMoreHeading{display:grid!important;gap:2px!important;padding:10px 4px!important;border-bottom:1px solid #293f55!important}
body.gcCodyFamiliarV3 #profileModal .gcCodyMoreHeading b{font-size:13px!important;color:#f1f5f8!important}
body.gcCodyFamiliarV3 #profileModal .gcCodyMoreHeading span{font-size:10.5px!important;color:#93a7ba!important}
body.gcCodyFamiliarV3 #profileModal [data-profile-pane="more"] .profileActions{margin-top:8px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileCounters{left:auto!important;right:48px!important}
body.gcCodyFamiliarV3 #profileModal .gcProfileCounters>*{width:auto!important;min-width:34px!important;padding:0 8px!important}