/* ZWORLD_CLASSIC_TOPIC_MODULE_V10_START */

  /*
   * Le topic peut être affiché ou masqué
   * sans modifier le salon ni envoyer de commande IRC.
   */

  /*
   * Le texte disparaît, mais sa place demeure réservée.
   * Caméra et Membres gardent ainsi leur position.
   */

  body.classic-topic-hidden-v10
  #channel-topic,

  body.classic-topic-hidden-v10
  #conversation-topic,

  body.classic-topic-hidden-v10
  .channel-topic,

  body.classic-topic-hidden-v10
  .conversation-topic,

  body.classic-topic-hidden-v10
  .chat-topic,

  body.classic-topic-hidden-v10
  .topic-text,

  body.classic-topic-hidden-v10
  .topic-copy,

  body.classic-topic-hidden-v10
  [data-channel-topic],

  body.classic-topic-hidden-v10
  [data-conversation-topic] {
    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;
    user-select: none !important;
  }

  /* ZWORLD_CLASSIC_TOPIC_STABLE_HEADER_V10_1B */

  /*
   * L’en-tête récupère l’espace lorsque
   * l’utilisateur masque le topic.
   */

  .classic-topic-settings-backdrop-v10 {
    position: fixed;
    inset: 0;
    z-index: 930;

    background:
      rgba(0, 0, 0, .26);

    opacity: 0;
    pointer-events: none;

    transition:
      opacity .14s ease;
  }

  .classic-topic-settings-backdrop-v10.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .classic-topic-settings-backdrop-v10[hidden] {
    display: none !important;
  }

  .classic-topic-settings-v10 {
    position: fixed;
    right: 14px;
    bottom: 67px;
    z-index: 940;

    width:
      min(
        330px,
        calc(100vw - 24px)
      );

    overflow: hidden;

    border:
      1px solid
      rgba(255, 255, 255, .12);

    border-radius: 16px;

    color: #f4f4f5;

    background:
      linear-gradient(
        150deg,
        rgba(26, 26, 30, .995),
        rgba(7, 7, 9, .998)
      );

    box-shadow:
      0 24px 64px
      rgba(0, 0, 0, .66);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;

    transform:
      translateY(7px)
      scale(.985);

    pointer-events: none;

    transition:
      opacity .14s ease,
      transform .14s ease;
  }

  .classic-topic-settings-v10.is-open {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    pointer-events: auto;
  }

  .classic-topic-settings-v10[hidden] {
    display: none !important;
  }

  .classic-topic-settings-head-v10 {
    min-height: 49px;

    padding: 9px 9px 9px 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-bottom:
      1px solid
      rgba(255, 255, 255, .075);
  }

  .classic-topic-settings-head-v10 strong {
    min-width: 0;

    flex: 1;

    font-size: 13px;
    font-weight: 850;
  }

  .classic-topic-settings-close-v10 {
    width: 31px;
    height: 31px;

    padding: 0;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 9px;

    color: #92929a;
    background: transparent;

    font: inherit;
    font-size: 18px;

    cursor: pointer;
  }

  .classic-topic-settings-close-v10:hover,
  .classic-topic-settings-close-v10:focus-visible {
    color: #f4f4f5;

    background:
      rgba(255, 255, 255, .06);

    outline: none;
  }

  .classic-topic-settings-content-v10 {
    padding: 10px;
  }

  .classic-topic-settings-section-v10 {
    margin: 0 2px 7px;

    color: #92929a;

    font-size: 8px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
  }

  .classic-topic-setting-row-v10 {
    width: 100%;
    min-height: 51px;

    padding: 8px 9px;

    display: flex;
    align-items: center;

    gap: 10px;

    border:
      1px solid
      rgba(255, 255, 255, .075);

    border-radius: 11px;

    color: #f4f4f5;

    background:
      rgba(255, 255, 255, .025);

    font: inherit;
    text-align: left;

    cursor: pointer;
  }

  .classic-topic-setting-row-v10:hover,
  .classic-topic-setting-row-v10:focus-visible {
    border-color:
      rgba(255, 255, 255, .16);

    background:
      rgba(255, 255, 255, .06);

    outline: none;
  }

  .classic-topic-setting-copy-v10 {
    min-width: 0;

    display: grid;

    gap: 3px;

    flex: 1;
  }

  .classic-topic-setting-copy-v10 strong {
    font-size: 10.5px;
    font-weight: 800;
  }

  .classic-topic-setting-copy-v10 small {
    overflow: hidden;

    color: #92929a;

    font-size: 8.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .classic-topic-switch-v10 {
    position: relative;

    width: 40px;
    height: 23px;

    flex: 0 0 auto;

    border:
      1px solid
      rgba(255, 255, 255, .12);

    border-radius: 999px;

    background: #141417;

    transition:
      border-color .14s ease,
      background .14s ease;
  }

  .classic-topic-switch-v10::after {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #92929a;

    transition:
      transform .14s ease,
      background .14s ease;
  }

  .classic-topic-setting-row-v10[aria-pressed="true"]
  .classic-topic-switch-v10 {
    border-color:
      rgba(255, 255, 255, .25);

    background: #29292f;
  }

  .classic-topic-setting-row-v10[aria-pressed="true"]
  .classic-topic-switch-v10::after {
    background: #f4f4f5;

    transform:
      translateX(17px);
  }

  .classic-topic-setting-note-v10 {
    margin: 8px 2px 1px;

    color: #92929a;

    font-size: 7.5px;
    line-height: 1.4;
  }

  @media (max-width: 700px) {
    .classic-topic-settings-backdrop-v10 {
      background:
        rgba(0, 0, 0, .48);
    }

    .classic-topic-settings-v10 {
      right: 0;
      bottom: 0;
      left: 0;

      width: 100%;

      border-right: 0;
      border-bottom: 0;
      border-left: 0;

      border-radius:
        20px
        20px
        0
        0;

      transform:
        translateY(18px);
    }

    .classic-topic-settings-v10.is-open {
      transform:
        translateY(0);
    }

    .classic-topic-settings-content-v10 {
      padding-bottom:
        calc(
          12px
          + env(safe-area-inset-bottom)
        );
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .classic-topic-settings-backdrop-v10,
    .classic-topic-settings-v10,
    .classic-topic-switch-v10,
    .classic-topic-switch-v10::after {
      transition: none !important;
    }
  }

  /* ZWORLD_CLASSIC_TOPIC_MODULE_V10_END */