/* Chatdorf mobile responsive hardening */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  max-width: 100%;
  font-size: 16px;
}

table {
  max-width: 100%;
}

pre, code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chatdorf-branding-forced,
.chatdorf-branding,
.site-branding,
.branding,
.logo-wrap,
.header-logo,
.logo {
  max-width: 100%;
}

.chatdorf-branding-forced img,
.chatdorf-branding img,
.site-branding img,
.branding img,
.logo-wrap img,
.header-logo img,
.logo img {
  max-width: min(320px, 90vw);
  height: auto;
}

@media (max-width: 900px) {
  body {
    margin: 0;
  }

  main,
  .container,
  .page,
  .content,
  .panel,
  .card,
  .box,
  form {
    max-width: 100% !important;
  }

  .container,
  .page,
  .content,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header,
  nav,
  .topbar,
  .navbar,
  .admin-nav,
  .room-nav {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav a,
  .nav a,
  .admin-nav a,
  .room-nav a,
  .button,
  button,
  input[type="submit"] {
    min-height: 42px;
  }

  .chatdorf-branding-forced img,
  .chatdorf-branding img,
  .site-branding img,
  .branding img,
  .header-logo img,
  .logo img {
    max-width: min(260px, 84vw);
  }

  .chat,
  .chat-page,
  .chat-layout,
  .chat-container,
  #chat,
  #messages,
  .messages,
  .message-list {
    max-width: 100% !important;
  }

  #messages,
  .messages,
  .message-list,
  .chat-messages {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .message,
  .chat-message,
  .bubble,
  .msg {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .chat-input,
  .message-form,
  #messageForm,
  form[action*="message"],
  form[action*="chat"] {
    max-width: 100%;
    gap: 8px;
  }

  .chat-input input,
  .chat-input textarea,
  .message-form input,
  .message-form textarea,
  #messageForm input,
  #messageForm textarea {
    width: 100%;
    min-width: 0;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
  }

  label {
    overflow-wrap: anywhere;
  }

  .modal,
  dialog,
  .dialog,
  .popup,
  .overlay-content {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    max-width: 100%;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  th,
  td {
    white-space: nowrap;
  }

  .admin-table,
  .table-wrap,
  .table-responsive,
  .archive,
  .reports,
  .attachments,
  .users-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  video,
  img.attachment,
  .attachment img,
  .attachment video,
  .message img,
  .message video {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.65rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  }

  .container,
  .page,
  .content,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  form,
  .form,
  .login,
  .register,
  .account,
  .admin-card,
  .card,
  .panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  button,
  .button,
  input[type="submit"],
  input[type="button"] {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }

  form button,
  form .button,
  form input[type="submit"] {
    width: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
  }

  .chatdorf-branding-forced,
  .chatdorf-branding,
  .site-branding,
  .branding,
  .logo-wrap,
  .header-logo,
  .logo {
    text-align: center;
  }

  .chatdorf-branding-forced img,
  .chatdorf-branding img,
  .site-branding img,
  .branding img,
  .header-logo img,
  .logo img {
    max-width: min(230px, 78vw);
  }

  .rooms,
  .room-list,
  .separee-list,
  .cards,
  .grid {
    display: block !important;
  }

  .rooms > *,
  .room-list > *,
  .separee-list > *,
  .cards > *,
  .grid > * {
    margin-bottom: 12px;
  }
}

@media (max-width: 420px) {
  .container,
  .page,
  .content,
  main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .chatdorf-branding-forced img,
  .chatdorf-branding img,
  .site-branding img,
  .branding img,
  .header-logo img,
  .logo img {
    max-width: min(205px, 76vw);
  }

  .chat-input,
  .message-form,
  #messageForm {
    display: block;
  }

  .chat-input button,
  .message-form button,
  #messageForm button {
    margin-top: 8px;
    width: 100%;
  }
}