/* Chat-route styles — loaded only on /chat*. Moved verbatim from globals.css; do not edit for marketing. */

.chat-app {
  --chat-topbar-height: 3rem;
  --chat-panel-header-height: calc(3rem - 1px);
  --chat-anchor-ad-offset: 0px;
  box-sizing: border-box;
}

/*
 * Root chat shell: floor with min-height so AdSense height:auto cannot squash
 * the app to a fraction of the viewport. Prefer min-height over rigid height alone.
 */
html:has(.chat-app) [data-chat-shell] {
  height: 100%;
  min-height: 100vh;
  max-height: 100vh;
  padding-bottom: var(--chat-anchor-ad-offset);
  box-sizing: border-box;
}

html:has(.chat-app),
html:has(.chat-app) body {
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(.chat-app) #__next,
html:has(.chat-app) #__next > main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

@media (max-width: 639px) {
  html:has(.chat-app),
  html:has(.chat-app) body,
  html:has(.chat-app) #__next,
  html:has(.chat-app) #__next > main,
  html:has(.chat-app) [data-chat-shell] {
    /* !important beats AdSense inline height:auto / later cascade */
    min-height: 100dvh !important;
    max-height: 100dvh;
  }

  html:has(.chat-app) #__next,
  html:has(.chat-app) #__next > main,
  html:has(.chat-app) [data-chat-shell] {
    height: 100% !important;
  }
}

@media (min-width: 640px) {
  .chat-app {
    --chat-panel-header-height: calc(3.5rem - 1px);
  }
}

/* Settings/admin left nav: always fill viewport below the top bar. */
.chat-sidebar-fill-below-topbar {
  min-height: calc(100vh - var(--chat-topbar-height) - var(--chat-anchor-ad-offset));
  height: 100%;
}

@media (max-width: 639px) {
  .chat-sidebar-fill-below-topbar {
    min-height: calc(100dvh - var(--chat-topbar-height) - var(--chat-anchor-ad-offset));
  }
}


/* VIP/Royal dark mode — layered surfaces (mirrors white vs gray-50 in light mode) */
[data-chat-dark='true'] .chat-app {
  background-color: var(--color-surface-subtle);
  color: var(--color-on-surface);
}

[data-chat-dark='true'] .chat-app .bg-white {
  background-color: var(--color-surface);
}

[data-chat-dark='true'] .chat-app .bg-gray-50 {
  background-color: var(--color-surface-subtle);
}

[data-chat-dark='true'] .chat-app .bg-gray-100 {
  background-color: var(--color-input-bg);
}

[data-chat-dark='true'] .chat-app .bg-white\/95 {
  background-color: var(--color-surface-raised);
}

[data-chat-dark='true'] .chat-app .border-gray-200,
[data-chat-dark='true'] .chat-app .border-gray-100,
[data-chat-dark='true'] .chat-app .border-gray-200\/80 {
  border-color: var(--color-surface-border);
}

[data-chat-dark='true'] .chat-app .text-gray-900,
[data-chat-dark='true'] .chat-app .text-gray-800,
[data-chat-dark='true'] .chat-app .text-gray-700 {
  color: var(--color-on-surface);
}

[data-chat-dark='true'] .chat-app .text-gray-600,
[data-chat-dark='true'] .chat-app .text-gray-500,
[data-chat-dark='true'] .chat-app .text-gray-400 {
  color: var(--color-on-surface-muted);
}

[data-chat-dark='true'] .chat-app .placeholder-gray-400::placeholder {
  color: var(--color-on-surface-muted);
}

[data-chat-dark='true'] .chat-app .hover\:bg-gray-50:hover,
[data-chat-dark='true'] .chat-app .hover\:bg-gray-100:hover {
  background-color: var(--color-surface-hover);
}


[data-chat-dark='true'] .chat-app .chat-pattern-light-gradient,
[data-chat-dark='true'] .chat-app .chat-pattern-light-overlay {
  display: none;
}

.chat-pattern-dark-gradient,
.chat-pattern-dark-overlay {
  display: none;
}

[data-chat-dark='true'] .chat-app .chat-pattern-dark-gradient {
  display: block;
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-subtle)),
    var(--color-surface-subtle),
    color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-subtle))
  );
}

[data-chat-dark='true'] .chat-app .chat-pattern-dark-overlay {
  display: block;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-primary) 4%, transparent),
    transparent,
    color-mix(in srgb, var(--color-primary) 2%, var(--color-surface-subtle))
  );
}

.chat-pattern-svg {
  --chat-pattern-stroke-opacity: 0.11;
}

.chat-pattern-svg path,
.chat-pattern-svg circle,
.chat-pattern-svg rect {
  stroke-opacity: var(--chat-pattern-stroke-opacity);
}

