#telegram-dialog .rules-dialog__window { max-width: 540px; }
#telegram-dialog .rules-content { display: grid; gap: 12px; }
#telegram-dialog p { margin: 0; overflow-wrap: anywhere; }
#telegram-options { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; }
#telegram-options label { display: flex; align-items: center; gap: 8px; }
#telegram-options input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; }
#telegram-options:disabled { opacity: .55; }
#telegram-feedback { font-size: 12px; }
#telegram-dialog .dialog-close { display: grid; place-items: center; padding: 0; line-height: 1; }
#telegram-dialog [hidden] { display: none !important; }
#telegram-bot-link { text-align: center; text-decoration: none; }
#telegram-dialog .rules-dialog__footer { flex-wrap: wrap; }

/* On laptops, the Telegram dialog and its content must have the same width. */
@media (min-width: 769px) {
  #telegram-dialog { width: min(560px, calc(100vw - 36px)); }
  #telegram-dialog .rules-dialog__window { width: 100%; max-width: none; }
}

/* Centre the close glyph inside the club modal button at every screen size. */
#club-proposals-dialog .club-modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 1;
}

/* Give interactive buttons the same temporary accent border and glow as the modal close button.
   Leave text links, nicknames, emoji tiles and disabled controls unchanged. */
@media (hover: hover) and (pointer: fine) {
  body button:not(:disabled):not(.registration-rules-link):not(.text-button):not(.nick-link):not(.smile-btn):not(.emoji-toggle):not(.emoji-option):not(.emoji-category-tab):hover,
  body a.btn:hover {
    outline: 2px solid var(--accent, #df00ff);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(223, 0, 255, .18), 0 0 16px rgba(223, 0, 255, .22);
    filter: brightness(1.1);
  }
}