/* GewoonChatten 0.63.00 — mobile/device hardening + Cody responsive polish. */

/* System/presence events: never clip text with ellipsis. */
.gcPresenceEvent,.gcCommunityEvent{min-width:0!important;max-width:100%!important}
.gcPresenceEvent .gcPresenceText,.gcCommunityEvent .gcCommunityEventText{
  min-width:0!important;max-width:100%!important;white-space:normal!important;
  overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;word-break:normal!important;
  line-height:1.35!important;
}

/* PM text/actions: prevent 3-dot button from sitting over short messages. */
#pmModal .pm{min-width:0!important}
#pmModal .pmBubble{position:relative!important;min-width:0!important;max-width:min(82%,560px)!important;padding-right:44px!important}
#pmModal .pm.mine .pmBubble{margin-left:auto!important}
#pmModal .pmBody,#pmModal .pmBody .gcStyledMessageText{
  min-width:0!important;white-space:pre-wrap!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:anywhere!important;word-break:normal!important;
}
#pmModal .pmMenuBtn,#pmModal [data-pm-menu],#pmModal .pmActionsToggle{
  position:absolute!important;top:7px!important;right:7px!important;width:30px!important;height:30px!important;z-index:4!important;
}

/* Profile mobile: Cody-style hierarchy, less giant cards. */

.userCard .gcInlineStaffBadge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:0 5px;border:1px solid #e0bd54;border-radius:4px;background:#e7c95e;color:#101722;font-size:8px;font-weight:1000;letter-spacing:.035em;line-height:1;flex:0 0 auto}
.userCard .gcMuteUserlistBadge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;background:#7a5627;color:#ffe1a0;font-style:normal;font-size:11px;flex:0 0 auto}
@media(max-width:700px){
  body.gcCodyFamiliarV3 #profileModal{inset:0!important;padding:0!important;align-items:stretch!important}
  body.gcCodyFamiliarV3 #profileModal .profileModalCard{
    width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;
    border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;
    padding-top:env(safe-area-inset-top)!important;padding-bottom:env(safe-area-inset-bottom)!important;
  }
  body.gcCodyFamiliarV3 #profileModal #profileContent{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important}
  body.gcCodyFamiliarV3 #profileModal .gcProfileHero{
    height:210px!important;min-height:210px!important;padding:44px 52px 12px!important;
  }
  body.gcCodyFamiliarV3 #profileModal .gcProfileAvatar{
    width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important;flex-basis:88px!important;
  }
  body.gcCodyFamiliarV3 #profileModal .gcProfileNameLine h2{font-size:23px!important}
  body.gcCodyFamiliarV3 #profileModal .gcProfileIdentity>p{font-size:12px!important}
  body.gcCodyFamiliarV3 #profileModal .gcProfileTabs{
    position:sticky!important;top:0!important;z-index:12!important;display:flex!important;overflow-x:auto!important;
    scrollbar-width:none!important;background:#162b3e!important;border-top:1px solid #28445c!important;border-bottom:1px solid #28445c!important;
  }
  body.gcCodyFamiliarV3 #profileModal .gcProfileTabs::-webkit-scrollbar{display:none!important}
  body.gcCodyFamiliarV3 #profileModal .gcProfileTabs button{
    flex:0 0 auto!important;min-width:92px!important;height:46px!important;padding:0 12px!important;font-size:12px!important;
  }
  body.gcCodyFamiliarV3 #profileModal .gcProfilePane{padding:10px!important}
  body.gcCodyFamiliarV3 #profileModal .profileInfoGrid{display:block!important}
  body.gcCodyFamiliarV3 #profileModal .profileInfoRow{
    display:grid!important;grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr)!important;gap:10px!important;
    min-height:48px!important;margin:0!important;padding:10px 4px!important;border:0!important;border-bottom:1px solid #274158!important;
    border-radius:0!important;background:transparent!important;
  }
  body.gcCodyFamiliarV3 #profileModal .profileInfoRow strong{text-align:right!important;overflow-wrap:anywhere!important}
  body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.gcCodyFamiliarV3 #profileModal .gcCodyProfilePrimaryActions button{min-height:46px!important;font-size:11.5px!important}
  body.gcCodyFamiliarV3 #profileModal .gcProfileMusicCard,
  body.gcCodyFamiliarV3 #profileModal .gcProfileLevelCard{margin:8px 10px!important;border-radius:8px!important}
}