[data-chat-dark='true'] .chat-app .chat-pattern-svg {
  --chat-pattern-stroke-opacity: 0.13;
}

/* VIP chat backgrounds (Aurora, bos, …) — white sender names on the photo; not Standaard / ChatPlaza */
.chat-box-body[data-busy-chat-bg='true'] .chat-sender-name,
[data-busy-chat-bg='true'] .chat-sender-name,
.chat-messages-area[data-busy-chat-bg='true'] .chat-sender-name {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.chat-box-body[data-busy-chat-bg='true'] .chat-member-action-pill,
[data-busy-chat-bg='true'] .chat-member-action-pill,
.chat-messages-area[data-busy-chat-bg='true'] .chat-member-action-pill {
  background: transparent !important;
  box-shadow: none;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.chat-box-body[data-busy-chat-bg='true'] button.chat-member-action-pill:hover,
[data-busy-chat-bg='true'] button.chat-member-action-pill:hover,
.chat-messages-area[data-busy-chat-bg='true'] button.chat-member-action-pill:hover {
  background: transparent;
  opacity: 0.85;
}

.chat-box-body[data-busy-chat-bg='true'] .member-action-overlay-pill,
[data-busy-chat-bg='true'] .member-action-overlay-pill,
.chat-messages-area[data-busy-chat-bg='true'] .member-action-overlay-pill {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
}

.chat-box-body[data-busy-chat-bg='true'] button.member-action-overlay-pill:hover,
[data-busy-chat-bg='true'] button.member-action-overlay-pill:hover,
.chat-messages-area[data-busy-chat-bg='true'] button.member-action-overlay-pill:hover {
  background: transparent !important;
  opacity: 0.85;
}

.chat-message-row--chain-avatar {
  overflow: visible;
}

.chat-message-row--chain-avatar.message-enter-shell {
  overflow: visible;
}

.chat-message-row--highlight {
  animation: chat-message-highlight 1.8s ease-out;
}

@keyframes chat-message-highlight {
  0%,
  15% {
    background-color: rgb(255 152 0 / 0.22);
    box-shadow: inset 0 0 0 1px rgb(255 152 0 / 0.35);
  }

  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.chat-message-row,
.chat-member-action-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 6px;
}

.chat-box,
.chat-box-body,
.chat-messages-area {
  max-width: 100%;
  min-width: 0;
}

.chat-messages-area {
  overflow-x: clip;
}

.chat-messages-area [data-item-index] {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.sidebar-accent-active {
  background-color: var(--color-sidebar-accent-bg);
  color: var(--color-sidebar-accent-text);
}

.sidebar-accent-label {
  color: var(--color-sidebar-accent-text);
}

.sidebar-accent-muted {
  color: var(--color-sidebar-accent-muted);
}


@keyframes member-slide-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.member-reveal-item {
  opacity: 0;
  animation-name: member-slide-in;
  animation-duration: 360ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.member-exit-item {
  animation: member-slide-out 280ms ease-in forwards;
  pointer-events: none;
  overflow: hidden;
}

.member-row.member-exit-item {
  animation: member-slide-out 280ms ease-in forwards;
  overflow: hidden;
}

@keyframes member-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 4rem;
  }
  to {
    opacity: 0;
    transform: translateX(-8px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes message-enter-history {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Telegram-style enter for live/new messages — lift with the smooth list scroll. */
@keyframes message-enter-live {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.message-enter-shell.message-enter--history,
.message-enter-chain.message-enter--history {
  opacity: 0;
  animation: message-enter-history 280ms ease-out both;
}

.message-enter-shell.message-enter--live,
.message-enter-chain.message-enter--live {
  opacity: 0;
  animation: message-enter-live 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.message-enter--live.message-enter--mine {
  transform-origin: 100% 100%;
}

.message-enter--live.message-enter--theirs {
  transform-origin: 0% 100%;
}

/* Centered rows (member actions) scale from the bottom center. */
.chat-member-action-row.message-enter--live {
  transform-origin: 50% 100%;
}

.message-enter-inner {
  min-height: 0;
}

.chat-message-row--chain-avatar .message-enter-inner {
  overflow: visible;
}

@keyframes chat-messages-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.chat-messages-ready {
  animation: chat-messages-fade-in 280ms ease-out both;
}

/* Lees meer / Lees minder — height ease on the timestamp shell (not a text wrapper). */
[data-cp-message-tail].cp-message-tail--animating {
  overflow: hidden;
  transition: max-height 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  [data-cp-message-tail].cp-message-tail--animating {
    transition: none;
  }
}

@keyframes dropdown-pop-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes member-mini-profile-enter {
  from {
    opacity: 0;
    transform: translateX(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes member-mini-profile-exit {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(14px) scale(0.98);
  }
}

@keyframes member-mini-profile-enter-from-left {
  from {
    opacity: 0;
    transform: translateX(-14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes member-mini-profile-exit-to-left {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-14px) scale(0.98);
  }
}

@keyframes member-mini-profile-modal-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes member-mini-profile-modal-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
}

.member-mini-profile-panel {
  will-change: transform, opacity;
}

.member-mini-profile-panel-origin-right {
  transform-origin: center right;
}

.member-mini-profile-panel-origin-left {
  transform-origin: center left;
}

.member-mini-profile-panel-modal {
  transform-origin: center center;
}

.member-mini-profile-panel-idle.member-mini-profile-panel-origin-right {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.member-mini-profile-panel-idle.member-mini-profile-panel-origin-left {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.member-mini-profile-panel-idle.member-mini-profile-panel-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.member-mini-profile-panel-enter.member-mini-profile-panel-origin-right {
  animation: member-mini-profile-enter 280ms ease-out both;
}

.member-mini-profile-panel-enter.member-mini-profile-panel-origin-left {
  animation: member-mini-profile-enter-from-left 280ms ease-out both;
}

.member-mini-profile-panel-enter.member-mini-profile-panel-modal {
  animation: member-mini-profile-modal-enter 260ms ease-out both;
}

.member-mini-profile-panel-exit.member-mini-profile-panel-origin-right {
  animation: member-mini-profile-exit 200ms ease-in both;
  pointer-events: none;
}

.member-mini-profile-panel-exit.member-mini-profile-panel-origin-left {
  animation: member-mini-profile-exit-to-left 200ms ease-in both;
  pointer-events: none;
}

.member-mini-profile-panel-exit.member-mini-profile-panel-modal {
  animation: member-mini-profile-modal-exit 180ms ease-in both;
  pointer-events: none;
}

@keyframes dropdown-pop-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.dropdown-menu-panel {
  pointer-events: auto;
  will-change: transform, opacity;
}

.dropdown-menu-origin-start {
  transform-origin: top left;
}

.dropdown-menu-origin-end {
  transform-origin: top right;
}

.dropdown-menu-origin-bottom-start {
  transform-origin: bottom left;
}

.dropdown-menu-origin-bottom-end {
  transform-origin: bottom right;
}

.dropdown-menu-panel-idle {
  opacity: 0;
  transform: scale(0.95);
}

.dropdown-menu-panel-enter {
  animation: dropdown-pop-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dropdown-menu-panel-exit {
  animation: dropdown-pop-out 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

@keyframes modal-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-backdrop-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modal-panel-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-panel-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.modal-backdrop-enter {
  animation: modal-backdrop-enter 220ms ease-out both;
}

.modal-backdrop-exit {
  animation: modal-backdrop-exit 180ms ease-in both;
}

.modal-panel-enter {
  animation: modal-panel-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal-panel-exit {
  animation: modal-panel-exit 200ms ease-in both;
}

@keyframes topbar-cta-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes topbar-cta-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

.topbar-cta-enter {
  animation: topbar-cta-enter 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.topbar-cta-exit {
  animation: topbar-cta-exit 450ms ease-in both;
}

@media (prefers-reduced-motion: reduce) {
  .topbar-cta-enter,
  .topbar-cta-exit {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.lightbox-backdrop {
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.lightbox-backdrop-open {
  opacity: 1;
}

.lightbox-image {
  opacity: 0;
  transform: scale(0.97) translateY(6px);
  transition:
    opacity 180ms ease-out,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.lightbox-image-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.lightbox-image-slide-out-left {
  opacity: 0;
  transform: translateX(-36px) scale(0.98);
  transition:
    opacity 220ms ease-in,
    transform 220ms cubic-bezier(0.4, 0, 1, 1);
}

.lightbox-image-slide-out-right {
  opacity: 0;
  transform: translateX(36px) scale(0.98);
  transition:
    opacity 220ms ease-in,
    transform 220ms cubic-bezier(0.4, 0, 1, 1);
}

.lightbox-image-slide-in-right {
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: lightbox-slide-in-from-right 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lightbox-image-slide-in-left {
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: lightbox-slide-in-from-left 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lightbox-slide-in-from-right {
  from {
    opacity: 0;
    transform: translateX(36px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes lightbox-slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-36px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.leftbar-tab-track,
.leftbar-tab-indicator {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes channel-active-indicator-grow {
  from {
    transform: scaleY(0.15);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.channel-exit-item {
  animation: channel-slide-out 280ms ease-in forwards;
  pointer-events: none;
  overflow: hidden;
}

.channel-huidig-label-exit {
  animation: channel-huidig-label-out 280ms ease-in forwards;
  pointer-events: none;
  overflow: hidden;
}

@keyframes channel-huidig-label-out {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 1.5rem;
  }
  to {
    opacity: 0;
    transform: translateX(-12px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes channel-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 5rem;
  }
  to {
    opacity: 0;
    transform: translateX(-12px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}

.member-row {
  contain: layout;
}

.channel-flip-item {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 2;
  position: relative;
}

.list-flip-item {
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 2;
  position: relative;
}

.message-list-flip-item {
  transition: transform 280ms ease-out;
  will-change: transform;
  position: relative;
}

.channel-active-indicator {
  transform-origin: center;
  animation: channel-active-indicator-grow 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-group(*) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .member-reveal-item {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .message-enter-shell,
  .message-enter-chain {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .message-enter-inner {
    opacity: 1;
    transform: none;
  }

  .chat-messages-ready {
    animation: none;
  }

  .dropdown-menu-panel-enter,
  .dropdown-menu-panel-exit,
  .dropdown-menu-panel-idle {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .modal-backdrop-enter,
  .modal-backdrop-exit,
  .modal-panel-enter,
  .modal-panel-exit {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .message-reaction-pill--pop,
  .message-reaction-pill--exit {
    animation: none;
  }

  .lightbox-backdrop,
  .lightbox-image {
    transition: none;
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .leftbar-tab-track,
  .leftbar-tab-indicator {
    transition: none;
  }

  .channel-flip-item,
  .list-flip-item,
  .message-list-flip-item {
    transition: none;
    transform: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .channel-active-indicator {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .typing-dots__dot,
  .typing-indicator-slot,
  .typing-indicator-pill {
    animation: none;
    transition: none;
  }
}

@keyframes typing-dot-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes dm-call-promo-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dm-call-promo-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.dm-call-promo-tooltip__panel--enter {
  animation: dm-call-promo-enter 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dm-call-promo-tooltip__panel--exit {
  animation: dm-call-promo-exit 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.dm-call-promo-tooltip__arrow {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.dm-call-promo-tooltip__arrow-fill {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-surface);
  filter: drop-shadow(0 -1px 0 var(--color-surface-border));
}

@keyframes typing-indicator-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-indicator-slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.typing-indicator-slot--open {
  grid-template-rows: 1fr;
}

.typing-indicator-slot__inner {
  overflow: hidden;
  min-height: 0;
}

.typing-indicator-pill {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.typing-indicator-pill--visible {
  opacity: 1;
  transform: translateY(0);
}

.typing-dots__dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background-color: #177fc0;
  animation: typing-dot-bounce 1.2s ease-in-out infinite;
}

.typing-dots__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots__dot:nth-child(3) {
  animation-delay: 0.3s;
}

.adblock-dialog-text {
  display: inline-block;
  line-height: 1.6;
}

@keyframes alert-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes alert-toast-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.alert-toast--enter {
  animation: alert-toast-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.alert-toast--exit {
  animation: alert-toast-exit 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.member-action-overlay--enter {
  animation: alert-toast-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.member-action-overlay--exit {
  animation: alert-toast-exit 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .alert-toast--enter,
  .alert-toast--exit,
  .member-action-overlay--enter,
  .member-action-overlay--exit {
    animation: none;
  }
}

.chat-emoji-picker {
  color-scheme: light;
  --epr-bg-color: var(--color-surface);
  --epr-highlight-color: var(--color-primary);
  --epr-search-input-bg-color: var(--color-field-bg);
  --epr-category-label-bg-color: var(--color-surface);
  --epr-picker-border-color: transparent;
  --epr-focus-bg-color: var(--color-primary);
  --epr-text-color: var(--color-on-surface);
  --epr-search-input-text-color: var(--color-on-surface);
  --epr-search-input-placeholder-color: var(--color-on-surface-muted);
  border: none !important;
}

[data-chat-dark='true'] .chat-emoji-picker {
  color-scheme: dark;
}

.chat-emoji-picker .epr-search-container input {
  border-radius: 9999px;
  font-size: 0.875rem;
}

.chat-emoji-picker .epr-category-nav {
  padding-inline: 0.25rem;
}

.chat-emoji-picker .epr-emoji-category-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-on-surface-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@keyframes reaction-pop {
  0% {
    opacity: 0.35;
    transform: scale(0.55);
  }
  55% {
    opacity: 1;
    transform: scale(1.14);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reaction-exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.55);
  }
}

.message-reaction-pill {
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.message-reaction-pill--pop {
  animation: reaction-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.message-reaction-pill--exit {
  animation: reaction-exit 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.message-reaction-pill__emoji {
  transform-origin: center;
}

.message-reaction-tooltip__arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--color-surface);
  filter: drop-shadow(0 1px 0 var(--color-surface-border));
}

html:has(.chat-app[data-general-font-size='font-medium']) {
  font-size: 112.5%;
}

html:has(.chat-app[data-general-font-size='font-large']) {
  font-size: 125%;
}

html[data-bold-text='true'],
html[data-bold-text='true'] body,
.chat-app[data-bold-text='true'] {
  font-weight: 700;
}

html[data-bold-text='true'] *:not(svg, svg *),
.chat-app[data-bold-text='true'] *:not(svg, svg *) {
  font-weight: 700 !important;
}

.chat-app {
  --chat-message-font-scale: 1;
}

.chat-app[data-message-font-size='font-medium'],
.chat-messages-area[data-message-font-size='font-medium'] {
  --chat-message-font-scale: 1.125;
}

.chat-app[data-message-font-size='font-large'],
.chat-messages-area[data-message-font-size='font-large'] {
  --chat-message-font-scale: 1.25;
}

/* Drive from .chat-app so message size works even when the messages area
   mounts after settings were applied (and when algemene tekstgrootte is normal). */
.chat-app[data-message-font-size='font-medium'] .chat-message-row .text-xs,
.chat-app[data-message-font-size='font-large'] .chat-message-row .text-xs,
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row .text-xs,
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row .text-xs {
  font-size: calc(0.75rem * var(--chat-message-font-scale));
}

.chat-app[data-message-font-size='font-medium'] .chat-message-row .text-sm,
.chat-app[data-message-font-size='font-large'] .chat-message-row .text-sm,
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row .text-sm,
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row .text-sm {
  font-size: calc(0.875rem * var(--chat-message-font-scale));
}

.chat-app[data-message-font-size='font-medium'] .chat-message-row .text-base,
.chat-app[data-message-font-size='font-large'] .chat-message-row .text-base,
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row .text-base,
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row .text-base {
  font-size: calc(1rem * var(--chat-message-font-scale));
}

.chat-app[data-message-font-size='font-medium'] .chat-message-row .text-2xl,
.chat-app[data-message-font-size='font-large'] .chat-message-row .text-2xl,
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row .text-2xl,
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row .text-2xl {
  font-size: calc(1.5rem * var(--chat-message-font-scale));
}

.chat-app[data-message-font-size='font-medium'] .chat-message-row .text-3xl,
.chat-app[data-message-font-size='font-large'] .chat-message-row .text-3xl,
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row .text-3xl,
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row .text-3xl {
  font-size: calc(1.875rem * var(--chat-message-font-scale));
}

.chat-app[data-message-font-size='font-medium'] .chat-message-row .text-4xl,
.chat-app[data-message-font-size='font-large'] .chat-message-row .text-4xl,
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row .text-4xl,
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row .text-4xl {
  font-size: calc(2.25rem * var(--chat-message-font-scale));
}

.chat-app[data-message-font-size='font-medium'] .chat-message-row [class*='text-[11px]'],
.chat-app[data-message-font-size='font-large'] .chat-message-row [class*='text-[11px]'],
.chat-messages-area[data-message-font-size='font-medium'] .chat-message-row [class*='text-[11px]'],
.chat-messages-area[data-message-font-size='font-large'] .chat-message-row [class*='text-[11px]'] {
  font-size: calc(0.6875rem * var(--chat-message-font-scale));
}

body.chat-route #CookiebotWidget {
  display: none;
}

@keyframes chat-drawer-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chat-drawer-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes chat-drawer-slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes chat-drawer-slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes chat-drawer-slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes chat-drawer-slide-out-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.chat-drawer-backdrop-enter {
  animation: chat-drawer-backdrop-in 320ms ease-out both;
}

.chat-drawer-backdrop-exit {
  animation: chat-drawer-backdrop-out 320ms ease-in both;
  pointer-events: none;
}

.chat-drawer-panel-enter-left {
  animation: chat-drawer-slide-in-left 320ms ease-out both;
}

.chat-drawer-panel-exit-left {
  animation: chat-drawer-slide-out-left 320ms ease-in both;
  pointer-events: none;
}

.chat-drawer-panel-enter-right {
  animation: chat-drawer-slide-in-right 320ms ease-out both;
}

.chat-drawer-panel-exit-right {
  animation: chat-drawer-slide-out-right 320ms ease-in both;
  pointer-events: none;
}

/* Google anchor auto-ads inject body padding / height:auto — keep the shell full-viewport. */
html:has(.chat-app),
html:has(.chat-app) body,
html:has(.chat-app) #__next,
html:has(.chat-app) #__next > main,
html:has(.chat-app) [data-chat-shell],
body.chat-route,
body.chat-route #__next,
body.chat-route #__next > main,
body.chat-route [data-chat-shell] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 639px) {
  html:has(.chat-app),
  html:has(.chat-app) body,
  html:has(.chat-app) #__next,
  html:has(.chat-app) #__next > main,
  html:has(.chat-app) [data-chat-shell],
  body.chat-route,
  body.chat-route #__next,
  body.chat-route #__next > main,
  body.chat-route [data-chat-shell] {
    min-height: 100dvh !important;
  }

  html:has(.chat-app) #__next,
  html:has(.chat-app) #__next > main,
  html:has(.chat-app) [data-chat-shell],
  body.chat-route #__next,
  body.chat-route #__next > main,
  body.chat-route [data-chat-shell] {
    height: 100% !important;
    max-height: 100dvh !important;
  }
}

/*
 * Auto ads inject .google-auto-placed as an in-flow sibling (often last child of
 * .chat-app). Park out of flex flow as a fixed bottom band; keep clickable.
 * Do NOT leave filled ads at height:0 / pointer-events:none — that counted
 * impressions with zero clicks.
 */
body.chat-route .google-auto-placed:not(:where(.chat-inpage-ad *)),
html:has(.chat-app) .google-auto-placed:not(:where(.chat-inpage-ad *)) {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 40 !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  pointer-events: auto !important;
  /* Never participate in the chat flex column (white gap under layout). */
  flex: 0 0 auto !important;
  align-self: stretch !important;
}

body.chat-route .google-auto-placed:empty,
html:has(.chat-app) .google-auto-placed:empty {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Bottom anchor auto-ads only — never in-chat banner/rail slots (.chat-inpage-ad). */
body.chat-route
  ins.adsbygoogle[data-anchor-status='displayed']:not(:where(.chat-inpage-ad *)),
body.chat-route
  ins.adsbygoogle[data-anchor-shown='true']:not(:where(.chat-inpage-ad *)) {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100vw !important;
  justify-content: center !important;
  align-items: flex-end !important;
  text-align: center !important;
}

body.chat-route
  ins.adsbygoogle[data-anchor-status='displayed']:not(:where(.chat-inpage-ad *)) iframe,
body.chat-route
  ins.adsbygoogle[data-anchor-shown='true']:not(:where(.chat-inpage-ad *)) iframe {
  margin-inline: auto !important;
}

@media (max-width: 639px) {
  /* Allow expanded bottom anchors on phone (legacy CTR). Keep z below composer. */
  body.chat-route
    ins.adsbygoogle[data-anchor-status]:not(:where(.chat-inpage-ad *)),
  body.chat-route
    ins.adsbygoogle[data-anchor-shown]:not(:where(.chat-inpage-ad *)) {
    z-index: 30 !important;
  }
}

body.chat-route .chat-inpage-ad ins.adsbygoogle {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  max-width: 100% !important;
}

/* Horizontal display slots need explicit block dimensions — not anchor/collapsed UI.
 * Chat header is excluded: sized by placement. Overview banner has its own rule. */
body.chat-route
  .chat-horizontal-ad.chat-inpage-ad:not(:where(.chat-header-ad-strip *)):not(.chat-overview-banner)
  ins.adsbygoogle {
  display: block !important;
  width: 300px !important;
  height: 60px !important;
  min-height: 60px !important;
  margin-inline: auto !important;
}

/* Timeline top banner — legacy Timeline/styles.css breakpoints; width follows wrapper. */
body.chat-route .chat-overview-banner.chat-inpage-ad {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  height: 121px !important;
  max-height: 121px !important;
}

body.chat-route .chat-overview-banner.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-overview-banner.chat-inpage-ad ins.adsbygoogle iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 121px !important;
  min-height: 121px !important;
  max-height: 121px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 1280px) {
  body.chat-route .chat-overview-banner.chat-inpage-ad {
    height: 82px !important;
    max-height: 82px !important;
  }

  body.chat-route .chat-overview-banner.chat-inpage-ad ins.adsbygoogle,
  body.chat-route .chat-overview-banner.chat-inpage-ad ins.adsbygoogle iframe {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }
}

@media (max-width: 963px) {
  /* Keep a horizontal banner on phone (legacy <ins> was 984×121, not 332 tall). */
  body.chat-route .chat-overview-banner.chat-inpage-ad {
    height: 121px !important;
    max-height: 121px !important;
  }

  body.chat-route .chat-overview-banner.chat-inpage-ad ins.adsbygoogle,
  body.chat-route .chat-overview-banner.chat-inpage-ad ins.adsbygoogle iframe {
    height: 121px !important;
    min-height: 0 !important;
    max-height: 121px !important;
  }
}

body.chat-route .chat-responsive-ad.chat-inpage-ad ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

body.chat-route
  .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *)),
body.chat-route .chat-responsive-ad-compact.chat-inpage-ad {
  height: 60px !important;
  max-height: 60px !important;
  overflow: visible !important;
}

body.chat-route .chat-responsive-ad-square.chat-inpage-ad {
  height: 250px !important;
  max-height: 250px !important;
  overflow: visible !important;
}

body.chat-route .chat-responsive-ad-rectangle.chat-inpage-ad {
  height: 280px !important;
  max-height: 280px !important;
  overflow: visible !important;
}

body.chat-route .chat-responsive-ad-vertical.chat-inpage-ad {
  width: 200px !important;
  min-height: 600px !important;
  height: 750px !important;
  max-height: 750px !important;
  overflow: visible !important;
}

body.chat-route
  .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *))
  ins.adsbygoogle,
body.chat-route
  .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *))
  ins.adsbygoogle
  iframe,
body.chat-route .chat-responsive-ad-compact.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-responsive-ad-compact.chat-inpage-ad ins.adsbygoogle iframe {
  max-height: 60px !important;
  height: 60px !important;
}

body.chat-route .chat-responsive-ad-square.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-responsive-ad-square.chat-inpage-ad ins.adsbygoogle iframe {
  width: 300px !important;
  max-height: 250px !important;
  height: 250px !important;
}

body.chat-route .chat-responsive-ad-rectangle.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-responsive-ad-rectangle.chat-inpage-ad ins.adsbygoogle iframe {
  width: 336px !important;
  max-height: 280px !important;
  height: 280px !important;
}

/* Timeline in-grid units — legacy Timeline/index.tsx sizes. */
body.chat-route .chat-overview-square.chat-inpage-ad {
  height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
}

body.chat-route .chat-overview-square.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-overview-square.chat-inpage-ad ins.adsbygoogle iframe {
  width: 300px !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
}

body.chat-route .chat-overview-rectangle.chat-inpage-ad {
  height: 278px !important;
  max-height: 278px !important;
  overflow: hidden !important;
}

body.chat-route .chat-overview-rectangle.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-overview-rectangle.chat-inpage-ad ins.adsbygoogle iframe {
  width: 352px !important;
  height: 278px !important;
  min-height: 278px !important;
  max-height: 278px !important;
}

body.chat-route .chat-overview-below-news.chat-inpage-ad {
  height: 60px !important;
  max-height: 60px !important;
  overflow: hidden !important;
}

body.chat-route .chat-overview-below-news.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-overview-below-news.chat-inpage-ad ins.adsbygoogle iframe {
  width: 300px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
}

/* Legacy Timeline `.timeline-side-card` visibility + sizes. */
body.chat-route .chat-overview-side-rail {
  width: 200px;
  height: 750px;
  flex-shrink: 0;
  margin-top: 0;
}

body.chat-route .chat-overview-side-rail .chat-overview-side-ad {
  width: 200px !important;
  max-width: 200px !important;
  height: 750px !important;
  min-height: 600px !important;
  max-height: 750px !important;
}

@media (max-height: 1024px) {
  body.chat-route .chat-overview-side-rail {
    height: 500px;
  }

  body.chat-route .chat-overview-side-rail .chat-overview-side-ad {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
}

@media (max-width: 1716px) {
  body.chat-route .chat-overview-side-rail {
    width: calc(50vw - 660px);
  }
}

@media (max-width: 1500px) {
  body.chat-route .chat-overview-side-rail {
    display: none;
  }
}

@media (max-width: 1280px) {
  body.chat-route .chat-overview-side-rail {
    display: block;
    width: calc(50vw - 505px);
  }
}

@media (max-width: 1142px) {
  body.chat-route .chat-overview-side-rail {
    display: none;
  }
}

@media (max-width: 1000px) {
  body.chat-route .chat-overview-side-rail {
    display: none;
  }
}

@media (max-width: 812px) {
  body.chat-route .chat-overview-side-rail {
    display: block;
    width: 120px;
  }

  body.chat-route .chat-overview-side-rail .chat-overview-side-ad {
    width: 120px !important;
    max-width: 120px !important;
  }

  body.chat-route .chat-overview-side-rail .chat-overview-side-ad ins.adsbygoogle,
  body.chat-route .chat-overview-side-rail .chat-overview-side-ad ins.adsbygoogle iframe {
    width: 120px !important;
  }
}

@media (max-width: 600px) {
  body.chat-route .chat-overview-side-rail {
    display: none;
  }
}

body.chat-route .chat-responsive-ad-vertical.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-responsive-ad-vertical.chat-inpage-ad ins.adsbygoogle iframe {
  width: 200px !important;
  min-height: 600px !important;
  height: 750px !important;
  max-height: 750px !important;
}

@media (min-width: 728px) {
  body.chat-route
    .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *)) {
    height: 90px !important;
    max-height: 90px !important;
  }

  body.chat-route
    .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *))
    ins.adsbygoogle,
  body.chat-route
    .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *))
    ins.adsbygoogle
    iframe {
    max-height: 90px !important;
    height: 90px !important;
  }
}

@media (min-width: 900px) {
  body.chat-route
    .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *)) {
    height: 125px !important;
    max-height: 125px !important;
  }

  body.chat-route
    .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *))
    ins.adsbygoogle,
  body.chat-route
    .chat-responsive-ad-leaderboard.chat-inpage-ad:not(:where(.chat-header-ad-strip *))
    ins.adsbygoogle
    iframe {
    width: 900px !important;
    max-height: 125px !important;
    height: 125px !important;
    min-height: 125px !important;
  }
}

body.chat-route .chat-responsive-ad.chat-inpage-ad ins.adsbygoogle[data-anchor-status],
body.chat-route .chat-responsive-ad.chat-inpage-ad ins.adsbygoogle[data-anchor-shown] {
  position: static !important;
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}

@media (min-width: 468px) {
  body.chat-route
    .chat-horizontal-ad.chat-inpage-ad:not(:where(.chat-header-ad-strip *)):not(.chat-overview-banner)
    ins.adsbygoogle {
    width: 468px !important;
    height: 60px !important;
  }
}

@media (min-width: 728px) {
  body.chat-route
    .chat-horizontal-ad.chat-inpage-ad:not(:where(.chat-header-ad-strip *)):not(.chat-overview-banner)
    ins.adsbygoogle {
    width: 728px !important;
    height: 90px !important;
    min-height: 90px !important;
  }
}

@media (min-width: 900px) {
  body.chat-route
    .chat-horizontal-ad.chat-inpage-ad:not(:where(.chat-header-ad-strip *)):not(.chat-overview-banner)
    ins.adsbygoogle {
    width: 900px !important;
    height: 125px !important;
    min-height: 125px !important;
  }
}

body.chat-route .chat-horizontal-ad.chat-inpage-ad ins.adsbygoogle[data-anchor-status],
body.chat-route .chat-horizontal-ad.chat-inpage-ad ins.adsbygoogle[data-anchor-shown] {
  position: static !important;
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}

body.chat-route .chat-header-ad-strip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.chat-route .chat-header-ad-strip .chat-header-ad-wide {
  display: flex !important;
  width: 900px !important;
  max-width: 100% !important;
  height: 125px !important;
  max-height: 125px !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  margin-inline: auto !important;
}

body.chat-route .chat-header-ad-strip .chat-header-ad-compact {
  display: flex !important;
  width: 300px !important;
  max-width: 100% !important;
  height: 60px !important;
  max-height: 60px !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  margin-inline: auto !important;
}

body.chat-route .chat-header-ad-strip .chat-horizontal-ad.chat-inpage-ad ins.adsbygoogle,
body.chat-route .chat-header-ad-strip .chat-horizontal-ad.chat-inpage-ad ins.adsbygoogle iframe {
  max-width: 100% !important;
  max-height: 100% !important;
  margin-inline: auto !important;
}

/* Legacy ChatComponent/styles.css progressive sizes for the wide chat header unit. */
@media (max-width: 1440px) {
  body.chat-route .chat-header-ad-strip .chat-header-ad-wide {
    width: 560px !important;
  }
}

@media (max-width: 1100px) {
  body.chat-route .chat-header-ad-strip .chat-header-ad-wide {
    height: 80px !important;
    max-height: 80px !important;
  }
}

@media (max-width: 600px) {
  body.chat-route .chat-header-ad-strip .chat-header-ad-wide {
    width: 400px !important;
  }
}

/* No AdSense inside chat sidebars or the message stream. */
body.chat-route .chat-sidebar ins.adsbygoogle,
body.chat-route .chat-messages-area ins.adsbygoogle {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.chat-route ins.adsbygoogle[data-anchor-hidden='empty'] {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Collapse in-page slots when AdSense never fills (VPN/proxy, unfilled, hung request). */
body.chat-route .chat-inpage-ad[data-ad-collapsed='true'],
body.chat-route .chat-header-ad-strip[data-ad-collapsed='true'] {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: none !important;
}

body.chat-route .chat-inpage-ad[data-ad-collapsed='true'] ins.adsbygoogle {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.chat-route .chat-messages-area {
  scroll-padding-bottom: var(--chat-anchor-ad-offset);
}