/* v1508: keep the public chat inside every mobile viewport and isolate it from page section styles. */
section.nl-chat-widget {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-width: calc(100dvw - 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nl-chat-widget .nl-chat-launcher,
.nl-chat-widget .nl-chat-panel {
  min-width: 0;
  max-width: 100%;
}

.nl-chat-widget .nl-chat-header,
.nl-chat-widget .nl-chat-header > div:first-child,
.nl-chat-widget .nl-chat-header-actions,
.nl-chat-widget .nl-chat-history,
.nl-chat-widget .nl-chat-form,
.nl-chat-widget .nl-chat-form textarea {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 599px) {
  section.nl-chat-widget {
    right: max(8px, env(safe-area-inset-right)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }

  .nl-chat-widget .nl-chat-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: min(620px, calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    height: min(620px, calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }

  .nl-chat-widget .nl-chat-launcher {
    width: fit-content;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .nl-chat-widget .nl-chat-header > div:first-child {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .nl-chat-widget .nl-chat-header > div:first-child strong,
  .nl-chat-widget .nl-chat-connection b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nl-chat-widget .nl-chat-header-actions {
    flex: 0 1 auto;
  }
}

@media (max-width: 340px) {
  .nl-chat-widget .nl-chat-header {
    gap: 5px;
    padding-inline: 8px;
  }

  .nl-chat-widget .nl-chat-header-actions {
    gap: 3px;
  }

  .nl-chat-widget .nl-chat-archives-toggle,
  .nl-chat-widget .nl-chat-end {
    padding-inline: 5px;
  }
}