/* Profile editor: always scroll to the end on every phone/tablet. */
@media(max-width:900px){
  body.gcCodyFamiliarV3 #editProfileModal{inset:0!important;padding:0!important;align-items:stretch!important;overflow:hidden!important}
  body.gcCodyFamiliarV3 #editProfileModal .profileStudioCard,
  body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileEditCard{
    width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;
    display:flex!important;flex-direction:column!important;padding-top:env(safe-area-inset-top)!important;padding-bottom:env(safe-area-inset-bottom)!important;
  }
  body.gcCodyFamiliarV3 #editProfileModal .profileStudioBody,
  body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileEditBody,
  body.gcCodyFamiliarV3 #editProfileModal .gcCodyProfileHub{
    flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;padding-bottom:calc(90px + env(safe-area-inset-bottom))!important;
  }
}

/* Main mobile application: one canvas, no desktop side rail pushing content. */
@media(max-width:700px){
  html,body{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .topbar{height:58px!important;min-height:58px!important;padding:0 max(7px,env(safe-area-inset-right)) 0 max(7px,env(safe-area-inset-left))!important}
  .brandLogo,.gcBrandLogo,.brand img{max-width:150px!important;height:auto!important}
  .topActions{gap:4px!important;min-width:0!important}
  .gcTopIcon,.gcHamburger{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important}
  #quickbar,.quickbar{display:none!important;width:0!important;min-width:0!important}
  html:not(.gcCodyMobileShell) .layout{display:block!important;width:100%!important;max-width:100%!important;height:calc(var(--gc-vh,100dvh) - 58px)!important;min-width:0!important}
  html:not(.gcCodyMobileShell) .chat{position:absolute!important;inset:58px 0 0 0!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:0 0 calc(74px + env(safe-area-inset-bottom))!important}
  .chathead{min-height:50px!important;padding:8px 10px!important}
  .chathead h2{font-size:17px!important}
  .chathead p{font-size:10px!important;margin-top:2px!important}
  .messages{padding:8px 8px calc(142px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important}
  .msg{grid-template-columns:36px minmax(0,1fr)!important;gap:7px!important;margin-bottom:8px!important;min-width:0!important}
  .msg .avatar{width:36px!important;height:36px!important}
  .msg .body{min-width:0!important}
  .msg .msgText,.msg .gcStyledMessageText{font-size:14px!important;line-height:1.38!important;overflow-wrap:anywhere!important}
  .msg time,.msg .time{font-size:9px!important}
  html:not(.gcCodyMobileShell) .composer{
    position:absolute!important;left:0!important;right:0!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;z-index:40!important;
    display:grid!important;grid-template-columns:42px 42px minmax(0,1fr) 42px 48px!important;gap:5px!important;
    padding:7px!important;background:#102235!important;border-top:1px solid #2b475f!important;
  }
  html.gcCodyMobileShell .composer{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;inset:auto!important;flex:0 0 auto!important;width:100%!important;max-width:100%!important;z-index:40!important}
  .composer textarea{min-width:0!important;width:100%!important;min-height:42px!important;max-height:110px!important;font-size:16px!important;border-radius:20px!important;padding:10px 13px!important}
  .composer button{min-width:42px!important;width:42px!important;height:42px!important;padding:0!important;border-radius:10px!important}
  .gcMobileBottomNav{
    left:5px!important;right:5px!important;bottom:max(5px,env(safe-area-inset-bottom))!important;height:64px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;border-radius:15px!important;
  }
  .gcMobileBottomNav button{min-width:0!important;padding:4px 2px!important;font-size:10px!important}
  .gcMobileBottomNav button span,.gcMobileBottomNav button b{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .rooms,.gcRightPanel{
    position:fixed!important;top:58px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;width:min(92vw,360px)!important;
    max-width:min(92vw,360px)!important;height:auto!important;z-index:2147481200!important;box-shadow:0 18px 55px rgba(0,0,0,.65)!important;
  }
  .rooms{left:0!important;right:auto!important;transform:translateX(-104%)!important}
  .rooms.open,.rooms.is-open,.rooms.mobileOpen{transform:translateX(0)!important}
  .gcRightPanel{right:0!important;left:auto!important;transform:translateX(104%)!important}
  .gcRightPanel.open,.gcRightPanel.is-open,.gcRightPanel.mobileOpen{transform:translateX(0)!important}
  .sidebarBackdrop:not(.hidden){position:fixed!important;inset:58px 0 0!important;z-index:2147481100!important;background:rgba(2,8,14,.62)!important;backdrop-filter:blur(2px)!important}
}

/* Tiny phones. */
@media(max-width:380px){
  .brandLogo,.gcBrandLogo,.brand img{max-width:128px!important}
  .gcTopIcon,.gcHamburger{width:35px!important;height:35px!important;min-width:35px!important}
  .topActions{gap:2px!important}
  .composer{grid-template-columns:38px 38px minmax(0,1fr) 38px 44px!important;gap:4px!important;padding:5px!important}
  .composer button{min-width:38px!important;width:38px!important;height:40px!important}
  .gcMobileBottomNav{left:3px!important;right:3px!important}
}

/* Mobile PM is a real screen, not a floating desktop window. */
@media(max-width:700px){
  #pmModal{position:fixed!important;left:0!important;right:0!important;top:var(--gc-cody-vv-top,0px)!important;height:var(--gc-cody-vv-height,100dvh)!important;bottom:auto!important;padding:0!important;z-index:2147482500!important;background:#08121d!important;overflow:hidden!important}
  #pmModal .gcPmCard{
    position:relative!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;max-height:100%!important;
    border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
    padding-top:max(0px,env(safe-area-inset-top))!important;padding-bottom:max(0px,env(safe-area-inset-bottom))!important;
  }
  #pmModal .pmHead{flex:0 0 auto!important;min-height:56px!important}
  #pmModal .pmMessages{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;padding:10px 8px 112px!important}
  #pmModal .pmBottom{flex:0 0 auto!important;position:relative!important;bottom:auto!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important}
  #pmModal .pmBubble{max-width:88%!important}
  #pmModal .pmComposer textarea{font-size:16px!important}
}

/* Login screen: natural vertical scrolling and compact mobile composition. */
@media(max-width:700px){
  body.gcAuthActive,body.gcAuthActive #auth{overflow-y:auto!important;height:auto!important;min-height:100dvh!important}
  body.gcAuthActive .authOverlay{position:relative!important;inset:auto!important;display:block!important;min-height:100dvh!important;overflow:visible!important;padding:0!important}
  body.gcAuthActive .authShell{display:flex!important;flex-direction:column!important;width:100%!important;min-height:100dvh!important;overflow:visible!important}
  body.gcAuthActive .authHero{order:1!important;padding:14px 14px 8px!important;min-height:0!important}
  body.gcAuthActive .authHero>.authBrandMark,body.gcAuthActive .authHero>.authEyebrow,body.gcAuthActive .authHero>h1,body.gcAuthActive .authHero>p{display:none!important}
  body.gcAuthActive .authPanel{order:2!important;width:100%!important;padding:14px 14px calc(28px + env(safe-area-inset-bottom))!important;overflow:visible!important}
  .authPanelTop{align-items:flex-end!important;margin-bottom:10px!important}
  .authPanelTop h2{font-size:34px!important}
  .authLanguagePicker{padding:12px!important}
  .authTabs{min-height:48px!important}
  .authField>span{font-size:13px!important}
  .fieldControl input,.fieldControl select{font-size:16px!important;min-height:50px!important}
  .authRecent{margin:0!important;padding:12px!important}
  .authRecentHead small{display:none!important}
  .authRecentUsers{
    display:flex!important;gap:14px!important;overflow-x:auto!important;scrollbar-width:none!important;padding:8px 4px 4px!important;
    scroll-snap-type:x proximity!important;
  }
  .authRecentUsers::-webkit-scrollbar{display:none!important}
  .authRecentUser{flex:0 0 78px!important;min-width:78px!important;scroll-snap-align:center!important}
  .authRecentAvatar{width:66px!important;height:66px!important;margin:auto!important}
  .authRecentAvatar img{width:66px!important;height:66px!important;object-fit:cover!important}
  .authRecentUser small{display:block!important;text-align:center!important;max-width:78px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* Tablet: keep two-panel feeling without desktop overflow. */
@media(min-width:701px) and (max-width:1024px){
  .layout{grid-template-columns:52px minmax(0,1fr)!important}
  .gcRightPanel{position:fixed!important;right:0!important;top:68px!important;bottom:0!important;width:min(360px,42vw)!important;z-index:1200!important}
  .rooms{width:min(340px,42vw)!important}
}

/* Landscape phones: reduce chrome and preserve message area. */
@media(max-width:900px) and (orientation:landscape){
  .topbar{height:50px!important;min-height:50px!important}
  html:not(.gcCodyMobileShell) .chat{inset:50px 0 0!important}
  .rooms,.gcRightPanel{top:50px!important}
  .gcMobileBottomNav{height:54px!important}
  html:not(.gcCodyMobileShell) .composer{bottom:calc(60px + env(safe-area-inset-bottom))!important}
  .messages{padding-bottom:122px!important}
}

/* Generic modal/drawer consistency. */
@media(max-width:700px){
  .modal:not(#profileModal):not(#editProfileModal){padding:0!important;align-items:flex-end!important}
  .modal:not(#profileModal):not(#editProfileModal)>.modalCard{
    width:100%!important;max-width:100%!important;max-height:calc(100dvh - env(safe-area-inset-top))!important;
    border-radius:14px 14px 0 0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
    padding-bottom:max(16px,env(safe-area-inset-bottom))!important;
  }
  .modalClose{position:sticky!important;top:8px!important;float:right!important;z-index:50!important}
}