/* Websitezijde van het gereserveerde Chatmee Retro-thema. De class wordt
   uitsluitend gezet vanuit de centrale site_theme-instelling van de chatbox. */

/* Dezelfde nette copyrightbalk op alle openbare websitepagina's. */
body > footer,
footer.chatmee-copyright-footer,
footer.contact-inline-footer,
footer.site-footer,
footer.footer {
  width: min(calc(100% - 20px),1180px) !important;
  min-height: auto !important;
  margin: -1px auto 2px !important;
  padding: 11px 16px !important;
  border: 1px solid var(--line,rgba(126,137,181,.48)) !important;
  border-top: 0 !important;
  border-radius: 0 0 9px 9px !important;
  color: var(--muted,#949bbd) !important;
  background: var(--surface,rgba(7,7,48,.92)) !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Laat de laatste inhoudskaart en footer als een geheel op elkaar aansluiten. */
body > main > section:last-of-type {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body > main:has(+ footer) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

main > footer.chatmee-copyright-footer,
main > footer.site-footer,
.contact-layout > footer.contact-inline-footer {
  width: 100% !important;
}

/* Home en Profiel-uitleg: aangesloten bovenkant, voldoende zichtbare ruimte onderaan. */
main > footer.page-attached-footer {
  margin: -1px auto 0 !important;
}

main:has(> footer.page-attached-footer) {
  padding-bottom: 64px !important;
}
html.site-theme-chatmee-retro {
  color-scheme: dark;
  background: #020218;
}
html.site-theme-chatmee-retro body,
html.site-theme-chatmee-retro body.cm-wave-background,
html.site-theme-chatmee-retro body.cm-wave-background[data-theme="light"],
html.site-theme-chatmee-retro body.cm-wave-background[data-theme="dark"] {
  --bg: #03031d;
  --text: #f4f5ff;
  --muted: #afb5cf;
  --line: rgba(126,137,181,.48);
  --primary: #db1729;
  --primary-hover: #ef2e40;
  --surface: rgba(7,7,48,.95);
  --soft: rgba(255,255,255,.08);
  --menu-bg: #0b0c37;
  --pink: #dc1830;
  --cyan: #8998d2;
  --gold: #f4c552;
  color: #f4f5ff !important;
  background:
    radial-gradient(circle at 18% 14%,rgba(207,16,32,.10),transparent 28%),
    radial-gradient(circle at 82% 32%,rgba(95,72,190,.10),transparent 30%),
    linear-gradient(145deg,#000,#060608 48%,#000) !important;
  background-size: 140% 140%, 150% 150%, 100% 100% !important;
  background-attachment: fixed !important;
  animation: chatmee-retro-black-drift 18s ease-in-out infinite alternate !important;
  isolation: isolate;
}
html.site-theme-chatmee-retro body::before {
  content: "📹       👑       🎤       🔞\A        😄       💬       🎉       ❤️\A  👑       🎤       😎       📹       🔞\A       💬       ❤️       😄       🎉" !important;
  position: fixed !important;
  inset: 8vh -12vw auto !important;
  z-index: 0 !important;
  display: block !important;
  width: 124vw !important;
  height: 145vh !important;
  color: #fff !important;
  background: none !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: clamp(25px,2.2vw,42px) !important;
  line-height: 31vh !important;
  letter-spacing: clamp(8px,1.5vw,28px) !important;
  white-space: pre !important;
  opacity: .24 !important;
  filter: grayscale(.08) saturate(.92) drop-shadow(0 0 9px rgba(220,24,48,.38)) !important;
  pointer-events: none !important;
  user-select: none !important;
  animation: chatmee-retro-emoji-sheet 42s linear -19s infinite !important;
  will-change: transform;
}
html.site-theme-chatmee-retro body::after {
  content: "🔞       🎉       📹       😄\A     🎤       ❤️       👑       💬\A  😎       📹       🔞       🎉\A       ❤️       👑       🎤       😄" !important;
  position: fixed !important;
  inset: 22vh auto auto -6vw !important;
  z-index: 0 !important;
  display: block !important;
  width: 118vw !important;
  height: 150vh !important;
  color: #fff !important;
  background: none !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: clamp(22px,1.9vw,36px) !important;
  line-height: 34vh !important;
  letter-spacing: clamp(18px,2.6vw,48px) !important;
  white-space: pre !important;
  opacity: .17 !important;
  filter: grayscale(.12) saturate(.86) drop-shadow(0 0 8px rgba(110,125,195,.34)) !important;
  pointer-events: none !important;
  user-select: none !important;
  animation: chatmee-retro-emoji-sheet-alt 54s linear -36s infinite !important;
  will-change: transform;
}
html.site-theme-chatmee-retro .cm-animated-background {
  display: none !important;
}
html.site-theme-chatmee-retro .chatmee-retro-floaters {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
html.site-theme-chatmee-retro body > :not(.chatmee-retro-floaters) {
  position: relative;
  z-index: 2;
}
html.site-theme-chatmee-retro .chatmee-retro-floater {
  --float-size: 34px;
  --float-duration: 22s;
  --float-delay: 0s;
  --float-left: 10%;
  position: absolute;
  left: var(--float-left);
  bottom: -90px;
  display: grid;
  width: calc(var(--float-size) + 18px);
  height: calc(var(--float-size) + 18px);
  place-items: center;
  border: 1px solid rgba(220,24,48,.30);
  border-radius: 50%;
  color: #fff;
  background: rgba(8,8,12,.50);
  box-shadow: 0 0 18px rgba(207,16,32,.18);
  font-size: var(--float-size);
  line-height: 1;
  opacity: 0;
  filter: grayscale(.08) saturate(.9);
  animation: none !important;
  will-change: transform, opacity;
}
html.site-theme-chatmee-retro .chatmee-retro-floater:nth-child(2n) {
  border-color: rgba(137,152,210,.28);
  box-shadow: 0 0 18px rgba(90,105,175,.16);
  animation-name: none !important;
}
html.site-theme-chatmee-retro body > header,
html.site-theme-chatmee-retro .topbar {
  width: min(100% - 20px,1180px) !important;
  min-height: 70px !important;
  margin: 10px auto 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #586185 !important;
  border-top: 5px solid #cf1020 !important;
  border-radius: 5px 5px 0 0 !important;
  color: #fff !important;
  background: linear-gradient(#11113f,#07072d) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.34) !important;
}
html.site-theme-chatmee-retro body > header::after,
html.site-theme-chatmee-retro .topbar::after {
  height: 1px !important;
  background: #70799a !important;
  animation: none !important;
}
html.site-theme-chatmee-retro .brand img,
html.site-theme-chatmee-retro header img {
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.82)) !important;
}
html.site-theme-chatmee-retro .top-menu,
html.site-theme-chatmee-retro .rules-top-menu,
html.site-theme-chatmee-retro .nav {
  border: 1px solid #596286 !important;
  border-radius: 3px !important;
  background: #0e103b !important;
  background-image: none !important;
  animation: none !important;
}
html.site-theme-chatmee-retro .top-menu a,
html.site-theme-chatmee-retro .rules-top-menu a,
html.site-theme-chatmee-retro .nav a {
  border-radius: 2px !important;
  color: #f2f3ff !important;
  background: transparent !important;
}
html.site-theme-chatmee-retro .top-menu a:hover,
html.site-theme-chatmee-retro .top-menu a.active,
html.site-theme-chatmee-retro .top-menu a.primary,
html.site-theme-chatmee-retro .rules-top-menu a:hover,
html.site-theme-chatmee-retro .rules-top-menu a.active,
html.site-theme-chatmee-retro .nav a:hover,
html.site-theme-chatmee-retro .nav a.active,
html.site-theme-chatmee-retro .nav a.primary {
  border-color: #ef4353 !important;
  color: #fff !important;
  background: linear-gradient(#df1a2c,#950715) !important;
}
html.site-theme-chatmee-retro .theme-toggle,
html.site-theme-chatmee-retro .rules-theme-toggle {
  display: none !important;
}
html.site-theme-chatmee-retro .language-switch-slot .chatmee-language-switch {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.site-theme-chatmee-retro body > main {
  width: min(100% - 20px,1180px) !important;
}
html.site-theme-chatmee-retro .age,
html.site-theme-chatmee-retro .eyebrow,
html.site-theme-chatmee-retro .kicker {
  border-color: #ef4353 !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(#df1a2c,#950715) !important;
}
html.site-theme-chatmee-retro .info,
html.site-theme-chatmee-retro .server-status,
html.site-theme-chatmee-retro .mobile-chat,
html.site-theme-chatmee-retro .seo-copy article,
html.site-theme-chatmee-retro .home-info,
html.site-theme-chatmee-retro .rules-menu-block,
html.site-theme-chatmee-retro .card,
html.site-theme-chatmee-retro .contact-card,
html.site-theme-chatmee-retro .profile-preview,
html.site-theme-chatmee-retro .guide-step,
html.site-theme-chatmee-retro .summary-bar,
html.site-theme-chatmee-retro .profile-card,
html.site-theme-chatmee-retro .empty-state,
html.site-theme-chatmee-retro .error-state,
html.site-theme-chatmee-retro main:not(.profile-page) > section {
  border: 1px solid #565f85 !important;
  border-radius: 4px !important;
  color: #f2f3ff !important;
  background: rgba(8,8,57,.94) !important;
  box-shadow: none !important;
}
html.site-theme-chatmee-retro .page-head {
  padding: 14px 16px 16px !important;
  border-top: 3px solid #cf1020 !important;
}
html.site-theme-chatmee-retro .intro {
  background: transparent !important;
}
html.site-theme-chatmee-retro h1,
html.site-theme-chatmee-retro h2,
html.site-theme-chatmee-retro h3,
html.site-theme-chatmee-retro strong {
  color: #fff !important;
}
html.site-theme-chatmee-retro p,
html.site-theme-chatmee-retro dd,
html.site-theme-chatmee-retro .muted {
  color: #c2c7de !important;
}
html.site-theme-chatmee-retro .hero-actions a,
html.site-theme-chatmee-retro .mobile-chat-actions a,
html.site-theme-chatmee-retro .rules-menu-grid a,
html.site-theme-chatmee-retro .profile-action,
html.site-theme-chatmee-retro .pagination span,
html.site-theme-chatmee-retro button.submit {
  border: 1px solid #ef4353 !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(#df1a2c,#950715) !important;
}
html.site-theme-chatmee-retro input,
html.site-theme-chatmee-retro textarea,
html.site-theme-chatmee-retro select {
  border-color: #59638a !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: #030323 !important;
}
html.site-theme-chatmee-retro .profile-card {
  border-left: 4px solid #a20a1a !important;
}
html.site-theme-chatmee-retro .profile-card:hover {
  border-color: #ef4353 !important;
  background: #101044 !important;
}
html.site-theme-chatmee-retro .profile-card .avatar,
html.site-theme-chatmee-retro .preview-avatar {
  border-color: #8994bc !important;
  border-radius: 4px !important;
  background: #030323 !important;
}
html.site-theme-chatmee-retro .role-pill,
html.site-theme-chatmee-retro .profile-meta span,
html.site-theme-chatmee-retro .pill {
  border-radius: 3px !important;
  background: #15154c !important;
}
/* De kaart direct boven de footer heeft rechte onderhoeken; zo ontstaat nergens
   een knikje tussen de kaart en de doorlopende footeromlijsting. */
html.site-theme-chatmee-retro main > *:has(+ footer.page-attached-footer),
html.site-theme-chatmee-retro main > *:has(+ footer.profiles-attached-footer),
html.site-theme-chatmee-retro main > *:has(+ footer.site-footer),
html.site-theme-chatmee-retro .contact-layout > *:has(+ footer.contact-inline-footer) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
html.site-theme-chatmee-retro footer.page-attached-footer,
html.site-theme-chatmee-retro footer.profiles-attached-footer,
html.site-theme-chatmee-retro footer.site-footer,
html.site-theme-chatmee-retro footer.contact-inline-footer {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 9px !important;
  border-bottom-right-radius: 9px !important;
}
html.site-theme-chatmee-retro footer {
  color: #949bbd !important;
  min-height: auto !important;
  margin: -1px auto 2px !important;
  padding: 11px 16px !important;
  border: 1px solid #565f85 !important;
  border-top: 0 !important;
  border-radius: 0 0 9px 9px !important;
  background: linear-gradient(#11113f,#07072d) !important;
  box-shadow: none !important;
  align-self: start !important;
}
@keyframes chatmee-retro-black-drift {
  0% { background-position: 0% 0%, 100% 30%, 0 0; }
  100% { background-position: 35% 20%, 62% 5%, 0 0; }
}
@keyframes chatmee-retro-emoji-sheet {
  0% { transform: translate3d(0,70vh,0) rotate(-2deg); }
  100% { transform: translate3d(5vw,-155vh,0) rotate(3deg); }
}
@keyframes chatmee-retro-emoji-sheet-alt {
  0% { transform: translate3d(0,62vh,0) rotate(2deg); }
  100% { transform: translate3d(-5vw,-165vh,0) rotate(-3deg); }
}
@keyframes chatmee-retro-float {
  0% { transform: translate3d(0,80px,0) rotate(-10deg) scale(.78); opacity: 0; }
  10% { opacity: .46; }
  48% { transform: translate3d(42px,-52vh,0) rotate(12deg) scale(1); opacity: .34; }
  90% { opacity: .42; }
  100% { transform: translate3d(-18px,-118vh,0) rotate(-8deg) scale(.86); opacity: 0; }
}
@keyframes chatmee-retro-float-alt {
  0% { transform: translate3d(0,70px,0) rotate(12deg) scale(.8); opacity: 0; }
  12% { opacity: .40; }
  52% { transform: translate3d(-38px,-56vh,0) rotate(-12deg) scale(.96); opacity: .30; }
  88% { opacity: .38; }
  100% { transform: translate3d(24px,-118vh,0) rotate(10deg) scale(.82); opacity: 0; }
}
@media (max-width: 920px) {
  html.site-theme-chatmee-retro body > header,
  html.site-theme-chatmee-retro .topbar {
    align-items: center !important;
  }
  html.site-theme-chatmee-retro .top-menu,
  html.site-theme-chatmee-retro .rules-top-menu,
  html.site-theme-chatmee-retro .nav {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}
@media (max-width: 620px) {
  html.site-theme-chatmee-retro body > header,
  html.site-theme-chatmee-retro .topbar,
  html.site-theme-chatmee-retro body > main {
    width: calc(100% - 12px) !important;
  }
  html.site-theme-chatmee-retro .chatmee-retro-floater {
    --float-size: 25px;
  }
}