/* Snoeten.nl – brede responsive correcties, 22 oktober 2026.
   Dit stylesheet wordt als LAATSTE ingeladen zodat oude vaste maten
   mobiel/tablet niet opnieuw de nieuwe indeling overschrijven.
   Desktop (vanaf 1025px) wordt niet aangepast. */
@media (max-width: 1024px) {
  html, body { max-width: 100%; }
  body { min-width: 0 !important; }
  #container, #profile, .site-shell-r420, .welcome-container,
  .groups-profile, .directory-page, .help-page, .notifications-page,
  .dashboard-page, .games-page, .admin-page, .chateiland-page {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #main, #content, #content-inner, .site-page-hero,
  .profile-home-section, .profile-home-block, .profile-explorer-window,
  .welcome-page-layout, .welcome-community-columns, .chateiland-layout,
  .messages-page, .messages-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  :where(#main, #content, #content-inner) :where(img, video, canvas, svg) {
    max-width: 100%;
  }
  :where(#main, #content, #content-inner) iframe { max-width: 100%; }
  :where(#main, #content, #content-inner) :where(p, li, dd, blockquote, h1, h2, h3) {
    overflow-wrap: anywhere;
  }
  :where(#main, #content, #content-inner) :where(input, textarea, select) {
    max-width: 100%; box-sizing: border-box;
  }
  :where(.site-page-hero, .help-hero, .notifications-hero, .directory-hero, .messages-hero) {
    min-width: 0; flex-wrap: wrap;
  }
  :where(.site-page-hero, .help-hero, .notifications-hero, .directory-hero, .messages-hero) :where(h1, h2) {
    font-size: clamp(1.45rem, 4vw, 2.1rem);
  }
  :where(.help-page, .admin-page, .statistics-page, .donations-page,
         .directory-page, .chateiland-page) :where(.content-inner, .heading, .site-page-hero-copy) {
    min-width: 0;
  }
  /* Dialogen behouden een bruikbare sluitknop en scrollbare inhoud. */
  :where(.snoeten-popup-shell, .popup-window, .modal-content, [role="dialog"]) {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
  }
  :where(.snoeten-popup-shell, .popup-window, .modal-content)[style*="width"] {
    max-width: calc(100vw - 24px) !important;
  }
  :where(.snoeten-popup-shell, .popup-window) {
    max-height: calc(100dvh - 24px);
  }
  :where(.snoeten-popup-shell, .popup-window) :where(.snoeten-popup-shell__content, .popup-content) {
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-bottom-nav, #toggle.mobile-site-nav {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Chateiland: individuele platen, geen geforceerde desktopbreedte. */
  .chateiland-layout, .chateiland-layout > * { min-width: 0 !important; }
  /* Berichten: mobiele Snoeten-balken zijn de enige sitebrede navigatie.
     Oude duplicaat-links in de Messenger-rail verdwijnen; de VIER
     berichtenfilters blijven als aparte rij zichtbaar. */
  html body #container.messages-page-shell #messages {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(100dvh - 140px) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    overflow: visible !important;
  }
  html body.messages-body-fixed,
  html:has(#container.messages-page-shell) {
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  html body #container.messages-page-shell,
  html body #container.messages-page-shell #main {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body #container.messages-page-shell .messages-nav-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    display: block !important;
    overflow: visible !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e6ed !important;
    border-radius: 0 !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-global-taskbar-links,
  html body #container.messages-page-shell .messages-nav-rail .messages-global-header-links > .messages-rail-link,
  html body #container.messages-page-shell .messages-nav-rail > .messages-rail-link {
    display: none !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-global-header-links {
    display: contents !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 53px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 3px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.15 !important;
    border-radius: 7px !important;
    overflow: visible !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button::before {
    display: none !important;
    content: none !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button > .messages-filter-icon {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    color: inherit !important;
    line-height: 20px !important;
    transform: none !important;
    inset: auto !important;
    clip: auto !important;
    clip-path: none !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button > span.messages-filter-label {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    font-size: clamp(10px, 2vw, 13px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button::before {
    position: static !important;
    margin: 0 !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button mark {
    position: absolute !important;
    top: -3px !important;
    right: -2px !important;
    min-width: 17px !important;
  }
  html body #container.messages-page-shell #messages-chats {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
  }
  html body #container.messages-page-shell #messages-conversation,
  html body #container.messages-page-shell #messages-container,
  html body #container.messages-page-shell .messages-conversation-shell {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  html body #container.messages-page-shell #messages.is-thread-open .messages-nav-rail,
  html body #container.messages-page-shell.is-thread-open .messages-nav-rail {
    display: none !important;
  }
  html body #container.messages-page-shell #messages.is-thread-open #messages-conversation,
  html body #container.messages-page-shell #messages.is-thread-open #messages-container {
    grid-row: 1 / -1 !important;
  }
  html body #container.messages-page-shell #messages.is-thread-open #messages-chats,
  html body #container.messages-page-shell #messages:not(.is-thread-open) #messages-conversation {
    display: none !important;
  }
  html body #container.messages-page-shell .messages-mobile-back {
    display: inline-flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  html body #container.messages-page-shell .messages-thread-list,
  html body #container.messages-page-shell .messages-conversation-shell {
    overflow-wrap: anywhere;
  }
  html body #container.messages-page-shell .chat-bubble {
    max-width: min(85%, 680px) !important;
    overflow-wrap: anywhere;
  }
  /* Composer: niet buiten de viewport en invoervelden onder elkaar. */
  #form-posts #dashboardComposer.messages-compose-editor .messages-compose-details {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  #form-posts #dashboardComposer.messages-compose-editor.is-open {
    width: min(860px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}
@media (min-width: 701px) and (max-width: 1024px) {
  :where(.chateiland-layout, .welcome-community-columns) > * { min-width: 0 !important; }
  :where(.welcome-community-columns, .chateiland-layout) {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  html body #container.messages-page-shell #messages {
    max-width: 100% !important;
  }
}
@media (max-width: 1024px) {
  /* Iedere hoofdplaat past binnen het scherm zonder horizontaal schuiven. */
  :where(#container:not(.messages-page-shell), .site-shell-r420, .welcome-container)
      :where(#main, #content, #content-inner) {
    min-width: 0 !important;
  }
  :where(.chateiland-layout, .welcome-community-columns, .welcome-page-layout,
         .search-page-layout, .alphabet-page-layout, .list-page-layout,
         .directory-page-layout, .dashboard-page-layout, .notifications-layout,
         .help-page-layout, .statistics-layout) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .chateiland-layout > :where(.chateiland-column, aside, section),
  .welcome-community-columns > *, .welcome-page-layout > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Lange tabellen horizontaal binnen de plaat, niet de hele pagina. */
  :where(.admin-page, .statistics-info-page, .wallet-page, .help-page, .games-page) table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  :where(.help-page, .admin-page, .donations-page, .site-shell-r420) :where(.site-page-hero, .help-hero) {
    gap: 10px;
  }
  :where(.help-page, .admin-page, .donations-page, .site-shell-r420) :where(.site-page-hero-icon, .help-hero-mark) {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 34px;
  }
  .site-shell-r420 :where(.help-hero-actions, .site-page-hero-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  :where(.snoeten-popup-shell, .popup-window, .modal-content, [role="dialog"]) {
    max-width: calc(100vw - 16px) !important;
  }
  #form-posts #dashboardComposer.messages-compose-editor .profile-bio-editor-toolbar {
    max-width: 100% !important;
    overflow-x: auto;
  }
}
@media (max-width: 400px) {
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button {
    padding: 8px 1px !important;
  }
  html body #container.messages-page-shell .messages-nav-rail .messages-filter-tabs button > span.messages-filter-label {
    font-size: 10px !important;
  }
}

/* r391 — mobiele pagina sluit rechtstreeks aan op de navigatie en schermranden.
   Telefoons en tablets tot 1024px; desktop blijft ongewijzigd.
   De ruimte hoort IN de contentplaten en niet om de volledige pagina. */
@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    overflow-x: clip;
  }

  /* De mobiele header is vast: geen lege strook eronder of zijkanten. */
  html body {
    /* Precies 20px ruimte tussen de vaste blauwe navigatie en de eerste plaat. */
    padding-top: calc(var(--snoeten-mobile-top, 126px) + 20px) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    /* De laatste inhoud eindigt 20px boven de vaste oranje navigatie. */
    padding-bottom: calc(var(--snoeten-mobile-bottom, 76px) + 20px + env(safe-area-inset-bottom)) !important;
  }

  html body :is(#container, #profile),
  html body :is(#container, #profile).site-shell-r420,
  html body #container.groups-profile {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
  }

  /* Geen extra buitenruimte van hoofdinhoud of gewone paginakolommen. */
  html body :is(#container, #profile) > #main,
  html body :is(#container, #profile) > #sidebar:not([data-mobile-panel]),
  html body :is(#container, #profile) #content,
  html body :is(#container, #profile) #content-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Bestaande pagina's met een flex-hoofd- en zijdeel mogen op mobiel
     niet twee keer 100% breed naast elkaar blijven staan. */
  html body #container:not(.messages-page-shell) #content:not(.messages-content) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Voor gewone platen blijft de inhoud van de schermrand af. */
  html body #container #main article:not(.profile-privacy-control),
  html body #container #content > section,
  html body #container #content-inner > section,
  html body #container #main > .site-page-panel,
  html body #container #main > .directory-panel,
  html body #container #main > .notifications-panel {
    box-sizing: border-box !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  /* Profielblokken behouden hun bestaande individuele binnenruimte (12/20px).
     Alleen de gehele profielpagina komt tot aan de rand. */
  html body #profile > #main,
  html body #profile .profile-home-window,
  html body #profile .profile-home-primary,
  html body #profile .profile-home-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Copyrightfooter volgt de volle pagina, zonder los wit strookje. */
  html body :is(#container, #profile) > #footer.site-footer {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* r391 — Profielmobiel/tablet: buitenste platen hoekig; cover, avatar en bediening
   in een compacte indeling. Inhoud, menu's en kleine kaarten houden hun eigen radius. */
@media (max-width: 1024px) {
  html body #profile:not(.groups-profile) .profile-home-content :is(
    .profile-home-block, #aboutMeContainer, #profileTapsCard,
    #profileLatestPhotos, .profile-home-visitors-card,
    .profile-home-friends-card, .profile-home-bio-card,
    .profile-home-guestbook-card, .profile-home-prikbord-card,
    .profile-home-taps-card, .profile-home-playlist-card,
    [data-profile-block]
  ),
  html body #profile:not(.groups-profile) .profile-home-primary > .profile-cover-message-panel,
  html body #profile:not(.groups-profile) .profile-home-primary > #cover.profile-home-cover,
  html body #profile:not(.groups-profile) .profile-home-content [data-profile-block] > .profile-home-section-taskbar,
  html body #profile:not(.groups-profile) .profile-home-block > .profile-home-section-taskbar,
  html body #profile:not(.groups-profile) .profile-locked-notice-card,
  html body #profile:not(.groups-profile) .profile-locked-identity-plate {
    border-radius: 0 !important;
  }
  html body #container :is(.welcome-panel,.directory-panel,.directory-sidebar-panel,
    .notifications-panel,.site-page-panel,.help-panel,.chateiland-panel,
    .dashboard-panel,.profile-panel,.panel-content,.main-panel),
  html body #container #main > :is(.panel,.card,article,section),
  html body #container #main > :is(.content-inner,.page-content,.main-content) > :is(section,article,.panel,.card),
  html body #container #content > :is(.panel,.card,article,section),
  html body #container #content-inner > :is(.panel,.card,article,section),
  html body #container #content > #content-inner > :is(.panel,.card,article,section),
  html body #container #main :is(.directory-panel,.site-page-panel,.welcome-panel,
    .notifications-panel,.help-page-panel,.chateiland-card),
  html body :is(#profile,#container) > #footer.site-footer {
    border-radius: 0 !important;
  }

  /* De cover, identiteitsbalk en inhoud zijn één aansluitende mobiele kolom. */
  html body #profile:not(.groups-profile) .profile-home-primary {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* Cover schaalt op mobiel mee met de schermbreedte, ongeacht de natuurlijke
     beeldmaat. Geen 320px hoog vak meer op een smalle telefoon. */
  html body #profile:not(.groups-profile) .profile-home-primary > #cover.profile-home-cover:not(.profile-home-cover--hidden) {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(132px, 38vw, 220px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    overflow: visible !important;
  }
  html body #profile:not(.groups-profile) #cover.profile-home-cover:not(.profile-home-cover--hidden) > :is(
    img.profile-home-cover-image-layer, img.profile-home-cover-default-image
  ) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  html body #profile:not(.groups-profile) #cover.profile-home-cover:not(.profile-home-cover--hidden) > .profile-home-cover-layout-reserver {
    display: none !important;
  }

  /* Avatar hangt net over de cover, zonder negatieve offsets van desktop. */
  html body #profile:not(.groups-profile) #cover.profile-home-cover:not(.profile-home-cover--hidden) > #about.profile-home-cover-about {
    position: absolute !important;
    z-index: 60 !important;
    top: auto !important;
    bottom: -44px !important;
    left: 16px !important;
    right: auto !important;
    width: 88px !important;
    max-width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #profile:not(.groups-profile) #cover.profile-home-cover #aboutAvatar.profile-home-cover-avatar {
    box-sizing: border-box !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  html body #profile:not(.groups-profile) #cover.profile-home-cover #aboutAvatar.profile-home-cover-avatar > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 7px !important;
  }

  /* Profielkop onder de cover: naam + modules, daaronder status en acties. */
  html body #profile:not(.groups-profile) .profile-home-primary > .profile-cover-message-panel {
    box-sizing: border-box !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 53px 16px 16px !important;
    gap: 12px !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-message-panel > .profile-cover-section-tabs {
    box-sizing: border-box !important;
    position: static !important;
    display: block !important;
    flex: none !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-message-panel .profile-cover-identity {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-name-modules-row {
    order: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-name-modules-row > .profile-cover-identity-name {
    position: static !important;
    display: block !important;
    flex: 0 1 auto !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: calc(100% - 50px) !important;
    height: auto !important;
    margin: 0 !important;
    font-size: clamp(19px, 5.5vw, 25px) !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-modules-toggle {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-message-panel .profile-cover-identity-status {
    order: 1 !important;
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-live-activity-inline {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    line-height: inherit !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-message-panel > .profile-cover-primary-actions {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-message-panel .profile-cover-action-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-action-group > :is(.profile-quick-actions,.profile-owner-settings,.profile-access-more) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-action-group :is(button.button,a.button) {
    box-sizing: border-box !important;
    min-height: 38px !important;
    height: 38px !important;
  }
  /* Bericht/Tik vormen één nette knoppengroep; instellingen staat los. */
  html body #profile:not(.groups-profile) .profile-cover-action-group > .profile-quick-actions {
    display: inline-flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #profile#profile:not(.groups-profile) .profile-cover-message-panel .profile-cover-action-group > .profile-quick-actions.profile-message-tap-group > button.button.profile-access-more-toggle.profile-quick-actions-toggle.profile-message-toggle {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 106px !important;
    min-width: 106px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 8px 0 0 8px !important;
    white-space: nowrap !important;
  }
  html body #profile#profile:not(.groups-profile) .profile-cover-message-panel .profile-cover-action-group > .profile-quick-actions.profile-message-tap-group > button.button.profile-quick-tap.profile-message-tap-button {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 87px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 10px !important;
    border-radius: 0 8px 8px 0 !important;
    white-space: nowrap !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-action-group > .profile-owner-settings {
    margin: 0 !important;
  }
  html body #profile#profile:not(.groups-profile) .profile-cover-message-panel .profile-cover-action-group > .profile-owner-settings > button.button.profile-access-more-toggle {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  html body #profile:not(.groups-profile) .profile-cover-modules-menu {
    max-width: calc(100vw - 32px) !important;
  }

  /* Als de cover bewust uitgeschakeld is, blijft de avatar zichtbaar en
     reserveren we ruimte voor die avatar boven de naam. */
  html body #profile:not(.groups-profile):not(.profile-access-locked):has(#cover.profile-home-cover--hidden) .profile-cover-message-panel {
    min-height: 0 !important;
    padding-top: 118px !important;
  }

  /* Prikbord: berichtinhoud pas NA de volledige avatar/naam/datum-kop. */
  html body #container.dashboard-page-shell #overview-posts .post:not(.group-feed-post) > article > .header {
    display: grid !important;
    grid-template-columns: 70px minmax(0,1fr) auto !important;
    align-items: start !important;
    column-gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html body #container.dashboard-page-shell #overview-posts .post:not(.group-feed-post) > article > .header > .avatar-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }
  html body #container.dashboard-page-shell #overview-posts .post:not(.group-feed-post) > article > .header > .meta {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
  html body #container.dashboard-page-shell #overview-posts .post:not(.group-feed-post) > article > .message {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Reacties hebben een grid-avatar naast de tekst; de geneste lijst staat
     IN de tekstkolom. Compenseer exact die kolombreedte per niveau,
     zodat subreacties met hun profielfoto links op dezelfde lijn beginnen. */
  html body .status-comments.status-comments-facebook .status-comment.status-comment-threaded {
    --reply-grid-offset: 47px;
  }
  html body .status-comments.status-comments-facebook .status-comment-children .status-comment.status-comment-threaded {
    --reply-grid-offset: 47px;
  }
  html body .status-comments.status-comments-facebook .status-comment-children .status-comment-children .status-comment.status-comment-threaded {
    --reply-grid-offset: 36px;
  }
  html body :is(#container.dashboard-page-shell,.profile-prikbord-detail-dialog,.notification-detail-dialog)
    .status-comments.status-comments-facebook .status-comment-children {
    margin: 9px 0 0 calc(-1 * var(--reply-grid-offset, 47px)) !important;
    padding: 0 !important;
    width: calc(100% + var(--reply-grid-offset, 47px)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  html body :is(#container.dashboard-page-shell,.profile-prikbord-detail-dialog,.notification-detail-dialog)
    .status-comments.status-comments-facebook .status-comment-children::before,
  html body :is(#container.dashboard-page-shell,.profile-prikbord-detail-dialog,.notification-detail-dialog)
    .status-comments.status-comments-facebook .status-comment-children > .status-comment.status-comment-threaded::before {
    display: none !important;
    content: none !important;
  }
  html body :is(#container.dashboard-page-shell,.profile-prikbord-detail-dialog,.notification-detail-dialog)
    .status-comments.status-comments-facebook .status-comment-children .status-comment {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* r415 — Afgeronde profielfoto’s sitebreed (7px),
   sitebreed op telefoon, tablet én desktop. Geen radius op gewone media. */
html body :is(.avatar-wrapper, .notification-avatar-wrapper,
  .profile-friend-avatar-wrapper, .profile-guestbook-avatar-wrapper,
  .status-comment-avatar-link, .status-comment-composer-avatar,
  .profile-wisselfoto-stage, .profile-locked-avatar, #aboutAvatar) {
  border-radius: 7px !important;
}
html body :is(img.avatar, img.notification-avatar, img.guestbook-user-avatar,
  img.status-comment-avatar, .status-comment-avatar-link > img,
  .status-comment-composer-avatar > img, .avatar-wrapper > img,
  .notification-avatar-wrapper > img, .profile-friend-avatar-wrapper > img,
  .profile-guestbook-avatar-wrapper > img, .profile-locked-avatar > img,
  #aboutAvatar > img) {
  border-radius: 7px !important;
}
html body #profile #profileVisitors.profile-visitors-list .profile-friend-avatar-wrapper,
html body #profile #profileVisitors.profile-visitors-list .profile-friend-avatar-wrapper > img {
  border-radius: 7px !important;
}

/* Ook de dashboard-/reactie-selectors met een hogere ID-specificiteit volgen
   de Bezoekers-afronding, ongeacht schermbreedte of volgorde van profielsheets. */
html body #container.dashboard-page-shell #overview-posts .post .header > .avatar-wrapper,
html body #container.dashboard-page-shell #overview-posts .post .header > .avatar-wrapper > img.avatar,
html body #container.dashboard-page-shell #overview-posts .status-comments.status-comments-facebook .status-comment-avatar-link,
html body #container.dashboard-page-shell #overview-posts .status-comments.status-comments-facebook .status-comment-avatar,
html body #container.dashboard-page-shell #overview-posts .status-comments.status-comments-facebook .status-comment-composer-avatar,
html body #container.dashboard-page-shell #overview-posts .status-comments.status-comments-facebook .status-comment-composer-avatar img,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .avatar-wrapper,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .avatar-wrapper > img.avatar {
  border-radius: 7px !important;
}

/* Profielmodules met eigen, extra specifieke avatarregels. */
html body #profile .profile-home-friends-card #profileFriends .profile-friend-avatar-wrapper,
html body #profile .profile-home-friends-card #profileFriends .profile-friend-avatar-wrapper > img,
html body #profile #profileVisitors.profile-visitors-list .profile-friend-avatar-wrapper,
html body #profile #profileVisitors.profile-visitors-list .profile-friend-avatar-wrapper > img,
html body #profile #guestbookContainer .profile-guestbook-avatar-wrapper,
html body #profile #guestbookContainer .profile-guestbook-avatar-wrapper > img,
html body #profile #aboutAvatar > img,
html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper.profile-wisselfoto-stage > .profile-wisselfoto-layer {
  border-radius: 7px !important;
}

/* Andere echte profielfoto's (zoekers, berichten, activiteit en groepen). */
html body :is(
  img[class*="avatar"],
  img[class*="Avatar"],
  .message-thread-avatar, .message-mini-avatar, .chat-avatar, .chat-avatar-wrapper,
  .search-friend-avatar-wrapper, .alphabet-friend-avatar-wrapper,
  .list-profile-avatar-wrapper, .welcome-profile-avatar, .welcome-activity-avatar,
  .profile-home-cover-avatar, .profile-friends-compact-avatar,
  .profile-tap-avatar, .profile-tap-avatar-link,
  .group-member-avatar, .group-forum-avatar, .groups-update-avatar,
  .groups-suggestion-avatar, .groups-directory-card-avatar,
  .notification-detail-avatar, .notification-detail-avatar-wrap,
  .status-respect-avatar, .status-respect-person-avatar,
  .birthday-chip-avatar, .header-profile-start-visitor-avatar
) {
  border-radius: 7px !important;
}
html body :is(
  .message-thread-avatar, .message-mini-avatar, .chat-avatar-wrapper,
  .search-friend-avatar-wrapper, .alphabet-friend-avatar-wrapper,
  .list-profile-avatar-wrapper, .welcome-profile-avatar, .welcome-activity-avatar,
  .profile-home-cover-avatar, .profile-friends-compact-avatar,
  .profile-tap-avatar-link, .group-member-avatar, .group-forum-avatar,
  .notification-detail-avatar-wrap, .status-respect-avatar
) :is(img, picture) {
  border-radius: 7px !important;
}

/* Foto's op Welkom en de profielcover hebben oudere, specifieke hoekregels.
   Ook daar geldt exact dezelfde 7px-standaard. */
html body #container.welcome-page-shell .welcome-home-activity .welcome-activity-list .activity-left > a,
html body #container.welcome-page-shell .welcome-home-activity .welcome-activity-list .activity-left img,
html body #container.welcome-page-shell .welcome-online-profile-strip .welcome-profile-avatar,
html body #container.welcome-page-shell .welcome-online-profile-strip .welcome-profile-avatar img,
html body #profile .profile-home-cover-avatar,
html body #profile .profile-home-cover-avatar :is(img, .profile-wisselfoto-layer) {
  border-radius: 7px !important;
}

/* r380 — Vindbaar op Snoeten: één plaat op mobiel.
   De algemene mobiele artikelregel gaf de ingesloten privacybediening een
   tweede schaduw, radius en binnenruimte. Alleen de buitenste kaart is een plaat. */
@media (max-width: 1024px) {
  html body #container #main .welcome-privacy-panel article.profile-privacy-control,
  html body #container #main .directory-privacy-panel article.profile-privacy-control {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Op Welkom draagt de mobiele accordeon al de titel Profielprivacy.
   Verberg alleen de tweede titel in het geopende onderdeel. */
@media (max-width: 1024px) {
  html body #container.welcome-page-shell #main
  .welcome-mobile-panel-stack .welcome-home-privacy
  .profile-privacy-heading h2 {
    display: none !important;
  }
}


/* r391 — Mobiel/tablet: drie leden per rij, zonder de onderste achtergrondstrook.
   Dit zijn alleen de echte ledenrasters en de laatste plaat van pagina's;
   de uitklapbare rechterkolom behoudt zijn eigen kaartopmaak. */
@media (max-width: 1024px) {
  /* Het laatste contentdeel sluit aan op de footer/vaste ondernavigatie.
     De ruimte voor de vaste navigatie blijft IN de body aanwezig, zodat
     onderste knoppen niet onder de navigatie verdwijnen. */
  html body #container > #main {
    margin-bottom: 0 !important;
  }
  html body #container :is(
    #content-inner > section:last-of-type,
    #content > section:last-of-type,
    #main > article:last-of-type,
    #main > section:last-of-type,
    #main > .site-page-panel:last-child,
    #main > .directory-panel:last-child,
    #content-inner > .directory-panel:last-of-type,
    #content-inner > .search-results-panel:last-of-type
  ) {
    margin-bottom: 0 !important;
  }
  html body #container > #footer.site-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Zoeken / A–Z / Lijsten: in beide weergaven en bij het laden drie
     compacte profieltegels per rij, ook op schermen van 320 pixels. */
  html body #container :is(
    .search-page .search-friends-grid,
    .search-page .search-friends-loading-skeletons,
    .search-page .directory-profile-grid,
    .alphabet-page .alphabet-friends-grid,
    .alphabet-page .alphabet-friends-loading-skeletons,
    .list-page .list-profiles-grid,
    .list-page #recentProfiles,
    .list-page #topThisWeek,
    .list-page #onlineProfiles,
    .profiles
  ) {
    --numcolumns: 3 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body #container :is(
    .search-page .search-friend-item,
    .alphabet-page .alphabet-friend-item,
    .list-page .list-profile-item,
    .search-page .directory-profile-card
  ) { min-width: 0 !important; }

  /* Ook profielvrienden en bezoekers volgen de mobiele drieluikindeling. */
  html body #profile #friends-list,
  html body #profile .profile-home-friends-card #profileFriends > ul.profiles,
  html body #profile #profileVisitors.profile-visitors-list {
    --numcolumns: 3 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* A–Z gebruikt een extra #listAlphabet-wrapper; de bestaande
     lijststijl heeft twee ID-selectors en moet expliciet worden vervangen. */
  html body #container #main .alphabet-page #listAlphabet .alphabet-friends-grid.is-view-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body #container #main .alphabet-page #listAlphabet .alphabet-friends-grid.is-view-list > .alphabet-friend-item > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  html body #container #main .alphabet-page #listAlphabet .alphabet-friends-grid.is-view-list .alphabet-friend-avatar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Een gekozen 'Lijst'-weergave blijft dezelfde drie kolommen gebruiken.
     De avatar staat dan boven de naam in plaats van ernaast. */
  html body #container :is(
    .search-page .search-friends-grid.is-view-list .search-friend-item > a,
    .alphabet-page #listAlphabet .alphabet-friends-grid.is-view-list .alphabet-friend-item > a,
    .search-page .directory-profile-grid.is-view-list .directory-profile-card > a
  ) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 5px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  html body #container :is(
    .search-page .search-friends-grid.is-view-list .search-friend-avatar-wrapper,
    .alphabet-page #listAlphabet .alphabet-friends-grid.is-view-list .alphabet-friend-avatar-wrapper,
    .search-page .directory-profile-grid.is-view-list .directory-profile-photo
  ) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  html body #container :is(
    .search-page .search-friend-name,
    .alphabet-page .alphabet-friend-name,
    .list-page .list-profile-name,
    .search-page .directory-profile-name
  ) {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(10px, 3vw, 13px) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-align: center !important;
  }
  html body #container .search-page .directory-profile-grid.is-view-list .directory-profile-card > a {
    flex-direction: column !important;
  }
  html body #container :is(
    .search-page .search-friends-loading-skeletons.is-view-list .search-friend-skeleton,
    .alphabet-page .alphabet-friends-loading-skeletons.is-view-list .alphabet-friend-skeleton
  ) {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html body #container :is(
    .search-page .search-friends-loading-skeletons.is-view-list .search-friend-skeleton-avatar,
    .alphabet-page .alphabet-friends-loading-skeletons.is-view-list .alphabet-friend-skeleton-avatar
  ) {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* r391 — Ook de oudere profielkolommen vallen op tablets in één kolom.
   De mobiele herindeling blijft daarmee overeenkomen met het profiel op telefoon. */
@media (max-width: 1024px) {
  html body #profile #column-left,
  html body #profile #column-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body #profile .profile-home-block-layout > .profile-home-summary-grid,
  html body #profile .profile-home-block-layout > #column.profile-home-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* r394 — alle buitenste CONTENTPLATEN ook op tablet en mobiel hoekig.
   De oudere responsive regel herkende slechts enkele paneelnamen. Andere
   pagina's gebruiken hun eigen hero-, module- of profielplaatselector.
   Geen wijzigingen aan avatars, knoppen, badges, chatbubbels of pop-ups. */
@media (max-width: 1024px) {
  /* Welkom: dezelfde hoekige platen op de hoofd- en mobiele accordionversie.
     De bestaande --welcome-panel-radius wordt ook door de aparte zijmodules
     gebruikt; daarom hier aanpassen in plaats van extra overrides per plaat. */
  html body #container.welcome-page-shell {
    --welcome-panel-radius: 0px;
  }
  html body #container.welcome-page-shell :is(
    .welcome-hero, .welcome-panel, .welcome-rail-module,
    .welcome-home-privacy, .welcome-home-safe, .welcome-home-birthdays
  ),
  html body #container.welcome-page-shell .welcome-mobile-panel-stack > .welcome-panel {
    border-radius: 0 !important;
  }

  /* Platen in de centrale inhoud en de gewone zijpanelen.
     Alleen hoofdsecties/kaartlagen: formulieren en kleine bediening behouden
     hun eigen vorm. */
  html body #container #content :is(
    .chateiland-panel, .statistics-hero, .statistics-panel, .statistics-card,
    .directory-hero, .directory-panel, .directory-sidebar-panel,
    .notifications-panel, .dashboard-sidebar-panel, .dashboard-saved-panel,
    .help-page-panel, .help-panel, .site-page-panel, .games-panel,
    .admin-panel, .donations-panel, .welcome-hero
  ),
  html body #container #content-sidebar > :is(section, article, .panel, .card),
  html body #container #content-inner > :is(section, article, .panel, .card),
  html body #container #content-inner > #content-sidebar > :is(section, article, .panel, .card),
  html body #container #main > :is(section, article, .panel, .card),
  html body #container #main > .statistics-page :is(.statistics-hero, .statistics-panel, .statistics-card) {
    border-radius: 0 !important;
  }

  /* Chateiland heeft een extra specifieke desktopregel met twee ID's. */
  html body #container.directory-theme--chateiland #content.chateiland-page .chateiland-panel {
    border-radius: 0 !important;
  }

  /* Prikbord, meldingen en groepen: afzonderlijke witte inhoudsplaten. */
  html body #container.dashboard-page-shell #overview-posts > .post,
  html body #container.dashboard-page-shell #overview-posts .post:not(.chat-bubble),
  html body #container.dashboard-page-shell :is(#form-posts, #dashboard-saved-panel),
  html body #container.notifications-page-shell .notification-wrapper,
  html body #container.notifications-page-shell .notification-item,
  html body #container.groups-profile .group-profile-block {
    border-radius: 0 !important;
  }

  /* Profiel, profielstatistieken en subpagina's: geen afgeronde buitenplaten.
     Profielfoto's, kleine profielkaarten en berichtbubbels blijven intact. */
  html body #profile :is(
    .profile-home-block, .profile-home-section-taskbar,
    .profile-member-statistics, .profile-locked-notice-card,
    .profile-locked-identity-plate, .profile-explorer-window,
    .profile-explorer-primary, .profile-explorer-content,
    .profile-explorer-sidebar, .profile-guestbook-page-card,
    .profile-photos-overview, .profile-media-panel,
    .profile-friends-panel, .group-profile-block
  ),
  html body #profile .profile-home-primary > :is(
    .profile-home-cover, .profile-cover-message-panel
  ) {
    border-radius: 0 !important;
  }

  /* Berichten: alleen het buitenste paneel; niet de chatbubbels. */
  html body #container.messages-page-shell :is(
    .messages-nav-rail, .messages-panel, #messages-header, #messages-chats,
    #messages-conversation, #messages-filter, .messages-hero
  ) {
    border-radius: 0 !important;
  }
}