/* V21.88 - Finestra LIVE adattiva: fullscreen mobile, quasi fullscreen desktop */

/* V21.91 - Avviso Guest sempre nero e realmente in grassetto.
   Questo file viene caricato per ultimo e prevale sui vecchi colori del tema. */
#loginScreen .guestCard .guestPrivacy,
body.alCustomBackgroundActive #loginScreen .guestCard .guestPrivacy {
  color: #000000 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Bandiere grafiche: evita che Windows mostri le emoji come sigle IT/ES. */
.alNationalityBadge {display:inline-flex!important;align-items:center!important;gap:5px!important;min-width:0;vertical-align:middle}
.alCountryFlag {display:inline-block!important;width:20px!important;height:14px!important;min-width:20px!important;object-fit:cover!important;border:1px solid rgba(0,0,0,.16);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* Stato online: solo un piccolo pallino verde accanto al nome. */
.alOnlineDot {display:inline-block!important;width:9px!important;height:9px!important;min-width:9px!important;margin-left:7px!important;border-radius:50%!important;background:#16c65b!important;border:1px solid #07923c!important;box-shadow:0 0 0 2px #fff,0 0 6px rgba(22,198,91,.55)!important;vertical-align:middle!important}

.socialGuestTemporaryNotice {box-sizing:border-box;width:min(920px,calc(100% - 24px));margin:10px auto;padding:10px 14px;border:1px solid #f0c14b;border-radius:12px;background:#fff8dc;color:#111;font-weight:800;text-align:center;font-size:clamp(12px,2.8vw,15px);line-height:1.35}

/* V21.97 - Accesso Google dopo i pannelli account. */
#loginScreen .accountAccess .googleLoginStandalone {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 2px !important;
}

#loginScreen .accountAccess .googleLoginStandalone .googleLoginDivider {
  margin: 8px 0 10px !important;
}

#loginScreen .accountAccess .googleLoginStandalone .googleLoginBtn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* V22.18 - Unica misura finale per tutti i pulsanti della barra. */
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > button {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 13px !important;
  align-self: center !important;
  justify-self: center !important;
  box-sizing: border-box !important;
}

/* Il LIVE conserva solo il colore rosso: forma e misura sono comuni. */
.chatSocialArchitecture .chatTelegramFooter #liveQuickBtn.chatLiveQuickBtn {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  transform: none !important;
}

@media (max-width: 700px), (pointer: coarse) {
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 64px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 13px !important;
  }

  .chatSocialArchitecture .chatTelegramFooter #liveQuickBtn.chatLiveQuickBtn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 64px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
}

/* V22.01 - Simbolo del genere accanto al nome dei Guest. */
.alGenderSymbol {
  display: inline-block !important;
  margin-left: 4px !important;
  font-size: .92em !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  vertical-align: .06em !important;
  white-space: nowrap !important;
}
.alGenderMale { color: #216cff !important; }
.alGenderFemale { color: #d94b93 !important; }
.alGenderTrans { color: #8b5cf6 !important; }
.alGenderNonBinary { color: #7c3aed !important; }

/* V22.19 - Tutti grandi quanto il microfono, con selettori definitivi. */
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > .chatSocialEmojiBtn,
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #recordBtn,
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #liveQuickBtn,
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #cameraBtn,
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #attachFileBtn,
.chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > .chatSocialSendBtn {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  align-self: center !important;
  justify-self: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px), (pointer: coarse) {
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > .chatSocialEmojiBtn,
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #recordBtn,
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #liveQuickBtn,
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #cameraBtn,
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > #attachFileBtn,
  .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer > .chatSocialSendBtn {
    width: min(100%, 58px) !important;
    min-width: 0 !important;
    max-width: 58px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 58px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: clamp(11px, 3.4vw, 14px) !important;
  }
}

#callModal {
  padding: clamp(8px, 1.5vw, 20px) !important;
  overflow: hidden !important;
}

#callModal .callModal,
#callModal .callModal.alLiveChatModalOpen {
  width: min(96vw, 1800px) !important;
  max-width: none !important;
  height: 94dvh !important;
  height: 94svh !important;
  max-height: 94dvh !important;
  margin: 1dvh auto !important;
  padding: clamp(10px, 1.2vw, 18px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#callModal .callModal > .modalTitle {
  flex: 0 0 auto !important;
  margin-bottom: 10px !important;
}

#callModal .callScreen,
#callModal .callScreen.alLiveChatOpen {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr) !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
}

#callModal .callScreen.alLiveChatOpen #callVideoArea,
#callModal .callScreen.alLiveChatOpen #remoteVideoBox,
#callModal .callScreen.alLiveChatOpen #remoteVideoBox > video {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (min-width: 901px) {
  #callModal .callScreen.alLiveChatOpen > .alLiveChatBlock {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Tablet e cellulari: la finestra usa esattamente lo spazio visibile. */
@media (max-width: 900px) {
  #callModal {
    width: 100vw !important;
    height: 100dvh !important;
    height: 100svh !important;
    inset: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #callModal .callModal,
  #callModal .callModal.alLiveChatModalOpen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    height: 100svh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #callModal .callModal > .modalTitle {
    min-height: 44px !important;
    margin: 0 2px 6px !important;
    font-size: clamp(18px, 5.5vw, 24px) !important;
  }

  #callModal .callScreen,
  #callModal .callScreen.alLiveChatOpen {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #callModal .callScreen.alLiveChatOpen #callVideoArea {
    width: 100% !important;
    height: clamp(190px, 32dvh, 340px) !important;
    min-height: min(190px, 28dvh) !important;
    flex: 0 0 auto !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callAudioArea + div {
    flex: 0 0 auto !important;
  }

  #callModal .callScreen.alLiveChatOpen > .callControls {
    width: 100% !important;
    margin: 2px auto !important;
    flex: 0 0 auto !important;
  }

  #callModal .callScreen.alLiveChatOpen > .alLiveChatBlock {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  #callModal .callScreen.alLiveChatOpen .alLiveChatMessages {
    height: clamp(120px, 21dvh, 210px) !important;
    min-height: 120px !important;
    flex: none !important;
  }
}

