/* V21.58 - Ogni personalizzazione copre l'intera Chat. */
body.alCustomBackgroundActive #mainScreen,
body.alCustomBackgroundActive .chatSocialArchitecture,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFixedHeader,
body.alCustomBackgroundActive .chatSocialArchitecture .chatContentArea,
body.alCustomBackgroundActive .chatSocialArchitecture .messages,
body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterControls,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterActions {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .chatFixedHeader .nameLine,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFixedHeader .meta,
body.alCustomBackgroundActive .chatSocialArchitecture .alChatFooterContact,
body.alCustomBackgroundActive .chatSocialArchitecture .alChatFooterContactLabel,
body.alCustomBackgroundActive .chatSocialArchitecture .alChatFooterContactEmail {
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterControlItem,
body.alCustomBackgroundActive .chatSocialArchitecture .chatNewChatStack button,
body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter .chatSocialComposer,
body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter .chatSocialInput,
body.alCustomBackgroundActive .chatSocialArchitecture .daySep span {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterControlItem label,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterControlItem select,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterControlItem select option,
body.alCustomBackgroundActive .chatSocialArchitecture .chatNewChatStack button {
  background-color: transparent !important;
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterControlItem select option {
  background: var(--al-user-background) !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .chatSocialInput::placeholder {
  color: var(--al-user-muted) !important;
  opacity: 1 !important;
}

body.alCustomBackgroundActive .alAiChatQrWrap {
  width: auto !important;
  max-width: max-content !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .alAiChatQr {
  background: #fff !important;
  border-color: #42b7ef !important;
}

body.alCustomBackgroundActive .alAiPlatformsLine {
  color: #42b7ef !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter .chatSocialEmojiBtn,
body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter .chatRecordBtn,
body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter #cameraBtn,
body.alCustomBackgroundActive .chatSocialArchitecture .chatTelegramFooter #attachFileBtn,
body.alCustomBackgroundActive .chatSocialArchitecture .chatFooterActions .alHeaderIconBtn {
  background: var(--al-user-glass) !important;
  border-color: #42b7ef !important;
  color: #42b7ef !important;
}

/* V21.59 - Il colore scelto copre anche Social e Gruppi. */
body.alCustomBackgroundActive #socialScreen,
body.alCustomBackgroundActive .socialScreen,
body.alCustomBackgroundActive .socialMain,
body.alCustomBackgroundActive .socialSide,
body.alCustomBackgroundActive .socialFeed,
body.alCustomBackgroundActive .socialFeedHeader,
body.alCustomBackgroundActive .socialFixedCommentBar,
body.alCustomBackgroundActive #groupsBox,
body.alCustomBackgroundActive #groupsBox .boxHead,
body.alCustomBackgroundActive #groupsBox .boxBody,
body.alCustomBackgroundActive #groupList,
body.alCustomBackgroundActive #alMenuGroupList {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .socialPostCard,
body.alCustomBackgroundActive .socialWidget,
body.alCustomBackgroundActive .socialPostHead,
body.alCustomBackgroundActive .socialPostBody,
body.alCustomBackgroundActive .socialPostFooter,
body.alCustomBackgroundActive .socialCommentBox,
body.alCustomBackgroundActive .socialComment,
body.alCustomBackgroundActive .translationBox,
body.alCustomBackgroundActive .alSocialTranslationBox,
body.alCustomBackgroundActive .alTimerBox,
body.alCustomBackgroundActive .alUniversalBar,
body.alCustomBackgroundActive .groupItem,
body.alCustomBackgroundActive #groupCreateModal .modal {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .socialFeedTitle,
body.alCustomBackgroundActive .socialPostName,
body.alCustomBackgroundActive .socialPostText,
body.alCustomBackgroundActive .socialPostMeta,
body.alCustomBackgroundActive .socialComment,
body.alCustomBackgroundActive .translationHead,
body.alCustomBackgroundActive .translationText,
body.alCustomBackgroundActive .alTimerLine,
body.alCustomBackgroundActive .alTimerCountdown,
body.alCustomBackgroundActive .groupItem,
body.alCustomBackgroundActive .groupItem .nameLine,
body.alCustomBackgroundActive #groupCreateModal,
body.alCustomBackgroundActive #groupCreateModal label,
body.alCustomBackgroundActive #groupCreateModal .modalTitle {
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive .socialFixedCommentInput,
body.alCustomBackgroundActive .socialCommentRow input,
body.alCustomBackgroundActive .socialSearch,
body.alCustomBackgroundActive #groupCreateModal input,
body.alCustomBackgroundActive #groupCreateModal select,
body.alCustomBackgroundActive #groupCreateModal textarea {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .socialFixedCommentInput::placeholder,
body.alCustomBackgroundActive .socialCommentRow input::placeholder,
body.alCustomBackgroundActive .socialSearch::placeholder,
body.alCustomBackgroundActive #groupCreateModal input::placeholder {
  color: var(--al-user-muted) !important;
  opacity: 1 !important;
}

body.alCustomBackgroundActive .socialPostActions,
body.alCustomBackgroundActive .socialCommentBox,
body.alCustomBackgroundActive .socialOnlineItem,
body.alCustomBackgroundActive .groupItem {
  border-color: var(--al-user-line) !important;
}

/* Foto e video conservano il fondo nero necessario al player. */
body.alCustomBackgroundActive .socialMediaBox,
body.alCustomBackgroundActive .socialMediaBox video {
  background: #020617 !important;
}

/* V21.60 - Il colore scelto copre anche tutta la pagina d'ingresso. */
body.alCustomBackgroundActive #loginScreen,
body.alCustomBackgroundActive #loginScreen .loginWelcome,
body.alCustomBackgroundActive #loginScreen .accountAccess {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #loginScreen .loginLanguageChoice,
body.alCustomBackgroundActive #loginScreen .guestCard,
body.alCustomBackgroundActive #loginScreen .accountOnlyCard,
body.alCustomBackgroundActive #loginScreen .guestAdvanced,
body.alCustomBackgroundActive #loginScreen .advancedContent,
body.alCustomBackgroundActive #loginScreen .accountDetailsBody,
body.alCustomBackgroundActive #loginScreen .loginBenefits span,
body.alCustomBackgroundActive #loginScreen .loginChatActive {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #loginScreen h1,
body.alCustomBackgroundActive #loginScreen h2,
body.alCustomBackgroundActive #loginScreen h3,
body.alCustomBackgroundActive #loginScreen p,
body.alCustomBackgroundActive #loginScreen label,
body.alCustomBackgroundActive #loginScreen summary,
body.alCustomBackgroundActive #loginScreen .guestPromise,
body.alCustomBackgroundActive #loginScreen .guestPrivacy,
body.alCustomBackgroundActive #loginScreen .loginLanguageChoice label,
body.alCustomBackgroundActive #loginScreen .loginLanguageChoice small,
body.alCustomBackgroundActive #loginScreen .meta {
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive #loginScreen input:not([type="checkbox"]):not([type="file"]),
body.alCustomBackgroundActive #loginScreen select,
body.alCustomBackgroundActive #loginScreen textarea,
body.alCustomBackgroundActive #loginScreen .loginLanguageChoice select {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #loginScreen select option {
  background: var(--al-user-background) !important;
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive #loginScreen input::placeholder,
body.alCustomBackgroundActive #loginScreen textarea::placeholder {
  color: var(--al-user-muted) !important;
  opacity: 1 !important;
}

body.alCustomBackgroundActive #loginScreen .advancedContent,
body.alCustomBackgroundActive #loginScreen .accountDetailsBody {
  border-top-color: var(--al-user-line) !important;
}

/* V21.61 - Personalizzazione completa per menu laterale e Nuova chat. */
body.alCustomBackgroundActive .alSideMenu,
body.alCustomBackgroundActive .alSideMenuHead,
body.alCustomBackgroundActive .alSideMenuScroll,
body.alCustomBackgroundActive .alMenuDynamicList {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive .alMenuNavBtn,
body.alCustomBackgroundActive .alAccordionBtn,
body.alCustomBackgroundActive .alMenuSubBtn,
body.alCustomBackgroundActive .alAccordionPanel,
body.alCustomBackgroundActive .alMenuSearch {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .alSideMenuHead b,
body.alCustomBackgroundActive .alSideMenuHead span,
body.alCustomBackgroundActive .alSideMenu .meta,
body.alCustomBackgroundActive .alSideMenu .nameLine,
body.alCustomBackgroundActive .alMenuName,
body.alCustomBackgroundActive .alMenuItem {
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive .alMenuDivider {
  background: var(--al-user-line) !important;
}

body.alCustomBackgroundActive .alMenuSearch::placeholder {
  color: var(--al-user-muted) !important;
  opacity: 1 !important;
}

body.alCustomBackgroundActive #forwardModal .modal {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive #forwardModal .modalTitle,
body.alCustomBackgroundActive #forwardModal #forwardSearch,
body.alCustomBackgroundActive #forwardModal .preview,
body.alCustomBackgroundActive #forwardModal .tabs button,
body.alCustomBackgroundActive #forwardModal .fItem,
body.alCustomBackgroundActive #forwardModal .modal > .btnDark {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #forwardModal .tabs button.active {
  background: linear-gradient(135deg,#10a9ee 0%,#0075bd 100%) !important;
  border-color: #42b7ef !important;
  color: #fff !important;
}

body.alCustomBackgroundActive #forwardModal .fItem,
body.alCustomBackgroundActive #forwardModal .fItem .nameLine,
body.alCustomBackgroundActive #forwardModal .fItem .meta {
  color: var(--al-user-foreground) !important;
  border-color: var(--al-user-line) !important;
}

body.alCustomBackgroundActive #forwardModal #forwardSearch::placeholder {
  color: var(--al-user-muted) !important;
  opacity: 1 !important;
}

/* V21.62 - Contrasto automatico dentro messaggi e post. */
body.alCustomBackgroundActive .bubble,
body.alCustomBackgroundActive .bubbleName,
body.alCustomBackgroundActive .bubbleText,
body.alCustomBackgroundActive .translationBox,
body.alCustomBackgroundActive .translationHead,
body.alCustomBackgroundActive .translationText,
body.alCustomBackgroundActive .alTimerBox,
body.alCustomBackgroundActive .alTimerLine,
body.alCustomBackgroundActive .alTimerLine b,
body.alCustomBackgroundActive .alTimerCountdown,
body.alCustomBackgroundActive .alUniversalBar,
body.alCustomBackgroundActive .alUAFooter,
body.alCustomBackgroundActive .reactionLine,
body.alCustomBackgroundActive .socialPostCard .meta,
body.alCustomBackgroundActive .bubble .meta,
body.alCustomBackgroundActive .bubble .time {
  color: var(--al-user-foreground) !important;
}

/* V21.62 - Le schede dei messaggi nei gruppi seguono il colore scelto. */
body.alCustomBackgroundActive .chatSocialArchitecture .msgRow > .bubble,
body.alCustomBackgroundActive .chatSocialArchitecture .msgRow.mine > .bubble,
body.alCustomBackgroundActive .chatSocialArchitecture .msgRow:not(.mine) > .bubble {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  background-color: var(--al-user-background) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .bubble .forwarded,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .replyInside,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .linkPreview,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .translationBox,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .alTimerBox,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .alUniversalBar {
  background: color-mix(in srgb,var(--al-user-background) 88%,var(--al-user-foreground) 12%) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive .chatSocialArchitecture .bubble .bubbleName,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .bubbleText,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .translationHead,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .translationText,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .alTimerLine,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .alTimerLine b,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .alTimerCountdown,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .alUAFooter,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .time,
body.alCustomBackgroundActive .chatSocialArchitecture .bubble .meta {
  color: var(--al-user-foreground) !important;
}

/* V21.63 - La personalizzazione copre l'intera sezione LIVE. */
body.alCustomBackgroundActive #callModal .callModal,
body.alCustomBackgroundActive #callModal .modalTitle,
body.alCustomBackgroundActive #callModal .callScreen,
body.alCustomBackgroundActive #callModal .callScreen.alLiveChatOpen,
body.alCustomBackgroundActive #callModal .callControls,
body.alCustomBackgroundActive #alLiveModal .alLiveModal,
body.alCustomBackgroundActive #alLiveModal .modalTitle,
body.alCustomBackgroundActive #alLiveModal .alLiveList {
  background: linear-gradient(145deg,var(--al-user-background),var(--al-user-background-2)) !important;
  background-color: var(--al-user-background) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #callModal .alLiveChatBlock,
body.alCustomBackgroundActive #callModal .alLiveChatMessages,
body.alCustomBackgroundActive #callModal .alLiveChatComposer,
body.alCustomBackgroundActive #callModal .alLiveChatBubble,
body.alCustomBackgroundActive #callModal .alLiveChatBubble.mine,
body.alCustomBackgroundActive #alLiveModal .alLiveItem,
body.alCustomBackgroundActive .alLiveInviteModal,
body.alCustomBackgroundActive .alLiveInviteUser {
  background: color-mix(in srgb,var(--al-user-background) 88%,var(--al-user-foreground) 12%) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #callModal .alLiveChatSelect select,
body.alCustomBackgroundActive #callModal .alLiveChatComposer textarea,
body.alCustomBackgroundActive #callModal .alLiveChatQuick button,
body.alCustomBackgroundActive #callModal .alLiveRoundBtn,
body.alCustomBackgroundActive #callModal .alLiveIconBtn {
  background: var(--al-user-glass) !important;
  border-color: var(--al-user-line) !important;
  color: var(--al-user-foreground) !important;
  box-shadow: none !important;
}

body.alCustomBackgroundActive #callModal .alLiveChatSelect select option {
  background: var(--al-user-background) !important;
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive #callModal .modalTitle,
body.alCustomBackgroundActive #callModal .callState,
body.alCustomBackgroundActive #callModal .callTimer,
body.alCustomBackgroundActive #callModal .alLiveChatTitle,
body.alCustomBackgroundActive #callModal .alLiveChatMessages .meta,
body.alCustomBackgroundActive #callModal .alLiveChatBubble,
body.alCustomBackgroundActive #callModal .alLiveChatBubble b,
body.alCustomBackgroundActive #callModal .alLiveTranslation,
body.alCustomBackgroundActive #callModal .alLiveMediaLabel,
body.alCustomBackgroundActive #callModal #alLiveChatStatus,
body.alCustomBackgroundActive #alLiveModal .meta,
body.alCustomBackgroundActive .alLiveInviteHelp,
body.alCustomBackgroundActive .alLiveInviteUser small {
  color: var(--al-user-foreground) !important;
}

body.alCustomBackgroundActive #callModal .alLiveChatComposer textarea::placeholder {
  color: var(--al-user-muted) !important;
  opacity: 1 !important;
}

/* Il riquadro video resta nero per garantire la visibilità delle immagini. */
body.alCustomBackgroundActive #callModal #callVideoArea,
body.alCustomBackgroundActive #callModal #remoteVideoBox,
body.alCustomBackgroundActive #callModal #remoteVideoBox video {
  background: #020617 !important;
}