/*
 * ============================================================
 * ZWORLD CLASSIC — PARAMÈTRES V12A
 * Fondation Web compacte
 * ============================================================
 */

.classic-settings-panel-v12a {
  width:
    min(
      380px,
      calc(100vw - 24px)
    );

  max-height:
    min(
      680px,
      calc(100vh - 88px)
    );
}

.classic-settings-head-v12a {
  min-height: 54px;
}

.classic-settings-heading-v12a {
  min-width: 0;

  display: grid;
  gap: 2px;

  flex: 1;
}

.classic-settings-heading-v12a strong {
  color: #f4f4f5;

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

.classic-settings-heading-v12a small {
  color: #92929a;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .035em;
}

.classic-settings-content-v12a {
  max-height:
    min(
      625px,
      calc(100vh - 143px)
    );

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;
}

.classic-settings-section-v12a {
  display: grid;
  gap: 6px;
}

.classic-settings-section-v12a
+ .classic-settings-section-v12a {
  margin-top: 14px;
}

.classic-settings-section-v12a h2 {
  margin: 0 2px 2px;

  color: #92929a;

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

.classic-settings-account-v12a {
  min-height: 58px;
  padding: 9px;

  display: flex;
  align-items: center;
  gap: 10px;

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

  border-radius: 12px;

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

.classic-settings-avatar-v12a {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

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

  border-radius: 10px;

  color: #f4f4f5;
  background: #1d1d21;

  font-size: 12px;
  font-weight: 900;
}

.classic-settings-account-copy-v12a {
  min-width: 0;

  display: grid;
  gap: 2px;

  flex: 1;
}

.classic-settings-account-copy-v12a strong {
  overflow: hidden;

  color: #f4f4f5;

  font-size: 11px;
  font-weight: 850;

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

.classic-settings-account-copy-v12a small {
  overflow: hidden;

  color: #92929a;

  font-size: 8px;

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

.classic-settings-online-v12a {
  padding: 4px 6px;

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

  border-radius: 999px;

  color: #b9b9bf;
  background:
    rgba(255, 255, 255, .035);

  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.classic-settings-action-v12a,
.classic-settings-toggle-v12a {
  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-settings-action-v12a:hover,
.classic-settings-action-v12a:focus-visible,
.classic-settings-toggle-v12a:hover,
.classic-settings-toggle-v12a:focus-visible {
  border-color:
    rgba(255, 255, 255, .16);

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

  outline: none;
}

.classic-settings-row-copy-v12a {
  min-width: 0;

  display: grid;
  gap: 3px;

  flex: 1;
}

.classic-settings-row-copy-v12a strong {
  color: #f4f4f5;

  font-size: 10.5px;
  font-weight: 800;
}

.classic-settings-row-copy-v12a small {
  overflow: hidden;

  color: #92929a;

  font-size: 8.5px;

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

.classic-settings-arrow-v12a {
  color: #92929a;

  font-size: 18px;
}

.classic-settings-switch-v12a {
  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-settings-switch-v12a::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-settings-toggle-v12a[aria-pressed="true"]
.classic-settings-switch-v12a {
  border-color:
    rgba(255, 255, 255, .25);

  background: #29292f;
}

.classic-settings-toggle-v12a[aria-pressed="true"]
.classic-settings-switch-v12a::after {
  background: #f4f4f5;

  transform:
    translateX(17px);
}

.classic-settings-feedback-v12a {
  margin: 0;
  padding: 7px 9px;

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

  border-radius: 9px;

  color: #d4d4d8;
  background:
    rgba(255, 255, 255, .035);

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

.classic-settings-feedback-v12a[hidden] {
  display: none !important;
}

.classic-settings-note-v12a {
  margin: 2px 2px 0;

  color: #92929a;

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

.classic-settings-footer-v12a {
  margin-top: 12px;
  padding: 9px 2px 1px;

  border-top:
    1px solid
    rgba(255, 255, 255, .065);

  color: #71717a;

  font-size: 7px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 700px) {
  .classic-settings-panel-v12a {
    max-height:
      min(
        82vh,
        690px
      );
  }

  .classic-settings-content-v12a {
    max-height:
      calc(
        82vh
        - 55px
      );
  }
}

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

/* ZWORLD_CLASSIC_SHOW_TIMES_CSS_V12B1_START */

/*
 * Le réglage conserve volontairement la géométrie des messages.
 * Les heures disparaissent sans déplacer les pseudos et les textes.
 */
html[data-classic-show-times="0"] .message-time {
  visibility: hidden !important;
}

/* ZWORLD_CLASSIC_SHOW_TIMES_CSS_V12B1_END */

/* ZWORLD_CLASSIC_COMPACT_MESSAGES_CSS_V12B2_START */

/*
 * Le mode compact réduit uniquement la géométrie verticale.
 *
 * Les tailles de texte, les colonnes, les couleurs et la largeur
 * maximale des messages restent celles du thème Classic.
 */
html[data-classic-compact-messages="1"] .day {
  margin-bottom: 12px !important;
}

html[data-classic-compact-messages="1"] .message {
  padding: 5px 0 !important;
  row-gap: 2px !important;
}

html[data-classic-compact-messages="1"] .message-text {
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  html[data-classic-compact-messages="1"] .message {
    padding: 4px 0 !important;
    row-gap: 1px !important;
  }
}

/* ZWORLD_CLASSIC_COMPACT_MESSAGES_CSS_V12B2_END */