/* Cellulari stretti: nessun comando può uscire lateralmente. */
@media (max-width: 480px) {
  #callModal .callScreen.alLiveChatOpen #callVideoArea {
    height: clamp(180px, 30dvh, 285px) !important;
  }

  #callModal .callScreen.alLiveChatOpen > .callControls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button {
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 5px !important;
    font-size: 13px !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > .btnRed {
    grid-column: 1 / -1 !important;
    width: min(220px, 72%) !important;
  }

  #callModal .callScreen.alLiveChatOpen .alLiveChatComposer {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px 44px !important;
    gap: 3px !important;
  }

  #callModal .callScreen.alLiveChatOpen .alLiveRoundBtn,
  #callModal .callScreen.alLiveChatOpen .alLiveIconBtn,
  #callModal .callScreen.alLiveChatOpen .alLiveSendBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 42px !important;
  }
}

/* In orizzontale il video e la chat restano entrambi visibili. */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 650px) {
  #callModal .callScreen.alLiveChatOpen {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr) !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    overflow: hidden !important;
  }

  #callModal .callScreen.alLiveChatOpen #callVideoArea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callAudioArea + div {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #callModal .callScreen.alLiveChatOpen > .callControls {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > .btnRed {
    grid-column: auto !important;
    width: 100% !important;
  }

  #callModal .callScreen.alLiveChatOpen > .alLiveChatBlock {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* V21.95 - Controlli LIVE realmente fluidi anche con traduzioni lunghe. */
#callModal .callScreen.alLiveChatOpen > .callControls {
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
}

#callModal .callScreen.alLiveChatOpen .callControls > button {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1.05 !important;
}

#callModal .callScreen.alLiveChatOpen .callControls > button > span:last-child {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
  line-height: 1.05 !important;
}

#callModal .callScreen.alLiveChatOpen .callControls .alBtnIcon,
#callModal .callScreen.alLiveChatOpen .callControls .alBtnIcon svg {
  width: clamp(20px, 2vw, 26px) !important;
  height: clamp(20px, 2vw, 26px) !important;
  min-width: clamp(20px, 2vw, 26px) !important;
  flex: 0 0 auto !important;
}

/* PC fisso: finestra quasi a tutto monitor, senza superare l'area visibile. */
@media (min-width: 901px) {
  #callModal {
    padding: 1vh 1vw !important;
  }

  #callModal .callModal,
  #callModal .callModal.alLiveChatModalOpen {
    width: 98vw !important;
    height: 97dvh !important;
    height: 97svh !important;
    max-height: 97dvh !important;
    margin: .5dvh auto !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button {
    height: clamp(54px, 6.5vh, 68px) !important;
    min-height: 54px !important;
    padding: 6px clamp(5px, .7vw, 10px) !important;
    gap: clamp(4px, .55vw, 8px) !important;
    font-size: clamp(11px, .85vw, 15px) !important;
  }
}

/* Tablet e telefoni orizzontali: cinque comandi, ma testo sempre contenuto. */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 650px) {
  #callModal .callScreen.alLiveChatOpen .callControls > button {
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px 3px !important;
    gap: 3px !important;
    font-size: clamp(9px, 1.65vw, 13px) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls .alBtnIcon,
  #callModal .callScreen.alLiveChatOpen .callControls .alBtnIcon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
}

/* Cellulari verticali: due colonne ampie e pulsante Fine centrato. */
@media (max-width: 649px) {
  #callModal .callScreen.alLiveChatOpen > .callControls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button {
    height: auto !important;
    min-height: 54px !important;
    padding: 7px 6px !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > .btnRed {
    grid-column: 1 / -1 !important;
    width: min(230px, 72%) !important;
    justify-self: center !important;
  }
}

/* V22.40 - Ripristino definitivo dello schermo LIVE.
   Due sole colonne: video completo a sinistra e Chat LIVE a destra.
   L'anteprima personale torna piccola dentro il video. */
@media (min-width: 901px) {
  #callModal .callScreen.alLiveChatOpen {
    grid-template-columns: minmax(0, 1.7fr) minmax(360px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    column-gap: 14px !important;
  }

  #callModal .callScreen.alLiveChatOpen > .alLocalPreviewRail {
    display: none !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callVideoArea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callVideoArea > #remoteVideoBox {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callVideoArea > #localVideo {
    display: block !important;
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    width: clamp(110px, 11vw, 160px) !important;
    height: auto !important;
    min-height: 82px !important;
    max-height: 120px !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    z-index: 40 !important;
    margin: 0 !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callAudioArea + div {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: auto !important;
    justify-self: stretch !important;
    position: relative !important;
    z-index: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #callModal .callScreen.alLiveChatOpen > .callControls {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #callModal .callScreen.alLiveChatOpen > #alLiveChatBlock {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
  }
}

/* V22.34 - Anteprima personale nella fascia blu tra LIVE e Chat su PC. */
.alLocalPreviewRail {
  display: none;
}

@media (min-width: 1100px) {
  #callModal .callScreen.alLiveChatOpen {
    grid-template-columns: minmax(500px, 1.55fr) clamp(118px, 9.5vw, 170px) minmax(360px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    column-gap: clamp(8px, .7vw, 14px) !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callVideoArea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    position: relative !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callVideoArea > #remoteVideoBox {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  #callModal .callScreen.alLiveChatOpen > #callAudioArea + div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    justify-self: center !important;
    position: relative !important;
    z-index: 35 !important;
    margin: 0 0 12px !important;
    padding: 7px 16px !important;
    border-radius: 12px !important;
    background: rgba(2, 6, 23, .72) !important;
    backdrop-filter: blur(5px) !important;
  }

  #callModal .callScreen.alLiveChatOpen > .callControls {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #callModal .callScreen.alLiveChatOpen > .alLocalPreviewRail {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: #09072b !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 20 !important;
  }

  #callModal .callScreen.alLiveChatOpen > .alLocalPreviewRail > #localVideo {
    width: min(100%, 154px) !important;
    height: auto !important;
    min-height: 84px !important;
    max-height: none !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    border: 3px solid #38bdf8 !important;
    border-radius: 13px !important;
    background: #020617 !important;
    box-shadow: 0 7px 22px rgba(0,0,0,.55) !important;
  }

  #callModal .callScreen.alLiveChatOpen > #alLiveChatBlock {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }
}

/* Su tablet e cellulare l'anteprima resta nel riquadro video. */
@media (max-width: 1099px) {
  #callModal .alLocalPreviewRail {
    display: none !important;
  }
}

/* V22.33 - Il pannello chat LIVE deve ricevere sempre mouse e tocco.
   Nuova chat viene mostrata sopra la finestra della diretta. */
#callModal .callScreen.alLiveChatOpen > #alLiveChatBlock {
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

#callModal #alLiveChatBlock button,
#callModal #alLiveChatBlock select,
#callModal #alLiveChatBlock textarea,
#callModal #alLiveChatBlock label {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#forwardModal.alOpenedFromLive {
  z-index: 10050 !important;
}
/* V22.29 - Il marchio principale appartiene solo alla pagina di ingresso.
   Nelle aree interne viene rimosso anche dal flusso, recuperando tutta
   l'altezza occupata su desktop, mobile, PWA e WebView APK. */
body.alchat-chat-page > .app > .hero,
body.alchat-social-page > .app > .hero {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Ripristino dalla V22.30: il pannello comandi della LIVE rimane visibile
   anche se videocamera o collegamento non sono ancora disponibili. */
#callModal .callScreen.alLiveChatOpen > #alLiveChatBlock {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
}

/* V22.30 - Desktop: ora che la testata esterna non occupa più spazio,
   la Chat usa tutta l'altezza della finestra. Il contenuto cresce al centro
   e il blocco completo dei comandi resta appoggiato in fondo. */
@media (min-width: 901px) {
  body.alchat-chat-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.alchat-chat-page > .app,
  body.alchat-chat-page #mainScreen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.alchat-chat-page .chatSocialArchitecture {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body.alchat-chat-page .chatContentArea {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.alchat-chat-page .chatTelegramFooter {
    flex: 0 0 auto !important;
    margin-top: auto !important;
  }
}

/* V22.32 - Comandi LIVE centrati, uniformi e autoadattanti.
   Questo blocco finale prevale sulle regole delle versioni precedenti. */
#callModal .callScreen.alLiveChatOpen > .callControls {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: stretch !important;
}

#callModal .callScreen.alLiveChatOpen .callControls > button {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

#callModal .callScreen.alLiveChatOpen .callControls > button > span:last-child {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  text-align: center !important;
}

#alLiveChatBlock .alLiveChatActions {
  justify-content: center !important;
  align-items: stretch !important;
}

#alLiveChatBlock .alLiveChatActions > button {
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

/* PC ampi: cinque comandi uguali su una riga. */
@media (min-width: 1300px) {
  #callModal .callScreen.alLiveChatOpen > .callControls {
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
    gap: clamp(6px, .65vw, 10px) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button {
    min-height: 62px !important;
    padding: 8px clamp(7px, .7vw, 12px) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button > span:last-child {
    white-space: nowrap !important;
    font-size: clamp(12px, .82vw, 16px) !important;
  }
}

/* Tablet, piccoli portatili e telefoni orizzontali: tre colonne. */
@media (min-width: 650px) and (max-width: 1299px) {
  #callModal .callScreen.alLiveChatOpen > .callControls {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button {
    min-height: 56px !important;
    padding: 7px 8px !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > .btnRed {
    grid-column: 2 !important;
  }
}

/* Cellulari: due colonne; Fine centrato sotto agli altri comandi. */
@media (max-width: 649px) {
  #callModal .callScreen.alLiveChatOpen > .callControls {
    width: 100% !important;
    max-width: 520px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > button > span:last-child {
    white-space: normal !important;
    font-size: clamp(11px, 3.4vw, 15px) !important;
  }

  #callModal .callScreen.alLiveChatOpen .callControls > .btnRed {
    grid-column: 1 / -1 !important;
    width: min(230px, 72%) !important;
    justify-self: center !important;
  }
}

/* V22.40 FINAL - prevale su tutte le vecchie prove della LIVE. */
@media (min-width: 901px) {
  #callModal .callScreen.alLiveChatOpen {
    grid-template-columns: minmax(0, 1.7fr) minmax(360px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    column-gap: 14px !important;
  }
  #callModal .callScreen.alLiveChatOpen > .alLocalPreviewRail {display:none !important;}
  #callModal .callScreen.alLiveChatOpen > #callVideoArea {
    grid-column:1 !important;grid-row:1 !important;display:block !important;
    position:relative !important;width:100% !important;height:100% !important;
    min-height:0 !important;overflow:hidden !important;
  }
  #callModal .callScreen.alLiveChatOpen > #callVideoArea > #remoteVideoBox {
    position:absolute !important;inset:0 !important;width:100% !important;
    height:100% !important;min-height:0 !important;max-width:none !important;
  }
  #callModal .callScreen.alLiveChatOpen > #callVideoArea > #localVideo {
    display:block !important;position:absolute !important;right:10px !important;bottom:10px !important;
    width:clamp(110px,11vw,160px) !important;height:auto !important;min-height:82px !important;
    max-height:120px !important;aspect-ratio:4/3 !important;object-fit:cover !important;
    z-index:40 !important;margin:0 !important;
  }
  #callModal .callScreen.alLiveChatOpen > #callAudioArea + div {
    grid-column:1 !important;grid-row:2 !important;align-self:auto !important;
    justify-self:stretch !important;position:relative !important;z-index:auto !important;
    margin:0 !important;padding:0 !important;border-radius:0 !important;
    background:transparent !important;backdrop-filter:none !important;
  }
  #callModal .callScreen.alLiveChatOpen > .callControls {grid-column:1 !important;grid-row:3 !important;}
  #callModal .callScreen.alLiveChatOpen > #alLiveChatBlock {grid-column:2 !important;grid-row:1/4 !important;}
}

/* V22.41 - Nella LIVE restano solo timer e lingua sulla stessa riga. */
#callModal .callScreen.alLiveChatOpen .alLiveChatOptions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
}

#callModal .callScreen.alLiveChatOpen .alLiveChatOptions > .alLiveChatSelect:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#callModal .callScreen.alLiveChatOpen .alLiveChatOptions > .alLiveChatSelect:last-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
}